这次给大家带来element-ui怎样实现复用Table的组件,element-ui实现复用Table组件的注意事项有哪些,下面就是实战案例,一起来看一下。
饿了么的table组件功能很强大,对于项目中的各种表格基本够用,但是……个人对于它以列为单位的操作不习惯 =。=所以改成了另一种方式(我不会告诉你其实本质没变)。
项目中表格较多,所以复用性最重要
步骤一
先来个基本的表格展示
官例的tableDatatableData: [{
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
步骤二
简化一下表格://table.vue
:key="key"
:prop="item.value"
:label="item.name">
export default{
name: 'table',
data(){
return{
tableData:[...],
tableKey: [{
name: 'date',
value: '日期'
},{
name: '姓名',
value: 'name'
},{
name: '地址',
value: 'address'
}]
}
}
}
步骤三
复用table.vue就是————给它数据的同时告诉它我的字段名呗
新建一个父组件sl_table.vue//sl_table.vue
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
}
}
table.vue就更简单了//table.vue
:key="key"
:prop="item.value"
:label="item.name">
export default{
name: 'table',
data(){
return{
}
},
props:['tableData','tableKey'],
}
步骤四
可以根据需求修改table的形式
列宽度
这个较为简单,可以直接加个属性//sl_table.vue
...
data(){
return {
tableData: [...]
tableKey: [{
name: 'date',
value: '日期',
width: 80
},{
name: '姓名',
value: 'name',
width: 80
},{
name: '地址',
value: 'address'
}]
}
},
...
table.vue//table.vue
...
:key="key"
:prop="item.value"
:label="item.name"
:width="item.width">
...
自定义模板列
如果我们需要告诉组件哪个是自定义的列,所以添加一个属性operate
table.vue
v-if="!item.operate"
:key="key"
:prop="item.value"
:label="item.name"
:width="item.width">
//sl_table.vue
{{ scope.row.date | DateFilter }}
...
data(){
return {
tableData: [...]
tableKey: [{
name: 'date',
value: '日期',
operate: true
},{
name: '姓名',
value: 'name',
operate: false
},{
name: '地址',
value: 'address',
operate: false
}]
}
},
filters: {
DateFilter(){...}
}
...
表格展开行
类似宽度,只要sl_table.vue传入一个isExpand的属性。这里加个每次只能展开一行的效果://sl_table.vue
{{...expand something}}
...
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] : []
}
}
}
其他的(排序、多选)操作也是类似添加。。。多不赘述。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读: