位置: 编程技术 - 正文
VUE element-ui 写个复用Table组件的示例代码(elementui基于vue)
编辑：rootadmin推荐整理分享VUE element-ui 写个复用Table组件的示例代码(elementui基于vue)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:elementui基于vue,vue怎么用elementui,vue+element-ui,vue+element-ui,vue怎么用elementui,element+vue,vue element ui教程,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
其他的（排序、多选）操作也是类似添加。。。多不赘述。
上一篇：Vue2.0设置全局样式(less/sass和css)(vue 全局状态)
下一篇：Angular中支持SCSS的方法(angular scope)