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

最新推荐文章于 2024-10-29 11:06:34 发布

前端小蜜蜂w

最新推荐文章于 2024-10-29 11:06:34 发布

阅读量955

点赞数 8

文章标签： view design 前端

本文链接：https://blog.youkuaiyun.com/m0_61840359/article/details/134690025

版权

文章介绍了ViewDesign组件库中Table组件如何设置列，包括使用变量columns、插槽功能的不同实现以及如何通过计算属性动态控制列的显示和隐藏。作者提到在处理不同条件下的列显示时可能会遇到复杂性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先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;
    },