【求教!求救!】vue实现动态控制列数据的显示与隐藏的问题

KenOscar
  • 857

想通过checkbox的选中与否控制表格每一列的数据是否显示,现在遇到一个问题
clipboard.png

table的数据结构:

const defaultFormThead = [{role:"角色"}, {status:"状态"}, {num:"排序号"}, {note:"备注"}];
 formTheadOptions: [{role:"角色"}, {status:"状态"}, {num:"排序号"}, {note:"备注"}],
 checkItems: defaultFormThead, // checkboxVal
 formThead: defaultFormThead, // 默认表头 Default header
tableData: [
        {
          role: "超级管理员",
          status: "已启用",
          num: "01",
          note: "userAdmin"
        },
        {
          role: "代码生成",
          status: "已启用",
          num: "02",
          note: "userAdmin"
        }
      ]

表头列的结构

  <el-table-column v-for="(item,index) in formThead" :label="item[Object.keys(item)[0]]" :key="index">
  <template slot-scope="scope">
    {{scope.row[Object.keys(item)[0]]}}
  </template>
</el-table-column>

筛选框的结构

            <el-checkbox-group v-model="checkItems">
              <el-checkbox  v-for="item in checkItems" :key="item.id" :label="item[Object.keys(item)[0]]"></el-checkbox>
            </el-checkbox-group>
          </div>

监听筛选框的值控制显示与否

 watch: {
    checkItems(valArr) {
      console.log(valArr);
      this.formThead = this.formTheadOptions.filter(
        i => valArr.indexOf(i) >= 0
      );
      console.log(111,this.formThead);
      this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
    }
  }

现在遇到的问题是 checkItems 这一块不知道该怎么修改 跟 watch里面联动起来,现在筛选功能不好用,因为绑定的数据是数组对象,不是字符串数组 所以无从下手修改

求教el-checkbox-group 跟 checkItems 监听要怎么修改

回复
阅读 5.1k
4 个回答

列表列和勾选那里的列都是用 表头配置 formThead 渲染的, 表头配置 formThead去掉不需要显示的列的数据就可以了,
<el-table-column v-for="(item,index) in formThead" 这个渲染的时候就会少了那一列了

或者 显示不显示加个状态,例如 勾选了的加个属性 show: true (注意此处v-for和v-if不要在同一个标签上)
<template v-for="(item,index) in formThead"

    <el-table-column v-if='item.show'
Yelup
  • 2
新手上路,请多包涵

简单看了一下,可能不是看到很详细。但是我之前处理的思路是将表格显示数据绑定在一个computed里面,筛选的时候对原始数据数组遍历取交集显示

救命啊!这个问题困扰好几天了

最简单就是checkItems可以改成两个字符串数组,一个拿来遍历,一个拿来绑定

宣传栏