这篇文章主要介绍了使用Element实现表格表头添加搜索图标和功能，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Element 表格表头添加搜索图标和功能
主要实现 table的slot=‘header’
headerData是表头的循环数组tableData是表格内容的数组自定义表头的内容- 注意：在使用
的时候，只会显示表头的自定义内容，表格的内容还需要使用{{ scope.row }}scope.row会显示出该列的所有内容 - 如果
不使用slot-scope='scope'会出现不能输入的问题 Vue 2.6+版本的插槽语法使用#header替换Vue的作用域插槽
{{ scope.row[headerItem.prop] }} {{ headerItem.label }}{{ scope.row[headerItem.prop] }} {{ headerItem.label }}{{ scope.row[headerItem.prop] }} {{ headerItem.label }}
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', }, ], } }, } element ui表格el-tabel给表头加icon图标
设置 Scoped slot 来自定义表头
类型
以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。
以上就是使用Element实现表格表头添加搜索图标和功能的详细内容，更多请关注0133技术站其它相关文章！
