1.效果展示
表头select
select change
2.代码实现
el-table -> el-select
- 通过 :render-header="renderTypeHeader" 对 el-table 列标题进行渲染
renderTypeHeader(h) {
//下拉框选项
let filters = [{
text: '类型',
value: ""
}, {
text: '质量',
value: '质量'
}, {
text: '进度',
value: '进度'
}, {
text: '安全',
value: '安全'
}, {
text: '其他',
value: '其他'
}];
return (
h('el-select',{ //el-select实现下拉框
on:{
input: (value) => {//随着下拉框的不同，文字框里的内容改变
this.typeValue = value;
change: this.search();// 文字框里的内容 change事件
},
},
props:{
value: this.typeValue, //文字框的内容取决于这个value
},
}, [ //下拉框里面填充选项，通过map遍历filters，为每一个选项赋值。
filters.map(item => {
return h("el-option", {
props: {
value: item.value,
label: item.text
}
})
})
])
)
}
