这个函数中
function getPageData() {
getEmployeePageParams.pageNum = tablePage.pageNum
getEmployeePageParams.pageSize = tablePage.pageSize
$http.get('http://127.0.0.1:8080/api/employee/page', {
params: getEmployeePageParams
})
.then((res: any) => {
// tableData = reactive<any[]>([])
let data = res.data.data
tableData.splice(0, data.records.length, ...data.records)
tablePage.pageSize = data.size
tablePage.total = data.total
const totalPages = Math.ceil(tablePage.total / tablePage.pageSize);
tablePage.pageSizes = Array.from({ length: totalPages }, (_, index) => (index + 1) * 10);
tableData.forEach(item => {
item.sex == 0 ? item.sex_text = "女" : item.sex_text = "男"
})
console.log(tableData);
})
.catch((error: any) => {
console.error(error);
});
}
有一个 tableData = reactive<any[]>([]),在函数外部我声明了
const tablePage = reactive({
pageNum: 1, // 第几页
pageSize: 10, // 每页多少条
total: 0,// 总记录数
pageSizes: [10, 20, 30]
})
最后导致响应式触发失败。
原因是在函数内部,又使用 `tableData = reactive<any[]>([])重新定义了 tableData。
这里重新 reactive 了一个新的响应式数据,与外部声明的 tableData 失去了联系。
因此内部的修改无法触发外部 tableData 的更新。
解决方式是:
-
不要在函数内部重新定义 tableData
-
直接使用外部传入的 tableData 变量: