基于Element-UI el-table的动态显示列组件

前言

由于公司要做的项目想要在页面上动态控制列表中某些列的显示与隐藏，但是element本身的el-table框架是没有这个功能的，只能自己把列表封装成一个组件，方便以后使用。

起步

Element官方的列表是这样的：
显然，这个列表是无法满足我们的需求的
先创一个建名为FileTable的组件

然后我们定义需要父组件传的值

 props: {
   
    tableData: {
    // 父组件传递过来的表格数据
      type: Array,
      default: () => {
   
        return []
      }
    },
    tableLabel: {
    // 父组件传递过来的表头数据
      type: Array,
      default: () => {
   
        return []
      }
    }
  },

引入Element官方的el-table组件：
1.绑定父组件传入的表格数据
2.循环父组件传入的表头数据 来生成el-table-column列
3.v-if绑定show属性控制该列是否显示

<el-table
      ref="filterTable"
      //data绑定父组件传入的表格数据
      :data="tableData"
      :max-height="tableHeight"
      size="small"
      row-class-name="row"
      cell-class-name="column"
      :highlight-current-row="true"
      fit
      :header-cell-style="headerStyle"
      :cell-style="{'text-align':'center'}"
      @cell-click="clickRow"
      @row-dblclick="rowdblclick"
      @selection-change="SelectChange"
    >
      <el-table-column :show-overflow-tooltip="true" sortable type="selection" width="45" />
      <el-table-column :show-overflow-tooltip="true" sortable type="index" :index="indexMethod" :cell-style="{'text-align':'center'}" style="text-align:center" label="ID" width="85">