element el-table组件自定义表头,给表头添加点击事件

Eal7

已于 2022-02-22 09:54:15 修改

阅读量2.7k

点赞数

文章标签： vue.js html elementui

于 2022-02-22 09:52:25 首次发布

本文链接：https://blog.youkuaiyun.com/slow097/article/details/123061624

版权

本文介绍了如何在Vue.js中利用Element UI的el-table组件进行表头自定义，并添加点击事件。通过使用`slot="header"`和`render-header`方法，可以实现对表格头部的个性化操作，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、slot="header"

1212

<el-table-column prop="handle">
    <template slot="header">
        <span @click="seeDetail">查看详情</span>
        <span class="explain" @click="seeHandle">只查看待处理</span>
    </template>
    <template slot-scope="scope">
        <span>{{ scope.row.operateType === '1' ? '无申诉查看详情' : '申诉待处理' }}</span>
    </template>
</el-table-column>

2、render-header方法

1212

<el-table-column
    prop="handle"
    :render-header="renderHeader"
    align="center">
    <template slot-scope="scope">
        <span :class="scope.row.handle === '1' ? 'noAppeal' : 'appeal'">{{ scope.row.handle === '1' ? '无申诉查看详情' : '申诉待处理' }}</span>
    </template>
</el-table-column>

renderHeader (h, column) {
    return h('div', [
            h('span', {
                style: `cursor: pointer;`,
                on: {
                    click: this.seeDetail
                }
            }, '查看详情'),
            h('span', {
                style: `background-color: #666;margin-left: 10px;padding: 6px 10px;cursor: pointer;`,
                on: {
                    click: this.seeHandle
                }
            }, '只查看待处理')
        ]
    )
},
seeDetail() {
    console.log('查看详情111')
},
seeHandle() {
    console.log('查看待处理1111')
},