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

目录

• Element 表格表头添加搜索图标和功能
• 主要实现 table的slot=‘header’
• element ui表格el-tabel给表头加icon图标
• 设置 Scoped slot 来自定义表头

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

element ui表格el-tabel给表头加icon图标

设置 Scoped slot 来自定义表头

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。