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); } }) }); } } 7、开发过程发现，每次都是替换掉了原对象的数据，比如你在A组件设置了，去到B组件设置后，数据只剩下B组件设置的属性和值了，所以需要改进，替换 -> 新增 // 弹窗确定按钮 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; let obj = Object.assign({}, store.state.tableHeadObj); // 获取原对象 obj.deviceStatus = state.columns; // 新增属性和值 store.commit("setTableHeadObj", obj); // 更新对象 getTableFilters(); // 筛选列数据获取 pagination.current = 1; getTableData(getQuery(formData)); } }; 8、后续可能做成全部动态的数据，到时再修改吧。哈哈哈哈哈 阿西吧，疫情毁了我好多温柔。