vue动态控制el-table表格每一列的显示

在实际需求中我们常遇见这样的需求：

我们需要像如下方式一样动态控制表列的显示；

实现方法：

html：

        <el-popover placement="bottom-end" width="370" trigger="hover">
            <el-button
              slot="reference"
              class="cu-ordinaryBtn"
              icon="icon iconfont icon-shezhi-xianxing"
              style="margin-right: 10px"
              >设置</el-button
            >
            <template slot>
                <div>
                  <el-checkbox-group
                    v-model="checkedTableLines"
                    style="padding: 10px; padding-top: 0px"
                  >
                    <el-checkbox
                      style="margin-top: 15px"
                      v-for="item in tableLines"
                      :label="item"
                      :key="item"
                    >
                      {{ item }}
                    </el-checkbox>
                  </el-checkbox-group>
              </div>
            </template>
          </el-popover>

script:

<script>
	const tabLineOptions = [
		"房屋编码",
		"建筑面积",
		"使用面积",
		"朝向",
		"房屋性质",
		"房屋用途",
		"装修性质",
		"备注",
		"添加时间",
		"创建账号",
	];
	export default {
       data() {
		 return {
            	checkedTableLines: [
					"建筑面积",
					"使用面积",
					"朝向",
					"房屋性质",
					"房屋用途",
					"装修性质",
				],
				cities: tabLineOptions,
         }
       }
    }

最后在el-table列表项中添加：

v-if="checkedCities.indexOf('列表项名称') != -1"就可以实现动态控制table列表项了。如：

<el-table-column align="left" sortable="custom" prop="buildingUseType" label="房屋用途"
   v-if="checkedCities.indexOf('房屋用途') != -1">
</el-table-column>