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

F-125

已于 2024-05-05 21:48:45 修改

阅读量2.7k

点赞数 15

分类专栏：随笔 Vue 文章标签： vue.js elementui 前端

于 2024-01-19 14:09:12 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47342624/article/details/135696372

版权

本文介绍了如何在Vue项目中使用el-table-column的render-header属性来实现表格列头的自定义功能，如日期选择器，并演示了如何在用户输入时动态加载数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

3.实现自定义需求

    
data() {
  return {
    // 日期选择
    selectTime: '',
  }
},


// 自定义某列表头为时间搜索
    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(