实现效果
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'))
);
}
}
});
};
