（vue+element-ui）动态设置tabel列的显示与隐藏_vue+element ui项目是实战表格中列的显示与隐藏

 动态设置列的显示和隐藏

html部分

<el-table
  ref="multipleTable"
  :data="tableData"
  tooltip-effect="dark"
  style="width: 100%"
  header-row-class-name="headerRow"
  row-class-name="rowClass"
  @row-click="clickRow"
  @selection-change="handleSelectionChange">
  <el-table-column
    type="selection"
    :reserve-selection="true">
  </el-table-column>
  <el-table-column
    prop="name"
    key="0"
    label="原商品编码"
    width="100"
    v-if="colData[0].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="商品编码"
    key="1"
    v-if="colData[1].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="商品信息"
    key="2"
    v-if="colData[2].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="生产厂家"
    key="3"
    v-if="colData[3].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="条形码"
    key="4"
    v-if="colData[4].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="批准文号"
    key="5"
    v-if="colData[5].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="包装"
    key="6"
    v-if="colData[6].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="批件效期"
    key="7"
    v-if="colData[7].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="状态"
    key="8"
    v-if="colData[8].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="价格信息"
    key="9"
    v-if="colData[9].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="供应商信息"
    width="100"
    key="10"
    v-if="colData[10].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="协议信息"
    key="11"
    v-if="colData[11].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="是否限采"
    key="12"
    v-if="colData[12].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="上月TOP排名"
    width="110"
    key="13"
    v-if="colData[13].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="推介顺序"
    key="14"
    v-if="colData[14].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="本月活动信息"
    width="110"
    key="15"
    v-if="colData[15].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="销量情况"
    key="16"
    v-if="colData[16].istrue">
    <el-table-column
      prop="address"
      label="前三月销量"
      width="100">
    </el-table-column>
    <el-table-column
      prop="address"
      label="本月销量">
    </el-table-column>
    <el-table-column
      prop="address"
      label="日均销量">
    </el-table-column>
  </el-table-column>
  <el-table-column
    prop="address"
    label="库存状况"
    key="17"
    v-if="colData[17].istrue">
    <el-table-column
      prop="address"
      label="合格库存状况"
      width="110">
    </el-table-column>
    <el-table-column
      prop="address"
      label="当前电商占用数量"
      width="140">
    </el-table-column>
    <el-table-column
      prop="address"
      label="参考值">
    </el-table-column>
  </el-table-column>
  <el-table-column
    prop="address"
    label="建议采购量"
    width="100"
    key="18"
    v-if="colData[18].istrue"
  >
  </el-table-column>
  <el-table-column
    prop="address"
    label="计划"
    key="19"
    v-if="colData[19].istrue"
  >
  </el-table-column>
  <el-table-column
    prop="address"
    label="计划检查"
    key="20"
    v-if="colData[20].istrue">
  </el-table-column>
  <el-table-column
    prop="address"
    label="业务对接人"
    key="21"
    v-if="colData[21].istrue">
    <el-table-column
      prop="address"
      width="120"
      label="计划组采购经理">
    </el-table-column>
    <el-table-column
      prop="address"
      width="120"
      label="计划组大区经理">
    </el-table-column>
    <el-table-column
      prop="address"
      width="120"
      label="KA组采购经理">
    </el-table-column>
    <el-table-column
      prop="address"
      width="120"
      label="KA组大区经理">
    </el-table-column>
    <el-table-column
      prop="address"
      width="120"
      label="高毛组采购经理">
    </el-table-column>
    <el-table-column
      prop="address"
      width="120"
      label="高毛组大区经理">
    </el-table-column>
  </el-table-column>
  <el-table-column
    prop="address"
    label="付款方式"
    key="22"
    v-if="colData[22].istrue"
  >
  </el-table-column>
  <el-table-column
    prop="address"
    label="大库存情况"
    width="110"
    key="23"
    v-if="colData[23].istrue"
  >
  </el-table-column>
  <el-table-column
    label="本次采购供应商"
    width="120"
    prop="address"
    key="24"
    v-if="colData[24].istrue"
  >
    <template slot-scope="scope">
      <el-select v-model="scope.row.supplier" placeholder="请选择">
        <el-option
          v-for="item in supplierList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
  </el-table-column>
  <el-table-column
    prop="address"
    label="机构"
    key="25"
    v-if="colData[25].istrue"
  >
  </el-table-column>
</el-table>

(1) 通过v-if="colData[0].istrue"，来判断表格列的状态

2. Data部分：

colData: [
  { title: '原商品编码', istrue: true },
  { title: '商品编码', istrue: true },
  { title: '商品信息', istrue: true },
  { title: '生产厂家', istrue: true },
  { title: '条形码', istrue: true },
  { title: '批准文号', istrue: true },
  { title: '包装', istrue: true },
  { title: '批件效期', istrue: true },
  { title: '状态', istrue: true },
  { title: '价格信息', istrue: true },
  { title: '供应商信息', istrue: true },
  { title: '协议信息', istrue: true },
  { title: '是否限采', istrue: true },
  { title: '上月TOP排名', istrue: true },
  { title: '推介顺序', istrue: true },
  { title: '本月活动信息', istrue: true },
  { title: '销量情况', istrue: true },
  { title: '库存状况', istrue: true },
  { title: '建议采购量', istrue: true },
  { title: '计划', istrue: true },
  { title: '计划检查', istrue: true },
  { title: '业务对接人', istrue: true },
  { title: '付款方式', istrue: true },
  { title: '大库存情况', istrue: true },
  { title: '本次采购供应商', istrue: true },
  { title: '机构', istrue: true },
],
colSelect: [] // 设置选中的列的复选框

 Js部分：

columnChange(val) {
  this.colData.filter(i => {
    if (this.colSelect.indexOf(i.title) !== -1) {
      i.istrue = false
    } else {
      i.istrue = true
    }
  })
},

重点注意  key  

1.若不加key 那么你点击动态展示列的时候布局会乱，或者导致报错；

2.加了key之后ok解决；