vue element-ui 自定义显示表格字段

自定义显示表格字段

html

<!-- 控制按钮 -->
<el-popover placement="bottom" width="100" trigger="click">
  <el-row v-for="item in cols" :key="item.prop">
    <el-col :span="24">
      <el-checkbox v-model="item.isShow">{{item.label}}</el-checkbox>
    </el-col>
  </el-row>
  <el-button slot="reference" size="small" icon="el-icon-setting">
      自定义显示字段
  </el-button>
</el-popover>

<!-- table -->
<el-table 
    ref="singleTable" 
    :data="tableData" 
    :height="tableHeight" 
    v-loading="loading" 
    size="mini"
    @sort-change="sortChange" 
    style="width: 100%;" 
    stripe=stripe border=border>
  <el-table-column prop="xh" fixed label="序号" type="index" :index="indexCreate" width="50" align="center"></el-table-column>
  <el-table-column v-if="cols[0].isShow" prop="trainUnit" fixed label="培训单位" width="120" sortable="custom" sort-by="trainUnit"></el-table-column>
  <el-table-column v-if="cols[1].isShow" prop="materialNo" fixed label="资材编号" width="120" sortable="custom" sort-by="materialNo"></el-table-column>
  <el-table-column v-if="cols[2].isShow" prop="materialName" label="资材名称" width="120" sortable="custom" sort-by="materialName"></el-table-column>
  <el-table-column v-if="cols[3].isShow" prop="supName" label="供应商名称" width="120" sortable="custom" sort-by="supName"></el-table-column>
  <el-table-column v-if="cols[4].isShow" prop="materialType" label="资材分类" width="120" sortable="custom" sort-by="materialType"></el-table-column>
  <el-table-column v-if="cols[5].isShow" prop="miniStockQty" label="安全库存量" width="120" sortable="custom" sort-by="miniStockQty"></el-table-column>
  <el-table-column v-if="cols[6].isShow" prop="stockQty" label="库存数量" width="120" sortable="custom" sort-by="stockQty"></el-table-column>
  <el-table-column v-if="cols[7].isShow" prop="scrapQty" label="待报废数量" width="120" sortable="custom" sort-by="scrapQty"></el-table-column>
  <el-table-column v-if="cols[8].isShow" prop="roadQty" label="在途数量" width="120" sortable="custom" sort-by="roadQty"></el-table-column>
  <el-table-column v-if="cols[9].isShow" prop="courseReqQty" label="课程需求量" width="120" sortable="custom" sort-by="courseReqQty"></el-table-column>
  <el-table-column v-if="cols[10].isShow" prop="gapQty" label="缺省数量" width="120" sortable="custom" sort-by="gapQty"></el-table-column>
  <el-table-column v-if="cols[11].isShow" prop="aveUseNo" label="平均可用次数" width="120" sortable="custom" sort-by="aveUseNo"></el-table-column>
  <el-table-column v-if="cols[12].isShow" prop="spQty" label="建议采购量" width="120" sortable="custom" sort-by="spQty"></el-table-column>
  <el-table-column v-if="cols[13].isShow" prop="useUnit" label="使用单位" width="120" sortable="custom" sort-by="useUnit"></el-table-column>
  <el-table-column v-if="cols[14].isShow" prop="orderUnit" label="订货单位" width="120" sortable="custom" sort-by="orderUnit"></el-table-column>
  <el-table-column v-if="cols[15].isShow" prop="unitQty" label="每单位数量" width="120" sortable="custom" sort-by="unitQty"></el-table-column>
  <el-table-column v-if="cols[16].isShow" prop="miniOrderUnit" label="最小订货数量" width="120" sortable="custom" sort-by="miniOrderUnit"></el-table-column>
  <el-table-column v-if="cols[17].isShow" prop="orderBuffer" label="订货Buffer" width="120" sortable="custom" sort-by="orderBuffer"></el-table-column>
</el-table>

js

data: function data() {
  return {
    cols: [
      {prop: 'trainUnit', label: '培训单位', isShow: true},
      {prop: 'materialNo', label: '资材编号', isShow: true},
      {prop: 'materialName', label: '资材名称', isShow: true},
      {prop: 'supName', label: '供应商名称', isShow: true},
      {prop: 'materialType', label: '资材分类', isShow: true},
      {prop: 'miniStockQty', label: '安全库存量', isShow: true},
      {prop: 'stockQty', label: '库存数量', isShow: true},
      {prop: 'scrapQty', label: '待报废数量', isShow: true},
      {prop: 'roadQty', label: '在途数量', isShow: true},
      {prop: 'courseReqQty', label: '课程需求量', isShow: true},
      {prop: 'gapQty', label: '缺省数量', isShow: true},
      {prop: 'aveUseNo', label: '平均可用次数', isShow: true},
      {prop: 'spQty', label: '建议采购量', isShow: true},
      {prop: 'useUnit', label: '使用单位', isShow: true},
      {prop: 'orderUnit', label: '订货单位', isShow: true},
      {prop: 'useUnit', label: '每单位数量', isShow: true},
      {prop: 'miniOrderUnit', label: '最小订货数量', isShow: true},
      {prop: 'orderBuffer', label: '订货Buffer', isShow: true},
    ],
  };
},

http://app.baiyug.cn:2019/vip/index.php?url=https://v.qq.com/x/cover/0s8n49g3g1rv1oz/r0029i5mk06.html?

https://v.qq.com/x/cover/0s8n49g3g1rv1oz/r0029i5mk06.html?