1.引用el-table-column属性render-header

2.在表格配置中自定义该方法

3.实现自定义需求

    // 自定义某列表头为时间搜索renderDate(h, { column }) {return h('el-date-picker',{props: {value: this.selectTime,type: 'date',placeholder: '请选择排班时间',valueFormat: 'yyyy-MM-dd',pickerOptions: this.pickerOptions,},on: {input: (val) => this.changeTime(val),},},);},// 自定义列表头展示信息renderShiftTime(h, { column, $index }, type) {return h('span',{domProps: {innerHTML: `<span>值班人员(${type === 'day' ? `${this.info.dayShiftStart}-${this.info.dayShiftEnd}` : (type === 'night' ? `${this.info.nightShiftStart}-${this.info.nightShiftEnd}` : `${this.info.midShiftStart}-${this.info.midShiftEnd}`)})</span>`,},},);},// 表头日期选择changeTime(val) {this.selectTime = val;this.table.loadData();},

4.实现效果