vue el-table 自定义表头 el-select使用

本文介绍如何在el-table中使用自定义属性render-header实现表头的动态渲染,包括下拉选择器的集成,提供了具体的代码示例。

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

el-table有一个自定义属性render-header

 

        < el-table-column v-for="(headItem,index ) intableHeadBill" :key=index"

        align="center"

        :prop="headItem.value"

        :label=""

:render-header = 'renderHeaderBill'>

renderHeaderBill方法使用:

renderHeaderBill(h, data) {

    let filters = [ {text:'全部1','value':"1"} , {text:'全部2','value':"2"} , {text:'全部3','value':"3"} ];

return h('div',{

style: {

height:'30px'

        },

    },[

h(

"el-select",

            {

props: {

placeholder:'',

                    value: '',//默认值

                    clearable:false,

                    popperClass:'popperClassResOut',//样式

                },

                class: selectClass,

                on: {

input: value => {

this.$emit("update:param", value);

            //select 选中值

                        }

                        this.callback &&this.callback();

                    }

}

},

            [

filters.map(item => {

return h("el-option", {

props: {

                    value: item.value,

                            label: item.text

                        }

});

                })

])

])

},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值