import { ColumnType, getTableHead } from '@/common/methods/table'; import { TableKey } from '@/common/methods/table/interface'; import { ref } from "vue"; /** * 获取动态表头数据 * ant-design 表格数据的过滤功能与表头绑定在一起 */ export function getTableColumns() { // 表头数据 const columns = ref([]); // 过滤信息 const filteredInfo = ref(); // 缓存 注册表头回调 let cacheColumnCB: Function = (): void => { }; // 缓存 动态表头 key let cacheTableKey: keyof TableKey = 'table_pcweb_userinfo'; let cacheFilterKeyList: string[] = [] /** * 注册表头 * @param tableName 动态表头数据key * @param filterKeyList 添加过滤属性的key * @param cb 回调函数,处理添加不同表格过滤,排序等功能 */ function registerColumn(tableName: keyof TableKey, filterKeyList: string[], cb?: Function) { cacheTableKey = tableName; cacheColumnCB = cb ? cb : () => { }; cacheFilterKeyList = filterKeyList; const list = getTableHead(tableName); const filtered = filteredInfo.value || {}; columns.value.length = 0; list.forEach((e, i) => { const { columnfield, columntitle, columnwidth, aligntype } = e; console.log(); const item: ColumnType = { key: String(i), dataIndex: columnfield, // 表格数据对应的key title: columntitle, align: aligntype === 1 ? 'center' : aligntype === 2 ? 'left' : 'right', slots: { customRender: columnfield }, }; if (columntitle === '序号') { item.render = (text: any, record: any, index: number) => `${index + 1}` } if (columnwidth) { item.width = +columnwidth } // 以下添加过滤数据对应的方法 filterKeyList.forEach(el => { if (e.columnfield === el) { item.onFilter = (value: string, record: any) => record[el].toString().includes(String(value)); item.filteredValue = filtered[el] || null; } }) cb && cb(e, item, filtered); columns.value.push(item); }); } /** * 更新动态表头 */ function updateColumn() { registerColumn(cacheTableKey, cacheFilterKeyList, cacheColumnCB) } return { columns, registerColumn, updateColumn, filteredInfo } }