Use VUE element-ui to write a reusable Table component

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: '2016-05-02',
 name: '王小虎',
 address: '上海市普陀区金沙江路 1518 弄'
}, {
 date: '2016-05-04',
 name: '王小虎',
 address: '上海市普陀区金沙江路 1517 弄'
}, {
 date: '2016-05-01',
 name: '王小虎',
 address: '上海市普陀区金沙江路 1519 弄'
}, {
 date: '2016-05-03',
 name: '王小虎',
 address: '上海市普陀区金沙江路 1516 弄'
}]

table.vue

##

Step 2

Simplify the table:

//table.vue

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

table.vue is even simpler

##

//table.vue

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: 'date',
    value: '日期',
    width: 80
   },{
    name: '姓名',
    value: 'name',
    width: 80
   },{
    name: '地址',
    value: 'address'
   }]
  }
 },
...

table.vue

//table.vue
...

...

Custom template column

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

table.vue

 

//sl_table.vue

 

...
  data(){
   return {
    tableData: [...]
    tableKey: [{
     name: 'date',
     value: '日期',
     operate: true
    },{
     name: '姓名',
     value: 'name',
     operate: false
    },{
     name: '地址',
     value: 'address',
     operate: false
    }]
   }
  },
  filters: {
   DateFilter(){...}
  }
...

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


 
 ...

table.vue

//table.vue

 
  
 

...
props: ['tableData','tableKey','isExpand','isExpandOnly'],
methods: {
 handleExpand(row,is_expand){
  if(this.isExpand && this.isExpandOnly){
   this.$refs.raw_table.store.states.expandRows = expanded ? [row] : [] 
  }
 }
}

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!