若依-VUE 自动生成代码后显隐列不显示 and 保存每个显隐列的配置

如题
解决步骤

1. 在自动生成的 right-toolbar 中 添加 :columns=“columns” 绑定到列数组中

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

2. 添加列数组

 // 列信息
      columns: [
        { key: 0, label: `用户编号`, visible: true },
        { key: 1, label: `用户名称`, visible: true },
        { key: 2, label: `用户昵称`, visible: true },
        { key: 3, label: `部门`, visible: true },
        { key: 4, label: `手机号码`, visible: true },
        { key: 5, label: `状态`, visible: true },
        { key: 6, label: `创建时间`, visible: true }
      ],

3. 在列上进行columns 补充

// 主要关注点
// 每一列中都要加入  不然按钮还是不会显示 
 v-if="columns[1].visible" 

代码

 <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
          <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
          <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">

前端修改

index.vue

/* :key="componentKey" 是因为 新增后 显隐列 dialog 不更新  需要强制让他+1去刷新子组件*/
 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" @closeToolbarColumns="saveColumns" :columns="columns" :key="componentKey"></right-toolbar>



  created() {
  // 需要加入
    this.getColumnsList();
    this.getList();
  },
  
  methods: {
    /* 保存所选默认列 */
    /* 保存所选默认列 */
    saveColumns(){
      let columnList ={};
      columnList.tableName = this.$route.path;
      columnList.columns = JSON.stringify(this.columns);

      sessionStorage.setItem(this.tableName,columnList);
      this.$message({
          message: '成功保存配置',
          type: 'success'
      });
    },
	getColumnsList(){
      let columnList ={};
      columnList.tableName = this.$route.path;
      console.log(sessionStorage.getItem(this.tableName));
      if (sessionStorage.getItem(this.tableName) != null){
        this.columns = JSON.parse(sessionStorage.getItem(this.tableName));
      }
      //  强制刷新子组件
          this.componentKey+=1;
    },

rightToolbar/index.vue

//  注意  这段只新增了 @close='closeDialog'
  <el-dialog :title="title" :visible.sync="open" append-to-body @close='closeDialog'>
      <el-transfer
        :titles="['显示', '隐藏']"
        v-model="value"
        :data="columns"
        @change="dataChange"
      ></el-transfer>
    </el-dialog>

// 调用父组件 closeToolbarColumns   （@closeToolbarColumns="saveColums"）
  methods: {
    // 关闭事件
    closeDialog(){
      this.$emit("closeToolbarColumns");
    },

---