前端 表格列表隐藏

应用场景：有些列表太多，需要根据个人习惯显示哪些列表

 

 我这里加了到保存到本地缓存，优点：刷新列表不会重置

---

代码

这里加了嵌套

<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :localSrt="localSrt" :columns="columns"></right-toolbar>

v-if 判断是否显示

 v-if="columns[0].visible" 

---

 

 缓存的k

localSrt :'appGoods',

 默认值

// 列信息
columns: [
  { key: 0, label: `用户昵称`, visible: true },
  { key: 1, label: `用户手机号`, visible: true },
  { key: 2, label: `商品类型`, visible: true },
  { key: 3, label: `商品名称`, visible: true },
], 

---

 显示/隐藏弹框

        RightToolbar

props: {
  localSrt: {
    type: String,
  },
}

<el-dialog v-dialog-drag  :title="title" :visible.sync="open" append-to-body>
  <el-button style="margin-bottom: 10px" size="mini"   @click="localStorage()">保存</el-button>
  <el-transfer
    :titles="['显示', '隐藏']"
    v-model="value"
    :data="columns"
    @change="dataChange"
  ></el-transfer>

</el-dialog>

created() {
  // 显隐列初始默认隐藏列
  for (let item in this.columns) {
    if (this.columns[item].visible === false) {
      this.value.push(parseInt(item));
    }
  }
},

// 右侧列表元素变化
dataChange(data) {
  for (let item in this.columns) {
    const key = this.columns[item].key;
    this.columns[item].visible = !data.includes(key);
  }
},
// 打开显隐列dialog
showColumn() {
  this.open = true;
},
//添加缓存
localStorage() {
   let goodsData =  JSON.stringify(this.columns)
  localStorage.setItem(this.localSrt, goodsData)
  this.open = false;
  this.$modal.msgSuccess("提交成功");
}

---

加载页面查询缓存

created() {
  this.localStorage();
}

methods: {
  localStorage() {
    //查询缓存的localSrt
    let newGoodsData = localStorage.getItem(this.localSrt)
   //转成JSON
    let goodsObj = JSON.parse(newGoodsData)
   //赋值
    if (goodsObj!=null){
      this.columns = goodsObj
    }
  },

}

---

心得：这个可以根据用户加缓存，不能用户显示的都不同，个人感觉这种弹框不好看 这个是不是更好看，大家觉得呢