Element 中表格表头添加搜索图标和功能使用

2024-07-07 08:40| 来源: 网络整理| 查看: 265

问题：我们使用element-ui的表格开发中，会遇到在表头添加搜索的功能。

解决办法：我们可以通过设置 Scoped slot 来自定义表头。在这里插入图片描述 1，headerData是表头的循环数组

2，tableData是表格内容的数组

3，自定义表头的内容

4，注意：在使用的时候，只会显示表头的自定义内容，表格的内容还需要使用 {{ scope.row }} scope.row会显示出该列的所有内容 ,5，如果不使用slot-scope='scope’会出现不能输入的问题

6，Vue 2.6+版本的插槽语法使用#header替换Vue的作用域插槽

{{ headerItem.label }} {{ scope.row[headerItem.prop] }} {{ headerItem.label }} {{ scope.row[headerItem.prop] }} {{ headerItem.label }} {{ scope.row[headerItem.prop] }}

7，js代码

export default { data() { return { headerData: [ { label: '日期', prop: 'date', dateSelect: true, }, { label: '名称', prop: 'name', inputSelect: true, }, { label: '类型', prop: 'type', select: true, selectValue: null, selectOptions: [ { value: 'Vue', label: 'Vue', }, { value: 'React', label: 'React', }, { value: 'Angular', label: 'Angular', }, ], }, ], tableData: [ { date: '2016-05-02', name: '王小虎', type: 'Vue', }, { date: '2016-05-04', name: '王小虎', type: 'React', }, { date: '2016-05-01', name: '王小虎', type: 'Angular', }, ], } }, }

【本文地址】

公司简介

联系我们