1.效果展示
表頭select
select change
2.代碼實(shí)現(xiàn)
el-table -> el-select
- 通過 :render-header="renderTypeHeader" 對(duì) el-table 列標(biāo)題進(jìn)行渲染
renderTypeHeader(h) {
//下拉框選項(xiàng)
let filters = [{
text: '類型',
value: ""
}, {
text: '質(zhì)量',
value: '質(zhì)量'
}, {
text: '進(jìn)度',
value: '進(jìn)度'
}, {
text: '安全',
value: '安全'
}, {
text: '其他',
value: '其他'
}];
return (
h('el-select',{ //el-select實(shí)現(xiàn)下拉框
on:{
input: (value) => {//隨著下拉框的不同惑折，文字框里的內(nèi)容改變
this.typeValue = value;
change: this.search();// 文字框里的內(nèi)容 change事件
},
},
props:{
value: this.typeValue, //文字框的內(nèi)容取決于這個(gè)value
},
}, [ //下拉框里面填充選項(xiàng)，通過map遍歷filters熏版，為每一個(gè)選項(xiàng)賦值。
filters.map(item => {
return h("el-option", {
props: {
value: item.value,
label: item.text
}
})
})
])
)
}
