[JavaScript知识库]vue3 + antd Table组件自定义表头数据，修改后数据存vuex、sessionStorage（缓存版）

1、先回顾 vue3 + antd Table组件排序filters、筛选sorter、自定义表头展示 和 vue3 注册全局组件（公用组件），再次基础上，把用户修改过后缓存起来，页面刷新保留状态 – 后台还没开始，所以还是前端先写数据，后续是否调用接口，或者存服务器，后续再更新

2、分析，因为页面多，表格也多，每个表格一个数组，所以在vuex中定义一个对象，通过每一个key存储每一个对应的表格数组，格式如：

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

3、store文件中的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 并且 当前表格的key

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、其它修改部分，初始化 columns 的数据，可修改默认值，即显示全部数据的多少项

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、后续可能做成全部动态的数据，到时再修改吧。哈哈哈哈哈

阿西吧，疫情毁了我好多温柔。