フロントエンド要素テーブルの表示列と非表示列をデータベースに保存します。

テーブルには多くのオプションがあり、表示したい列のみを表示し、不要な列を非表示にします。この設定では、次回このページに入るときに列も表示する必要があり、同じアカウントを使用する必要があります。 Zoyi フレームワークを使用しているため、コンポーネントは直接参照されるため、異なるコンピューターでも同じです

これは Zoyi に付属するサブコンポーネントで、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>

まず、初期ページデータに列を定義します。

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

最初は私が書いた内容を直接表示しますが、バックグラウンドで必要なのは、取得用と変更用の 2 つのインターフェイスです。

ページをロードするときに、最初のインターフェースを呼び出します

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

保存、保存について話しましょう。つまり、表示される列と非表示の列を毎回変更した後、

上記のコードをパブリックコンポーネントに配置します。

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

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

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

また、ストレージの非表示の列を書き込むのは初めてですが、このとき、列を追加したい場合はバックグラウンドでデータを手動でクリアさせなければならないという欠点があります。

もっと良い方法がある場合、または最適化できる問題がある場合は、一緒に議論することもできます~