美文网首页
vue el-table 自定义表头 el-select使用

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

作者: 小小_绿 | 来源:发表于2018-09-19 11:49 被阅读0次

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

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

        align="center"

        :prop="headItem.value"

        :label=""

:render-header = 'renderHeader'>

renderHeaderBill方法使用:

renderHeader(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

                        }

});

                })

])

])

},

相关文章

网友评论

      本文标题:vue el-table 自定义表头 el-select使用

      本文链接:https://www.haomeiwen.com/subject/tnzbnftx.html