Save the visible and hidden columns of the front-end element table to the database

There are many options in the table, only display the columns you want to display, and hide the unnecessary ones, and this setting, the next time you enter this page, you should also display the columns now, even if the same account is on different computers, because using It is the Zoyi framework, so the component is directly referenced

Here is the subcomponent that comes with Zoyi, only line 181 is added.

<template>
  <div class="top-right-btn">
    <el-row>
      <el-popover
        class="item"
        placement="bottom"
        width="170"
        trigger="hover"
        style="padding-right: 10px"
        v-if="energyTip"
      >
        <table width="140" align="center">
          <tr>
            <td><div class="ceiling" style="background-color: #f00"></div></td>
            <td>数据异常</td>
          </tr>
          <tr>
            <td><div></div></td>
            <td>无数据</td>
          </tr>
        </table>
        <el-button
          icon="el-icon-warning-outline"
          size="mini"
          slot="reference"
          circle
        ></el-button>
      </el-popover>

      <el-popover
        class="item"
        placement="bottom"
        width="170"
        trigger="hover"
        style="padding-right: 10px"
        v-if="tip"
      >
        <table width="140" align="center">
          <tr>
            <td>
              <div class="ceiling" style="background-color: #fd7f40"></div>
            </td>
            <td>上限</td>
          </tr>
          <tr>
            <td>
              <div class="ceiling" style="background-color: #d83706"></div>
            </td>
            <td>上上限</td>
          </tr>
          <tr>
            <td>
              <div class="ceiling" style="background-color: #fad46e"></div>
            </td>
            <td>下限</td>
          </tr>
          <tr>
            <td>
              <div class="ceiling" style="background-color: #b98804"></div>
            </td>
            <td>下下限</td>
          </tr>
          <tr>
            <td>
              <div class="ceiling" style="background-color: #bfbfbf"></div>
            </td>
            <td>超时</td>
          </tr>
          <tr>
            <td><div></div></td>
            <td>上数为空</td>
          </tr>
          <tr>
            <td>
              <div>
                <hr size="5px" width="20px" color="#bfbfbf" align="left" />
              </div>
            </td>
            <td>没有上数</td>
          </tr>
          <tr>
            <td><div>/</div></td>
            <td>无点位</td>
          </tr>
        </table>
        <el-button
          icon="el-icon-warning-outline"
          size="mini"
          slot="reference"
          circle
        ></el-button>
      </el-popover>

      <!-- <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
      </el-tooltip> -->
      <!-- <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
      </el-tooltip> -->
      <el-tooltip
        class="item"
        effect="dark"
        content="显隐列"
        placement="top"
        v-if="columns"
      >
        <el-button
          size="mini"
          circle
          icon="el-icon-menu"
          @click="showColumn()"
        />
      </el-tooltip>
    </el-row>
    <el-dialog :title="title" :visible.sync="open" append-to-body>
      <div class="edit_dev">
        <el-transfer
          :titles="['显示', '隐藏']"
          v-model="value"
          :data="columns"
          @change="dataChange"
        ></el-transfer>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "RightToolbar",
  data() {
    return {
      // 显隐数据
      value: [],
      // 弹出层标题
      title: "显示/隐藏",
      // 是否显示弹出层
      open: false,
    };
  },
  props: {
    showSearch: {
      type: Boolean,
      default: true,
    },
    energyTip: {
      type: Boolean,
      default: false,
    },
    tip: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
    },
  },
  created() {
    // 显隐列初始默认隐藏列
    for (let item in this.columns) {
      if (this.columns[item].visible === false) {
        this.value.push(parseInt(item));
      }
    }
  },
  methods: {
    // 搜索
    toggleSearch() {
      this.$emit("update:showSearch", !this.showSearch);
    },
    // 刷新
    refresh() {
      this.$emit("queryTable");
    },
    // 右侧列表元素变化
    dataChange(data) {
      for (var item in this.columns) {
        const key = this.columns[item].key;
        this.columns[item].visible = !data.includes(key);
      }

      this.$emit("changeColumn", this.columns);//因为要存到后台所以写了这个事件，修改完之后拿到改后的数组
    },
    // 打开显隐列dialog
    showColumn() {
      for (let item in this.columns) {
        if (this.columns[item].visible === false) {
          this.value.push(parseInt(item));
        }
      }
      this.open = true;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-transfer__button {
  border-radius: 50%;
  padding: 12px;
  display: block;
  margin-left: 0px;
}
::v-deep .el-transfer__button:first-child {
  margin-bottom: 10px;
}
</style>

<style  scoped>
/deep/ .el-transfer-panel {
  width: 280px !important;
}
.ceiling {
  width: 20px;
  height: 20px;
}
</style>

First, define a column in the initial page data

      columns: [
        { key: 0, label: `你`, visible: true, width: "50" },
        { key: 1, label: `想`, visible: true, width: "50" },
        { key: 2, label: `展示`, visible: true, width: "50" },
        { key: 3, label: `的`, visible: true, width: "50" },
        { key: 4, label: `标题名`, visible: true, width: "50" },
        { key: 5, label: `也就是穿梭狂中的`, visible: true, width: "50" },
        { key: 6, label: `内容`, visible: true, width: "50" },
      ],

At the beginning, it directly displays what I wrote. What needs to be in the background are two interfaces, one for fetching and one for modifying.

When loading the page, call the first interface

    // 获取原来的，显隐列
    async getColum() {
      const res = await getByUserId({
//这个接口传参是你和后台商量的~
    //我就不展示了   
      });
      let asd = JSON.parse([res.data[0].columnText]);
//因为咱们是将整个数组直接放到数据库，所以需要处理一下格式
      this.columns = asd;  //这个就是每次打开页面，就是之前你之前修改过的显隐列，存到数据库里的
    },

Let's talk about saving, saving, that is, after modifying the visible and hidden columns every time,

Put the above code into the public component,

  <right-toolbar
        :columns="columns"
        @changeColumn="changeColumn"
      ></right-toolbar>
这个是引用，changeColumn 是我在上面181行添加的子组件修改父组件的时间

    
changeColumn(val) {
      let data = JSON.stringify(val);//需要转换一下格式，
      editColumnSetting({
        依然是调取接口传给后台
      }).then(() => {});

      this.$refs.index.changeColumn();//重新加载一下页面
    },

It is also the first time to write the hidden column of storage. At this time, there is a defect that if you want to add a column, you have to let the background manually clear the data.

If you have a better method or I have any problems that can be optimized, we can also discuss together~