Element-ui自定义表格头部-添加筛选条件

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.实现效果