Guarde las columnas visibles y ocultas de la tabla de elementos frontales en la base de datos

Hay muchas opciones en la tabla, solo muestre las columnas que desea mostrar y oculte las innecesarias, y esta configuración, la próxima vez que ingrese a esta página, también debe mostrar las columnas ahora, incluso si la misma cuenta está en diferentes computadoras, porque usar It es el marco Zoyi, por lo que el componente se referencia directamente

Aquí está el subcomponente que viene con Zoyi, solo se agrega la línea 181.

<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>

Primero, defina una columna en los datos de la página inicial

      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" },
      ],

Al principio, muestra directamente lo que escribí. Lo que debe estar en segundo plano son dos interfaces, una para buscar y otra para modificar.

Al cargar la página, llame a la primera interfaz

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

Hablemos de guardar, guardar, es decir, después de modificar las columnas visibles y ocultas cada vez,

Ponga el código anterior en el componente público,

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

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

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

También es la primera vez que escribe la columna oculta de almacenamiento.En este momento, existe el defecto de que si desea agregar una columna, debe permitir que el fondo borre manualmente los datos.

Si tiene un método mejor o tengo algún problema que pueda optimizarse, también podemos discutirlo juntos~