咨询：如何实现DataTable在Modal提交、关闭后保留过滤数据

• 已实现具备数据过滤能力的DataTable组件，当前存在交互异常：点击入口弹出Modal弹窗后，无论直接关闭弹窗还是在弹窗内完成提交操作，主页面的DataTable都会自动刷新，重置为无过滤的默认数据集，无法保留之前设置的筛选结果
• 弹窗触发入口的交互效果与常规后台系统的侧边操作按钮一致，点击后弹出独立的功能配置弹窗
• 核心诉求：无论是触发页面刷新、还是执行Modal内的关闭/提交操作，DataTable都需要持续保留当前已设置的过滤规则与对应展示数据，不能重置回默认状态

这类异常基本都和组件状态未隔离、事件链路错误绑定有关，常见触发场景包括：

• Modal的打开/关闭事件被误绑定了主表格的全量数据拉取逻辑
• 弹窗操作触发了全局状态重置，比如提交完成后手动清空了全局存储的过滤参数，或是事件冒泡触发了同页面的路由跳转/刷新
• Modal组件直接挂载在DataTable的父组件节点下，关闭时触发父组件重渲染，连带把DataTable局部维护的过滤参数重置为初始默认值

• 第一步：做状态隔离，把DataTable的过滤参数从组件自身的局部state，提升到独立的全局状态层（比如Pinia/Redux/React Context、Vue的provide/inject）存储，避免重渲染时局部状态被重置
• 第二步：梳理Modal的事件链路，给所有弹窗的触发、关闭、提交方法加事件阻止冒泡，去掉弹窗回调里误加的全量刷新逻辑：

  // 弹窗触发函数示例
  const openFunctionModal = (e) => {
    e.stopPropagation() // 阻止事件冒泡触发表格的全局刷新监听
    setModalVisible(true)
  }
  // 弹窗关闭/提交完成回调
  const handleModalActionComplete = () => {
    setModalVisible(false)
    // 删除此前误添加的全量拉取默认数据的调用，如 getTableDefaultData()
  }
  

• 第三步：把DataTable调整为受控模式，过滤参数作为独立的受控值绑定，初始化时优先读取已持久化的留存值，不要每次挂载都用默认参数初始化：

  // 错误写法：组件每次挂载都重置为默认过滤值
  const [tableFilter, setTableFilter] = useState({ type: 'all', searchKey: '' })
  // 正确写法：初始化时读取全局存储的已保存过滤参数
  const [tableFilter, setTableFilter] = useState(() => globalStore.savedFilter)
  

• 第四步：如果需要实现页面刷新后仍保留过滤结果，可以将过滤参数同步存入sessionStorage，DataTable初始化时优先从缓存读取参数值，拉取对应过滤后的数据

• 不要在全局路由监听逻辑里，只要检测到页面状态变化（包括同页面的弹窗开关状态变化）就自动触发DataTable的全量刷新
• 弹窗提交完成后，如果业务不需要同步主表格数据，完全可以不触发表格刷新；如果确实需要更新，要带着当前留存的过滤参数重新拉取数据，不要重置过滤条件
• 如果使用了带卸载重挂载逻辑的封装表格组件，要给表格加上缓存机制，避免弹窗操作触发表格组件销毁重建，连带丢失内部筛选状态

内容的提问来源于stack exchange，提问作者Newbee