使用View Design 组件库的 Table 组件，列的显示和隐藏

首先View Design 组件库的 Table 设置列的时候是使用一个变量 columns 来设置的一般写为：

<Table :columns="columns" :data="data"></Table>
<script>
    export default {
        data () {
            return {
                columns: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data: []
            }
        }
    }
</script>

然后呢这个表格就会显示 columns 中所有的列都会按照当columns的顺序进行列展示（好像是改不了的，也不能不显示某一列，在项目中的个人见解哈）

这个也是可以设置插槽的目前看到两种写法：

1.官网写法

<Table :columns="columns" :data="data">
   <template #name="{ row }">
        {{ row.name? row.name: '--' }}
   </template>
   <template  #action="{ row, index }">
        {{ row.age? row.age: 0 }}
   </template>
</Table>

2.这种我用过也可以

<Table :columns="columns" :data="data">
 <template slot-scope="{ row, index }" slot="name">
     {{ row.name? row.name: '--' }}
  </template>
</Table>

<script>
    export default {
        data () {
            return {
                columns: [
                    {
                        title: 'Name',
                        key: 'name',
                        slot: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age',
                        slot: 'name'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data: []
            }
        }
    }
</script>

说了这么多基础下面来说说怎么控制列的显示和隐藏吧：

就是把columns放到计算属性里面 让他跟随条件的变化而变化

但是我觉得这样写也是有问题的，那如果不同的条件显示的列不一样呢这样就会非常麻烦的，因为他在Table标签里面没有办法控制他的显示与隐藏（这里讲的也不知道对不对，可能有方法我不知道吧）

 computed:{
    columns: function () {
      let columns =  columns: [
                    {
                        title: 'Name',
                        key: 'name',
                        slot: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age',
                        slot: 'name'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
      // 控制性别的显示 并且显示在第一个
      if( 需要展示性别的条件成立){
       // 反正这里就是根据你的要求  使用数组的方法  需要放到第几个就放在第几个喽
        columns.unshift({
          title: 'Gender',
          key: 'gender',
        })
      }
      return columns;
    },