實(shí)現(xiàn)效果
image.png
官方介紹--自定義表頭函數(shù)：renderHeader
image.png
具體實(shí)現(xiàn)
首先對表格的配置數(shù)組columns進(jìn)行循環(huán)對進(jìn)行按需添加
然后先添加a-popover彈窗书斜， 最后添加搜索框以及查詢按鈕
columns.forEach((element) => {
if (element.label === '詢價(jià)單號') {
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;
};
}
});
擴(kuò)展--- 日期、select 捍岳、input等多類型篩選
image.png
import * as components from './renderHeader'; // 引入components 組件
columns.forEach((element) => {
this.DataDir.forEach((ite) => { //this.DataDir為字段數(shù)組狮惜， bizDic 字典key淤袜。儲(chǔ)存頂部下拉數(shù)據(jù)
if (element.bizDic === ite.name) {
element.dicData = ite.arr;
}
});
if ( element.label === '詢價(jià)單號' || element.label === '審批狀態(tài)' ) {
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]), // 唯一區(qū)別點(diǎn)在于動(dòng)態(tài)組件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'))
);
}
}
});
};
