Avue排坑之表格头搜索

实现效果
image.png

官方介绍--自定义表头函数:renderHeader


image.png
具体实现

首先对表格的配置数组columns进行循环对进行按需添加
然后先添加a-popover弹窗, 最后添加搜索框以及查询按钮

   columns.forEach((element) => {
        if (element.label === '询价单号') {
        element.renderHeader = (h, { column, $index }) => {
            const content = h('div', [
              h('div', [
                h('a-input', {
                  // style: { minWidth: '100px', maxWidth: '200px'},
                  // 弹窗中的搜索栏
                  props: { value: this.searchFormData[column.property], allowClear: true },
                  on: {
                    change: (e) => {
                      this.searchFormData[column.property] = e.target.value;
                    }
                  }
                })
              ]),
              h('div', [
                h(
                  'el-button',
                  {
                    // 弹窗中的搜索按钮
                    style: { marginLeft: '62%', marginTop: '5px' },
                    props: {
                      icon: 'el-icon-search',
                      type: 'primary',
                      size: 'mini'
                    },
                    on: {
                      click: () => {
                        this.handleSearch({
                          [column.property]: this.searchFormData[column.property] // 接口传参
                        });
                      }
                    }
                  },
                  '查询'
                )
              ])
            ]);
            const popover = h(
              // 展开弹窗
              'a-popover',
              {
                props: { placement: 'top', trigger: 'click' },
                scopedSlots: {
                  content: (props) => content
                }
              },
              [
                h('span', column.label),
                h('el-button', {
                  on: {
                    click: (event) => {
                      // 展开弹窗清空this.searchFormData查询条件
                      Object.keys(this.searchFormData).forEach(
                        (key) => (this.searchFormData[key] = '')
                      );
                    }
                  },
                  props: { icon: 'el-icon-search', type: 'text' }
                })
              ]
            );
            return popover;
          };
        }
      });
扩展--- 日期、select 、input等多类型筛选
image.png
 import * as components from './renderHeader'; // 引入components 组件
 columns.forEach((element) => {
        this.DataDir.forEach((ite) => {  //this.DataDir为字段数组, bizDic 字典key。储存顶部下拉数据
          if (element.bizDic === ite.name) {
            element.dicData = ite.arr;
          }
        });
       if ( element.label === '询价单号' || element.label === '审批状态' ) {
          element.renderHeader = (h, { column, $index }) => {
            let type = element.type
            if (!element.type || element.type === 'default') {
              type = 'input';
            }
            if (element.bizDic) {
              type = 'select';
            }
            const component = components[type] &&components[type](h, column.property, this.searchFormData, element, this);
            const content = h('div', [
              h('div', [component]), // 唯一区别点在于动态组件component
           // --------------------------------------------------------下方代码保持不变--------------------------------------------
              h('div', [
                h(
                  'el-button',
                  {
                    // 弹窗中的搜索按钮
                    style: { marginLeft: '62%', marginTop: '5px' },
                    props: {
                      icon: 'el-icon-search',
                      type: 'primary',
                      size: 'mini'
                    },
                    on: {
                      click: () => {
                        this.handleSearch({
                          [column.property]: this.searchFormData[column.property] // 接口传参
                        });
                      }
                    }
                  },
                  '查询'
                )
              ])
            ]);
          const popover = h(
              // 展开弹窗
              'a-popover',
              {
                props: { placement: 'top', trigger: 'click' },
                scopedSlots: {
                  content: (props) => content
                }
              },
              [
                h('span', column.label),
                h('el-button', {
                  on: {
                    click: (event) => {
                      // 展开弹窗清空this.searchFormData查询条件
                      Object.keys(this.searchFormData).forEach(
                        (key) => (this.searchFormData[key] = '')
                      );
                    }
                  },
                  props: { icon: 'el-icon-search', type: 'text' }
                })
              ]
            );
            return popover;
          };
        }
renderHeader.js组件
import moment from 'moment';
import Vue from 'vue';
export const input = (h, prop, form, column, that) => {
  return h('a-input', {
    props: { value: form[prop], allowClear: true },
    on: {
      change: (e) => {
        Vue.set(form, prop, e.target.value);
      }
    }
  });
};
export const link = (h, prop, form, column, that) => {
  return h('a-input', {
    props: { value: form[prop], allowClear: true },
    on: {
      change: (e) => {
        Vue.set(form, prop, e.target.value);
      }
    }
  });
};

export const select = (h, prop, form, column, that) => {
  return h(
    'a-select',
    {
      style: { width: '100%' },
      props: {
        value: form[prop],
        allowClear: true
      },
      on: {
        change: (val) => {
          Vue.set(form, prop, val);
        }
      }
    },
    column.dicData &&
      column.dicData.map((item) => {
        return h(
          'a-select-option',
          {
            props: {
              value: item.value
            }
          },
          [item.label]
        );
      })
  );
};

export const datetime = (h, prop, form, column, that) => {
  return h('a-range-picker', {
    props: {
      value: form[prop] ? form[prop].map((item) => moment(item, 'x')) : [],
      allowClear: true,
      format: 'YYYY-MM-DD HH:mm:ss',
      showTime: { format: 'HH:mm:ss' },
      placeholder: [that.$t('i18n_components_start_time'), that.$t('i18n_components_end_time')]
    },
    on: {
      change: (val) => {
        Vue.set(
          form,
          prop,
          val.map((item) => item.format('x'))
        );
      }
    }
  });
};
export const date = (h, prop, form, column, that) => {
  return h('a-range-picker', {
    props: {
      value: form[prop] ? form[prop].map((item) => moment(item, 'x')) : [],
      allowClear: true,
      format: 'YYYY-MM-DD',
      placeholder: [that.$t('i18n_components_start_time'), that.$t('i18n_components_end_time')]
    },
    on: {
      change: (val) => {
        Vue.set(
          form,
          prop,
          [val[0].startOf('day'), val[1].endOf('day')].map((item) => item.format('x'))
        );
      }
    }
  });
};

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容