This time I will show you how element-ui implements the reuse of Table components. What are the precautions for element-ui to implement reuse of Table components. The following is a practical case, let's take a look.
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 (I won’t tell you that the essence has not changed).
There are many tables in the project, so reusability is the most important
step one
Let’s start with a basic table display
Official tableData
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
<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: 'table',
data(){
return{
tableData:[...],
tableKey: [{
name: 'date',
value: '日期'
},{
name: '姓名',
value: 'name'
},{
name: '地址',
value: 'address'
}]
}
}
}
</script>Copy after login
Step 3
To reuse table.vue is to give it data and tell it my field names 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 '@/components/table'
export default{
name: 'sl-table',
data(){
return {
tableData: [...]
tableKey: [{
name: 'date',
value: '日期'
},{
name: '姓名',
value: 'name'
},{
name: '地址',
value: 'address'
}]
}
},
components: {
'sl-table': 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: 'table',
data(){
return{
}
},
props:['tableData','tableKey'],
}
</script>Copy after login
Step 4
The form of the table can be modified according to needs
Column width
This is relatively simple, you can directly add a 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
...
<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 columns
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: 'date',
value: '日期',
operate: true
},{
name: '姓名',
value: 'name',
operate: false
},{
name: '地址',
value: 'address',
operate: false
}]
}
},
filters: {
DateFilter(){...}
}
...Copy after login
Table expand row
Similar to width, as long as sl_table.vue passes in an isExpand attribute. Here is an effect that can only expand one line 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: ['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.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
The above is the detailed content of How element-ui implements reuse of Table components. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
