vue中控制表格列是否显示

1、设计思路

遍历数据，隐藏operate为true的列，实现通过标志控制表格列的显示和隐藏。

2、测试代码

<template>
  <div>
    <el-table :data="tableData" border>
      <el-table-column v-for="(item,key) in tableKey"
                       v-if="!item.operate"
                       :key="key"
                       :prop="item.name"
                       :label="item.value"
                       :width="item.width"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import Table from '@/components/table/table5s'
export default {
  components: {
    'sl-table': Table
  },
  data () {
    return {
      tableKey: [{
        name: 'date',
        value: '日期',
        width: 100,
        operate: false
      }, {
        name: 'name',
        value: '姓名',
        width: 100,
        operate: true
      }, {
        name: 'address',
        value: '地址',
        width: 100,
        operate: false
      }],
      tableData: [{
        date: '2019-06-02',
        name: '张三喜',
        address: '上海市闵行区长江路1518弄'
      }, {
        date: '2019-06-04',
        name: '李四愁',
        address: '北京朝阳区昆明路1517号'
      }, {
        date: '2019-05-01',
        name: '王麻子',
        address: '广州市越秀区南京路1519号'
      }, {
        date: '2019-05-03',
        name: '赵小六',
        address: '深圳市福田区深南大道1519号'
      }]
    }
  }
}
</script>