您现在的位置是：网站首页> 编程资料编程资料

使用Element实现表格表头添加搜索图标和功能_vue.js_

2023-05-24 314人已围观

简介使用Element实现表格表头添加搜索图标和功能_vue.js_

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

主要实现 table的slot=‘header’

headerData是表头的循环数组
tableData是表格内容的数组
自定义表头的内容
注意：在使用的时候，只会显示表头的自定义内容，表格的内容还需要使用scope.row会显示出该列的所有内容
如果不使用slot-scope='scope'会出现不能输入的问题
Vue 2.6+版本的插槽语法使用#header替换Vue的作用域插槽

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', }, ], } }, }