前端表格自己做搜素框

要在前端表格中实现自定义搜索框功能，可以通过多种方式完成。以下是基于常见框架和技术栈的解决方案： ### 使用 iView (Ant Design Vue) 实现表头中的模糊搜索 如果使用的是 `iView` 或类似的 UI 库，可以在表格列 (`columns`) 中通过 `renderHeader` 自定义渲染表头内容。以下是一个完整的示例代码片段[^2]： ```javascript const columns = [ { title: '名称', key: 'name', renderHeader: (h, params) => { return h('div', [ params.column.title, h('Input', { props: { clearable: true, size: 'small' }, style: { marginLeft: '10px', width: '100px' }, on: { 'on-change': (event) => { this.keyword = event.target.value; this.filterTableData(); } } }) ]); } }, { title: '年龄', key: 'age' }, { title: '地址', key: 'address' } ]; methods: { filterTableData() { // 基于 keyword 进行过滤操作 this.filteredData = this.originData.filter(item => item.name.includes(this.keyword) ); } } ``` 此代码实现了在表头添加输入框的功能，并监听输入框的变化来更新表格数据。 --- ### 使用原生 HTML/CSS/JavaScript 实现简单搜索框 如果不依赖任何第三方库，也可以通过纯 JavaScript 来实现简单的搜索功能。下面是一段基础代码示例[^3]： #### HTML 部分 ```html <input type="text" id="searchBox" placeholder="请输入关键词"> <table> <thead> <tr><th>姓名</th><th>年龄</th></tr> </thead> <tbody id="dataTable"> <tr><td>张三</td><td>25</td></tr> <tr><td>李四</td><td>30</td></tr> <tr><td>王五</td><td>28</td></tr> </tbody> </table> ``` #### JavaScript 部分 ```javascript document.querySelector('#searchBox').addEventListener('input', function () { const searchValue = this.value.toLowerCase(); const rows = document.querySelectorAll('#dataTable tr'); rows.forEach(row => { const nameCell = row.cells[0].textContent.toLowerCase(); // 获取第一列的内容 if (nameCell.includes(searchValue)) { row.style.display = ''; // 显示符合条件的行 } else { row.style.display = 'none'; // 隐藏不符合条件的行 } }); }); ``` 这段代码展示了如何通过监听输入框的 `input` 事件实时过滤表格中的数据。 --- ### 使用 Vue.js 和 Element Plus 实现复杂场景下的搜索功能 对于更复杂的业务需求，比如需要支持多个字段联合查询或者动态加载数据的情况，可以借助 Vue.js 结合 Element Plus 组件库来构建高级搜索功能[^4]。 #### 数据模型初始化 ```javascript <script setup> import { ref } from 'vue'; // 初始化数据源 const tableData = ref([ { name: '张三', age: 25, address: '北京' }, { name: '李四', age: 30, address: '上海' }, { name: '王五', age: 28, address: '广州' } ]); // 搜索关键字 const keyword = ref(''); // 筛选后的数据 const filteredData = computed(() => { return tableData.value.filter(item => Object.values(item).some(value => String(value).toLowerCase().includes(keyword.value.toLowerCase()) ) ); }); </script> ``` #### 页面模板部分 ```html <template> <el-input v-model="keyword" placeholder="请输入搜索词"></el-input> <el-table :data="filteredData" border stripe> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> ``` 以上代码利用了 Vue 的响应式特性以及计算属性自动处理数据筛选逻辑。 --- ### 总结 无论是采用轻量级方案还是依托现代框架开发，核心思路都是围绕 **绑定输入框值到变量 -> 动态过滤数据 -> 更新视图** 展开。具体技术选型需根据项目实际环境决定。