美文网首页
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