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

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

步骤一

先来个基本的表格展示

官例的tableData

table.vue

步骤二

简化一下表格：

步骤三

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

新建一个父组件sl_table.vue

table.vue就更简单了

步骤四

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

列宽度

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

table.vue

自定义模板列

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

table.vue

表格展开行

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

table.vue

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

相关推荐：

CSS 利用table实现五种常用布局的方法示例_CSS教程_CSS_网页制作

HTML里table标签的使用方法

bootstrap关于table中cellStyle以及formatter的问题

以上就是使用VUE element-ui 写个复用Table组件的详细内容，更多请关注Gxl网其它相关文章！