fastadmin JS点击重新渲染表格columns的searchList
时间: 2024-09-20 11:13:24 浏览: 44
FastAdmin是一个基于ThinkPHP5框架的快速开发后台管理系统模板,它提供了一套预置的前端界面和功能模块。当在JS中需要对表格的`searchList`进行动态更新并重新渲染时,通常会在处理用户搜索请求的函数里完成。
假设你有一个表格组件,比如VUE的Element UI的el-table,你可以这样做:
```javascript
// 假设tableId是你的表格元素ID,data是原始数据源
let table = document.getElementById('tableId');
// 定义searchList作为筛选条件
let searchList = [];
function handleSearch(e) {
// 获取用户的搜索关键字或其他筛选条件
let keyword = e.target.value;
// 更新搜索列表
searchList.push(keyword);
// 清空当前表格外的数据,准备重新加载
table.clearSelection();
table.data = []; // 或者table.setData([]);
// 使用新的搜索条件从服务器获取数据
fetchNewDataFromServer(searchList).then(newData => {
// 将新数据赋值给表格
table.data = newData;
// 如果有分页,记得重新设置当前页
if (table.pagination) {
table.setCurrentPage(1); // 这取决于你的分页插件配置
}
});
}
// 监听输入框的改变事件,触发搜索操作
document.getElementById('searchInput').addEventListener('input', handleSearch);
```
在这个例子中,当你在搜索框中输入内容,`handleSearch`函数会被触发,更新搜索列表,并向服务器请求最新的数据,然后重新渲染表格。
阅读全文