VUE element-ui 写个复用Table组件的示例代码

2023-09-20 21:06:06 50

饿了么的table组件功能很强大，对于项目中的各种表格基本够用，但是……个人对于它以列为单位的操作不习惯=。=所以改成了另一种方式（我不会告诉你其实本质没变）。

项目中表格较多，所以复用性最重要

步骤一

先来个基本的表格展示

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

table.vue

步骤二

简化一下表格：

//table.vue

步骤三

复用table.vue就是————给它数据的同时告诉它我的字段名呗

新建一个父组件sl_table.vue

//sl_table.vue

table.vue就更简单了

//table.vue

步骤四

可以根据需求修改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
...

...

自定义模板列

如果我们需要告诉组件哪个是自定义的列，所以添加一个属性operate

table.vue









//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



{{...expandsomething}}

...

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

其他的（排序、多选）操作也是类似添加。。。多不赘述。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

VUE element-ui 写个复用Table组件的示例代码

热门推荐

随机推荐