elementUI 二次封装table组件 表内有slot-scope解决方法 以及 表格的动态隐藏与显示

 封装的组件  tableList

<template>
  <div class="contrainer">
    <el-table :data="tableData" style="width: 100%; margin-top: 10px;" @selection-change="totalChange" :row-class-name="tableRowClassName" v-loading="loadding">
    <el-table-column type="selection" width="50"></el-table-column>
      <template v-for="(item,index) in tableColData">
        <el-table-column
          v-if="item.name==='status'"
          :prop="item.prop"
          :label="item.label"
          :key="index"
          :width="item.width"
          align="center"
          :sortable="item.sortable || false"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.statusCh == '正常'" class="greedColor">{{scope.row.statusCh}}</span>
            <span v-else class="redColor">{{scope.row.statusCh}}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.name==='username'"
          :prop="item.prop"
          :label="item.label"
          :key="item.prop"
          :width="item.width"
          align="center"
          :sortable="item.sortable || false"
        >
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.username" placement="top">
              <div class="names_">{{scope.row.username}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :prop="item.prop"
          :label="item.label"
          :key="item.label"
          :width="item.width"
          align="center"
          :sortable="item.sortable || false"
        >
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
export default{
  props: {
    tableData: Array,
    tableColData: Array,
    loadding:Boolean
  },
  data() {
    return {};
  },
};
</script>

使用组件

// 隐藏显示列按钮，点击弹出下拉选择列表
<el-popover width="40" trigger="click">
   <el-checkbox-group v-model="columnSelecteds" @change="selectChange">
       <el-checkbox v-for="item in select" :key="item.label" :label="item.label">{{item.label}}</el-checkbox>    
   </el-checkbox-group>
      <el-button slot="reference" type="primary" class="allBtnStyle allBtnBoxGreen greenBgBtn positioncenterBtn" style="margin-left: 6px;width: 100px;">隐藏显示列</el-button>
</el-popover>


// 使用组件
 <tableList :tableData="tableData" :tableColData="tableColData" :loadding = 'loadding'             @totalChange="totalChange">
 </tableList>


// 方法
selectChange(val){
   this.tableColData = selectList.filter(item => val.includes(item.label));
}