时间:2021-07-01 10:21:17 帮助过:9人阅读
饿了么的table组件功能很强大,对于项目中的各种表格基本够用,但是……个人对于它以列为单位的操作不习惯 =。=所以改成了另一种方式(我不会告诉你其实本质没变)。
项目中表格较多,所以复用性最重要
步骤一
先来个基本的表格展示
官例的tableData
table.vue
步骤二
简化一下表格:
步骤三
复用table.vue就是————给它数据的同时告诉它我的字段名呗
新建一个父组件sl_table.vue
table.vue就更简单了
步骤四
可以根据需求修改table的形式
列宽度
这个较为简单,可以直接加个属性
table.vue
自定义模板列
如果我们需要告诉组件哪个是自定义的列,所以添加一个属性operate
table.vue
表格展开行
类似宽度,只要sl_table.vue传入一个isExpand的属性。这里加个每次只能展开一行的效果:
table.vue
其他的(排序、多选)操作也是类似添加。。。多不赘述。
相关推荐:
使用DataTable插件实现异步加载数据详解
HTML的table鼠标拖拽排序该如何实现
JS实现table表格固定表头且表头随横向滚动而滚动
以上就是VUE element-ui 实现复用Table组件的详细内容,更多请关注Gxl网其它相关文章!