el-table的表头是select选择器或者是按钮

最新推荐文章于 2024-08-04 10:53:30 发布

is花花吖

最新推荐文章于 2024-08-04 10:53:30 发布

阅读量592

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/xwh19961210/article/details/114400658

本文介绍了如何在Vue.js项目中，利用ElementUI的el-table组件，通过render-header属性实现表头带有下拉选择器或按钮的功能。详细讲解了需求示例、涉及的组件及实现方法，并展示了最终效果。

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

一、需求示例

在这里插入图片描述
通过table-column Attributes里的render-header来实现

二、组件

<el-table border :data="teachers">
	<el-table-column :render-header="renderTeacherSel" >
	    <el-table-column label="姓名" align="center">
	        <template slot-scope="scope">
	            {{ scope.row.nickName }}
	        </template>
	    </el-table-column>
	    <el-table-column label="账号" align="center">
	        <template slot-scope="scope">
	            {{ scope.row.userId }}
	        </template>
	    </el-table-column>
	</el-table-column>
	<el-table-column width="80" :render-header="renderAddTeacher">
	    <template slot-scope="scope">
	        <el-button type="primary" size="mini" @click="removeTeacher(scope.$index)">移除</el-button>
	    </template>
	</el-table-column>
</el-table>

三、方法

export default {
    data() {
        return {
            teachers: [
            	{
            		nickName: 'Allen',
            		userId: 'allen789@163.com'
            	},
            	{
            		nickName: 'Nick',
            		userId: 'nick789@163.com'
            	}
            ],
            editTeacherSel:''
        }
	},
	methods: {
		renderTeacherSel (h) {
			let filters = [
                {text:"张三",value:"zhangsan@163.com"},
                {text:"Alice",value:"Alice@163.com"},
                {text:"Jack",value:"Jack@163.com"}
            ]
            return (
                h('el-select',{
                    style: {
                        width: '100%'
                    },
                    on: {
                        input: (value) => {
                            this.editTeacherSel = value
                        }
                    },
                    props: {
                        value: this.editTeacherSel,
                        clearable: true
                    }
                },[
                    filters.map(item => {
                        return h("el-option", {
                            props: {
                                value: item.value,
                                label: item.text
                            }
                        })
                    })
                ])
            )
		},
		renderAddTeacher (h) {
            return (
                <el-button
                type="primary"
                onClick={()=>this.addTeacher()}
                >+</el-button>
            )
        },
        addTeacher () {
            if(this.editTeacherSel == ''){
                this.$message.warning('请选择添加的老师')
                return
            }
            let result = { nickName: '张三', userId: 'zhangsan@163.com' }
            this.teachers.push(result)
        }
	}
}

四、效果

在这里插入图片描述