vue3 + antd Table component custom header data, the modified data is stored in vuex, sessionStorage (cached version)

1. First review the vue3 + antd Table component sorting filters, filter sorter, custom header display and vue3 registration global components (common components) , again on the basis, cache the user after modification, and the page refresh retains the state – the background has not started yet , so the front end writes the data first, then calls the interface, or saves the server, and then updates it later

2. Analysis, because there are many pages and tables, each table is an array, so define an object in vuex, and store each corresponding table array through each key, the format is as follows:

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

3. index.js in the store file:

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. In the parent component, determine whether the sessionStorage contains tableHeadObj and the key of the current table

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. If it is the first modification or later modification, the modification needs to call the vuex method to update the value in sessionStorage if the modification is successful.

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. Other modification parts, initialize the data of columns, and modify the default value, that is, how many items of all data are displayed

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. Therefore, when assigning and filtering single-column data, an array of all header data must be used.

// 获取上报类型的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. All dynamic data may be made in the follow-up, and then modify it. hahahahaha

Asi, the epidemic has ruined a lot of my tenderness.