el-table 实现自定义表头 el-select

最新推荐文章于 2025-05-22 14:06:04 发布

原创

最新推荐文章于 2025-05-22 14:06:04 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

本文介绍如何在Vue项目中利用ElementUi的el-table组件，实现表头带有下拉选择框（el-select）的功能。通过自定义渲染表头，提供了一种增强表格交互性的解决方案。

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

本文讲述使用ElementUi的表格时，表头实现下拉框的功能：
实现的效果图如下所示：在这里插入图片描述

表格的定义

<el-table :data="tableLogData" style="width: 100%" header-cell-class-name="header-cell-color" v-loading="listLoading">
      <el-table-column  prop="level" min-width="100"  :render-header="renderLastHeader"></el-table-column>
</el-table>

renderLastHeader方法：

renderLastHeader(h) {
		//下拉框选项
                let filters = [{text: '全部', 'value': "全部"}, {text: 'INFO', 'value': "INFO"}, {text: 'WARN', 'value': "WARN"}, {text: 'ERROR', 'value': "ERROR"}];

		//下拉框内容包裹在一个div里面
                return h('div',{
                        style: {
                            height:'56px'
                        },

                },[
                    h("span",{//div里面有一个文字提示：下拉框所属内容
                        style: {
                        },