vue3 + antdテーブルコンポーネントのカスタムヘッダーデータ、変更されたデータはvuex、sessionStorage（キャッシュバージョン）に保存されます

1.最初に、vue3 + antdテーブルコンポーネントの並べ替えフィルター、フィルターソーター、カスタムヘッダー表示、vue3登録グローバルコンポーネント（共通コンポーネント）を確認します。これも、変更後にユーザーをキャッシュし、ページの更新で状態（バックグラウンド）が保持されます。はまだ開始されていないため、フロントエンドは最初にデータを書き込み、次にインターフェイスを呼び出すか、サーバーを保存してから後で更新します

2.分析、多くのページとテーブルがあるため、各テーブルには配列があります。したがって、vuexでオブジェクトを定義し、対応する各テーブル配列を各キーに格納します。形式は次のとおりです。

tableHeadObj = {
	order: [...],
	system: [....],
	device: [....]
}

3.ストアファイルのindex.js：

import { createStore } from "vuex";
export default createStore({
  state: {
    tableHeadObj: sessionStorage.tableHeadObj? JSON.parse(sessionStorage.tableHeadObj): {}
  },
  mutations: {
    setTableHeadObj(state, obj) {
      state.tableHeadObj = obj;
      sessionStorage.tableHeadObj = JSON.stringify(state.tableHeadObj); // sessionStorage只能存储字符串，所以转成字符串对象
    }
  }
})

4.親コンポーネントで、sessionStorageにtableHeadObjと現在のテーブルのキーが含まれているかどうかを確認します

onMounted(async () => {
  // 判断缓存中是否已存在表头信息
  if(sessionStorage.tableHeadObj && JSON.parse(sessionStorage.tableHeadObj).orgMsg) { 
    // 已修改过
    state.columns = JSON.parse(sessionStorage.tableHeadObj).orgMsg;
  } else { 
    // 缓存无数据 -- 默认后两项不显示
    state.columns = state.columnsAll.slice(0, state.columnsAll.length -2)
  }
  await initSel();
  getTableData(getQuery(formData));
  timer.value = setInterval(() => { // 定时触发
    getTableData(getQuery(formData));
  }, 300000);
});

5.それが最初の変更またはそれ以降の変更である場合、変更が成功した場合、変更はvuexメソッドを呼び出してsessionStorageの値を更新する必要があります。

const handleOk = async() => {
  let arr = await tableHeadRef.value.getValues();
  if(arr.length) {
    tableHeadPop.value = false;
    let newArr = [];
    state.columnsAll.map(i => { // 为了字段显示顺序不被打乱
      arr.map(it => {
        if(i.title == it.title) {
          newArr.push(it) 
        }
      })
    })
    state.columns = newArr;
    store.commit('setTableHeadObj', { // 添加或更新vuex的值
      'orgMsg': state.columns
    })
    getTableFilters(); // 筛选列数据获取
    pagination.current = 1;
    getTableData(getQuery(formData));
  }
};

6.その他の変更部分、列のデータの初期化、デフォルト値、つまりすべてのデータの表示される項目の数を変更します

const state = reactive({
  columns: [], // 默认展示
  columnsAll: [
    {
      title: "测站编码",
      dataIndex: "stationCode",
      ellipsis: true,
    },
    {
      title: "测站名称",
      ellipsis: true,
      dataIndex: "stationName",
    },
    {
      title: "设备编码",
      ellipsis: true,
      dataIndex: "devId",
    },
    {
      title: "上报时间",
      dataIndex: "pt",
      ellipsis: true,
      slots: {
        customRender: "pt",
      },
      sorter: (a, b) => {
        return moment(a.pt).valueOf() - moment(b.pt).valueOf()
      },
    },
    {
      title: "原始报文",
      dataIndex: "message",
      width: 340,
      slots: {
        customRender: "message",
      },
    },
    {
      title: "上报类型",
      dataIndex: "type",
      ellipsis: true,
      slots: {
        customRender: "type",
      },
      // filters: [], // 需要筛选时添加
      filterMultiple: false, // 不可多选
      // onFilter: (value, record) => record.type.includes(value)
    }
  ],
  setColumns: [], // 用于传给子组件
});
// 初始化赋值
state.columns = state.columnsAll.slice(0, state.columnsAll.length -2)

7.したがって、単一列のデータを割り当ててフィルタリングする場合は、すべてのヘッダーデータの配列を使用する必要があります。

// 获取上报类型的filters
const getTableFilters = () => {
  let filters = [];
  if (state.reportTypeList && state.reportTypeList.length) {
    state.reportTypeList.forEach((i) => {
      state.reportLabel[i.dictCode] = i.dictLabel;
      let obj = {
        text: "",
        value: ""
      }
      state.columnsAll.forEach((ins, index) => {
        if(ins.dataIndex == "type") { // 指定是上报类型
          obj.text = i.dictLabel;
          obj.value = i.dictCode;
          filters.push(obj);
          state.columnsAll[index].filters = filters;
          // state.columns[index].filters.push(obj);
        }
      })
    });
  }
}

8.すべての動的データはフォローアップで作成され、その後変更される場合があります。ははははは

Asi、流行は私の優しさの多くを台無しにしました。