vue动态控制table表格列数

最新推荐文章于 2023-10-16 16:29:02 发布

Lan_Lan99

最新推荐文章于 2023-10-16 16:29:02 发布

阅读量1.5k

点赞数

分类专栏： vue 文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/weixin_37817251/article/details/119917467

版权

vue 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

做一个技术实现记录：

1、定义两个数组，一个是展现tab列的数组：columnArray；一个是所有的tab列的数组：columnArrayCopy；

2、在界面上，写的代码，使用for循环，如下：

// 下拉框 
<el-select
    v-model="selectUserArr"
    multiple
    placeholder="请选择成员"
    style="width: 400px"
 >
    <el-option
     v-for="item in options"
    :key="item.label"
    :label="item.label"
    :value="item.value"
    >
</el-select> 

// table展示
<el-table-column
    v-for="item in columnArray"
    :key="item.uid"
    :label="item.uidName"
 >
 </el-table-column>

3、在watch中监听columnArray的变化，代码如下：需要注意的是，需要强制刷新
this.$forceUpdate();

selectUserArr(v) {
      this.columnArray = v.map((item) => {
        return {
          uidName: item,
          uid: item,
        };
      });
      // 需要强制刷新
      this.$forceUpdate();
    },