elementui表格自定义表头的两种方法-阿里云开发者社区

elementui表格自定义表头的两种方法

2023-09-04 812

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

Serverless 应用引擎 SAE，800核*时 1600GiB*时

可观测链路 OpenTelemetry 版，每月50GB免费额度

可观测监控 Prometheus 版，每月50GB免费额度

简介： 这篇文章主要是总结了elementui-table表格怎么自定义表头，两种方式需求不一样，大家还有啥好的方法或者遇到的bug评论区留言大家一起解决。

表格自定义表头的方式

多选框表头换文字

请查看上篇博客

文字换按钮 render-header

参数	说明	类型	可选值	默认值
render-header	列标题 Label 区域渲染使用的 Function	Function(h, { column, $index })	—	—

全部代码（可复制）

<template>
    <div class="Box">
        <div>
            <!-- :header-cell-class-name="cellClass" -->
            <el-table ref="multipleTable" :data="tableData" :header-cell-class-name="cellClass" tooltip-effect="dark"
                style="width: 500px" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="日期" width="120">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column label="姓名" prop="name" :render-header="(h, obj) => renderHeader(h, obj, '你的参数')"
                    width="120">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改姓名</el-button>
                </el-table-column>
                <el-table-column prop="address" label="地址" show-overflow-tooltip>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
export default {
    name: "list",
    data () {
        return {
            tableData: [{
                date: '2023-09-03',
                name: 'bug天选之子',
                address: 'https://blog.csdn.net/weixin_70245286?spm=1000.2115.3001.5343'
            }, {
                date: '2023-09-03',
                name: 'bug天选之子',
                address: 'https://blog.csdn.net/weixin_70245286?spm=1000.2115.3001.5343'
            }, {
                date: '2023-09-03',
                name: 'bug天选之子',
                address: 'https://blog.csdn.net/weixin_70245286?spm=1000.2115.3001.5343'
            }, {
                date: '2023-09-03',
                name: 'bug天选之子',
                address: 'https://blog.csdn.net/weixin_70245286?spm=1000.2115.3001.5343'
            },],
            multipleSelection: [],
        }
    },
    methods: {
        // 选中的项
        handleSelectionChange (val) {
            this.multipleSelection = val;
            console.log("选中的项:", this.multipleSelection);
        },
        // 修改多选框表头
        cellClass (row) {
            // 判断第几列
            if (row.columnIndex === 0) {
                return "disableSelection";
            }
        },
        // 自定义表头
        renderHeader (h, { column, $index }, type) {
            // console.log('列表加载就会触发', h, { column, $index }, type)
            console.log(column.label);
            let that = this
            // 逻辑是 h() 括号里包裹标签 第一个参数是标签名 第二个是属性  第三个是标签内容  如果是多个标签需要包裹数组
            return h(
                'div', [
                // 列名称
                // h('span', column.label),
                // 按钮
                h('el-button', {
                    props: {
                        type: 'primary',
                        size: 'small',
                    },
                    style: 'color:#fff;',
                    // class: "{ active: showSelectMore }",
                    // class: 'className',
                    on: {
                        // 各种事件触发
                        click: function () {
                            that.clickButton(type)
                        }
                    }
                }, '姓名')
            ],
            )
        },
        // 按钮点击事件
        clickButton (type) {
            console.log('我点击了' + type + '的列')
            // this.downLoad()
        },
        handleEdit (row) {
        }
    },
    mounted () {
    }
}
</script>
<style scoped>
.Box {
    display: flex;
    justify-content: center;
    align-items: center;
}
::v-deep.el-table .disableSelection .cell .el-checkbox__inner {
    display: none;
    position: relative;
}
::v-deep.el-table .disableSelection .cell::before {
    content: "选项";
    position: absolute;
    right: 15px;
}
::v-deep.el-table {
    border: 1px solid blue;
}
</style>

效果图

关键代码总结

// 在要修改的那一列加render-header属性
<el-table-column label="姓名" prop="name" :render-header="(h, obj) => renderHeader(h, obj, '你的参数')"
</el-table-column>
// methods中写方法
renderHeader (h, { column, $index }, type) {
            // console.log('列表加载就会触发', h, { column, $index }, type)
            console.log(column.label);
            let that = this
            // 逻辑是 h() 括号里包裹标签 第一个参数是标签名 第二个是属性  第三个是标签内容  如果是多个标签需要包裹数组
            return h(
                'div', [
                // 列名称
                // h('span', column.label),
                // 按钮
                h('el-button', {
                    props: {
                        type: 'primary',
                        size: 'small',
                    },
                    style: 'color:#fff;',
                    // class: "{ active: showSelectMore }",
                    // class: 'className',
                    on: {
                        // 各种事件触发
                        click: function () {
                            that.clickButton(type)
                        }
                    }
                }, '姓名')
            ],
            )
        },