前端Bug实录：为什么表格筛选条件在刷新时神秘消失？

const hqTable = new hqTableClass(
  new hqTableApi("/pcs/order"),
  {
    filter: {
      search: [
        {
          field: "type",
          operator: "LIKE",
          val: "6",  // 明确设置只显示充电订单
        },
      ],
    },
    // ... 其他配置
  }
);

getIndex = () => {
  const params: any = {}
  if (this.table.filter) {
    this.table.filter.search &&
      this.table.filter.search.map((item) => {
        params[item.field] = item.val  // 简单映射，没有保护机制
      })
  }
  // ... 发送请求
}

this.table.filter.search = [...]  // 没有保护机制

'refresh': () => {
  this.table.data = []  // 清空数据
  this.getIndex()       // 重新获取，但可能用错误的筛选条件
}

// 保护性重写，确保筛选条件始终有效
const originalGetIndex = hqTable.getIndex;
hqTable.getIndex = function() {
  // 确保type=6筛选条件存在
  if (!this.table.filter.search.some(item => item.field === 'type')) {
    this.table.filter.search.push({
      field: "type", operator: "LIKE", val: "6"
    });
  }
  return originalGetIndex.call(this);
};

// 响应式保护，防止筛选条件被意外清除
watch(() => hqTable.table.filter.search, (newSearch) => {
  if (!newSearch?.some(item => item.field === 'type')) {
    hqTable.table.filter.search.push({
      field: "type", operator: "LIKE", val: "6"
    });
  }
}, { deep: true });

// 不好的写法：假设筛选条件永远存在
params[item.field] = item.val

// 好的写法：添加保护性检查
if (item && item.field && item.val !== undefined) {
  params[item.field] = item.val
}

validateTableState() {
  if (!this.table.filter.search) {
    this.table.filter.search = []
  }
  // 确保必要的筛选条件存在
}

safeRefresh() {
  this.validateTableState()
  this.onTableHeaderAction('refresh', {})
}