elementUI table组件封装（vue）

前段时间公司做了一个新项目，后台管理这种，大部分都是表格，UI框架用的是element，所以我刚好把表格组件封装了一下，

elementUI表格组件常用的功能就是单选/多选框勾选，数据展示，行内按钮操作等，这块我也是基于本当前项目的需求大概封装的，比elementUI多的就是一个动态显示隐藏列的功能，这里记录一下

该组件可以动态设置是否显示动态列功能，那么什么是动态列功能呢，其实就是一个按钮，点击会出现一个下拉框，里面是表格所有列名组成的列表，每一个列名可以根据需求显示，勾选则显示，取消勾选则隐藏。实现原理是v-if控制当前列的显示，表格列数据中有一个参数用来控制当前列的显示与隐藏。

封装就到这里了，那怎么调用呢？

表格数据当然是后台获取，但是表头列数据可以后台获取，也可以前台定义，可以是这种格式：

tableColumns: [
        {
          key: "company",
          title: "企业",
          width: "150",
          isShow: true // 控制当前列是否显示
        },
        {
          key: "networkAccessRate",
          title: "入网率",
          width: "150",
          isShow: true
        },
        {
          key: "networkAccessScore",
          title: "入网率得分",
          width: "150",
          isShow: true
        },
        {
          key: "onlineRate",
          title: "上线率",
          width: "150",
          isShow: true
        },
        {
          key: "onlineScore",
          title: "上线率得分",
          width: "150",
          isShow: true
        },
        {
          key: "trackIntegrityRate",
          title: "轨迹完整率",
          width: "150",
          isShow: true
        }
      ]