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

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 弄' }]

Copy after login

table.vue

Copy after login

Step 2

Simplify the table:

//table.vue

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

Copy after login

table.vue is even simpler

//table.vue

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

Copy after login

table.vue

//table.vue ...  ...

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

     //sl_table.vue    ... data(){ return { tableData: [...] tableKey: [{ name: 'date', value: '日期', operate: true },{ name: '姓名', value: 'name', operate: false },{ name: '地址', value: 'address', 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   ...

Copy after login

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] : [] } } }

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!