vue +element 的Table封装公共组件

element ui 的Table封装公共组件！

由于在做项目的时候，很多表格都是一样的格式，我们每次引入这样很浪费空间，将代码量上涨，不如将表格进行封装成一个公共的组件，便于我们随时随刻的调用。

table封装一

在这里去调用组件

对于表格操作的event对象

这是关于表格两项配置colums 和 operation(根据需求，有操作可配置，无操作给operation:[])

下面是封装的公共table组件

table封装二

采用插槽的方式将操作栏抽离

      
     
  data(){
    return {
    columns: [
        {
          prop: 'name',
          label: '用户名',
        },
        {
          prop: 'roleId',
          label: '用户角色',
          eventType: 'type',
        },
        {
          prop: 'status',
          label: '用户状态',
          isType: 'status',
        },
        {
          prop: 'dealScreenshot', //要与上面预留的slot位置一致
          label: '操作',
          operate: true,
        },
      ],
    }

公共表格组件二