AH科技网
您的当前位置:首页使用VUEelement-ui写个复用Table组件

使用VUEelement-ui写个复用Table组件

来源:AH科技网


饿了么的table组件功能很强大,对于项目中的各种表格基本够用,但是……个人对于它以列为单位的操作不习惯 。所以改成了另一种方式。本文主要介绍了VUE element-ui 写个复用Table组件的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

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

步骤一

先来个基本的表格展示

官例的tableData


table.vue


步骤二

简化一下表格:


步骤三

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

新建一个父组件sl_table.vue


table.vue就更简单了


步骤四

可以根据需求修改table的形式

列宽度

这个较为简单,可以直接加个属性


table.vue


自定义模板列

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

table.vue


表格展开行

类似宽度,只要sl_table.vue传入一个isExpand的属性。这里加个每次只能展开一行的效果:


table.vue


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

显示全文