Use VUE element-ui to write a reusable Table component-JS Tutorial-php.cn

Use VUE element-ui to write a reusable Table component

小云云

Release： 2017-12-19 16:52:55

Original

2483 people have browsed it

The table component of Ele.me is very powerful and is basically sufficient for various tables in the project, but...I am not used to its column-based operations. So it was changed to another way. This article mainly introduces VUE element-ui to write a sample code for reusing the Table component. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

There are many tables in the project, so reusability is the most important.

Step 1

Let’s start with a basic table display

tableData of the official example

tableData: [{
 date: &#39;2016-05-02&#39;,
 name: &#39;王小虎&#39;,
 address: &#39;上海市普陀区金沙江路 1518 弄&#39;
}, {
 date: &#39;2016-05-04&#39;,
 name: &#39;王小虎&#39;,
 address: &#39;上海市普陀区金沙江路 1517 弄&#39;
}, {
 date: &#39;2016-05-01&#39;,
 name: &#39;王小虎&#39;,
 address: &#39;上海市普陀区金沙江路 1519 弄&#39;
}, {
 date: &#39;2016-05-03&#39;,
 name: &#39;王小虎&#39;,
 address: &#39;上海市普陀区金沙江路 1516 弄&#39;
}]

Copy after login

table.vue

<template>
 <el-table :data="tableData" border>
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
 </el-table>
</template>

Copy after login

Step 2

Simplify the table:

//table.vue
<template>
 <el-table :data="tableData" border>
  <el-table-column v-for="(item,key) in tableKey" 
  :key="key"
  :prop="item.value"
  :label="item.name"></el-table-column>
 </el-table>
</template>
<script>
export default{
 name: &#39;table&#39;,
 data(){
  return{
   tableData:[...],
   tableKey: [{
    name: &#39;date&#39;,
    value: &#39;日期&#39;
   },{
    name: &#39;姓名&#39;,
    value: &#39;name&#39;
   },{
    name: &#39;地址&#39;,
    value: &#39;address&#39;
   }]
  }
 }
}
</script>

Copy after login

Step 3

Reusing table.vue is to give it the data and tell it my field name at the same time呗

Create a new parent component sl_table.vue

//sl_table.vue
<template>
 <sl-table :tableData="tableData" :tableKey="tableKey"></sl-table>
</template>
<script>
import Table from &#39;@/components/table&#39;
export default{
 name: &#39;sl-table&#39;,
 data(){
  return {
   tableData: [...]
   tableKey: [{
    name: &#39;date&#39;,
    value: &#39;日期&#39;
   },{
    name: &#39;姓名&#39;,
    value: &#39;name&#39;
   },{
    name: &#39;地址&#39;,
    value: &#39;address&#39;
   }]
  }
 },
 components: {
  &#39;sl-table&#39;: Table
 }
}
</script>

Copy after login

table.vue is even simpler

//table.vue
<template>
 <el-table :data="tableData" border>
  <el-table-column v-for="(item,key) in tableKey" 
  :key="key"
  :prop="item.value"
  :label="item.name"></el-table-column>
 </el-table>
</template>
<script>
export default{
 name: &#39;table&#39;,
 data(){
  return{
   
  }
 },
 props:[&#39;tableData&#39;,&#39;tableKey&#39;],
}
</script>

Copy after login

Step 4

You can modify the form of the table according to your needs

Column width

This is relatively simple, you can directly Add an attribute

//sl_table.vue
...
 data(){
  return {
   tableData: [...]
   tableKey: [{
    name: &#39;date&#39;,
    value: &#39;日期&#39;,
    width: 80
   },{
    name: &#39;姓名&#39;,
    value: &#39;name&#39;,
    width: 80
   },{
    name: &#39;地址&#39;,
    value: &#39;address&#39;
   }]
  }
 },
...

Copy after login

table.vue

//table.vue
...
<el-table-column v-for="(item,key) in tableKey" 
:key="key"
:prop="item.value"
:label="item.name"
:width="item.width"></el-table-column>
...

Copy after login

Custom template column

If we need to tell the component which is a custom column, so add a property operate

table.vue

<el-table-column v-for="(item,key) in tableKey" 
v-if="!item.operate"
:key="key"
:prop="item.value"
:label="item.name"
:width="item.width"></el-table-column>

<!-- 自定义 -->
<el-table-column v-else>
 <template scope="scope">
  <slot :name="item.value" :$index="scope.$index" :row="scope.row"></slot>
 </template>
</el-table-column>
//sl_table.vue
<sl-table :tableData="tableData" :tableKey="tableKey">
 <template slot="date" scope="scope">
  <span>{{ scope.row.date | DateFilter }}</span>
 </template>
</sl-table>
...
  data(){
   return {
    tableData: [...]
    tableKey: [{
     name: &#39;date&#39;,
     value: &#39;日期&#39;,
     operate: true
    },{
     name: &#39;姓名&#39;,
     value: &#39;name&#39;,
     operate: false
    },{
     name: &#39;地址&#39;,
     value: &#39;address&#39;,
     operate: false
    }]
   }
  },
  filters: {
   DateFilter(){...}
  }
...

Copy after login

Table expansion row

Similar to width, as long as sl_table.vue passes in an isExpand attribute. Here is an effect that can only expand one row at a time:

//sl_table.vue

<sl-table :tableData="tableData" :tableKey="tableKey" :isExpand="true" :isExpandOnly="true">
 <template slot="expand" scope="scope">
  {{...expand something}}
 </template>
 ...
</sl-table>

Copy after login

table.vue

//table.vue
<el-table :data="tableData" border @expand="handleExpand" ref="raw_table">
 <el-table-column v-if="isExpand" type="expand">
  <template scope="scope">
   <slot name="expand" :$index="scope.$index" :row="scope.row"></slot>
  </template>
 </el-table-column>
</el-table>
...
props: [&#39;tableData&#39;,&#39;tableKey&#39;,&#39;isExpand&#39;,&#39;isExpandOnly&#39;],
methods: {
 handleExpand(row,is_expand){
  if(this.isExpand && this.isExpandOnly){
   this.$refs.raw_table.store.states.expandRows = expanded ? [row] : [] 
  }
 }
}

Copy after login

Other (sorting, multi-selection) operations are also added similarly. . . No need to go into details.

Related recommendations:

CSS Examples of five common layout methods using tables_CSS Tutorial_CSS_Web Page Production

How to use the table tag in HTML

bootstrap's problem with cellStyle and formatter in table

The above is the detailed content of Use VUE element-ui to write a reusable Table component. For more information, please follow other related articles on the PHP Chinese website!