网站建设价格西安,wordpress 主题图片样式,wordpress3.5.2,石景山网站建设有哪些公司一、入库查询#xff0c;实现表格列宽设置本地持久化
MaterialInQuery.vue
在原有代码基础上#xff0c;增加【设置表格列宽#xff0c;组合式函数 hook】相关的增量代码
特点#xff1a;
1、导入设置表格列宽#xff0c;组合式函数 hook、表格扩展实例类型、表格列配…一、入库查询实现表格列宽设置本地持久化
MaterialInQuery.vue
在原有代码基础上增加【设置表格列宽组合式函数 hook】相关的增量代码
特点
1、导入设置表格列宽组合式函数 hook、表格扩展实例类型、表格列配置接口
2、const 表格实例对象、表格列配置列表
3、const 设置表格列宽使用 ref 定义const setTableColumnWidth refany(null);
4、onMounted、nextTick、将 useSetTableColumnWidth(...) 赋值给设置表格列宽
5、加载表格列宽 loadColumnWidth
6、el-table 设置 reftableRef、header-dragendsetTableColumnWidth?.saveColumnWidth
7、拖动列宽变化时自动触发header-dragend保存表格列宽到本地存储空间
script setup langts nameMaterialInQuery......import { useSetTableColumnWidth } from /hooks/useSetTableColumnWidth;
import type { ElTableExtendedInstance, IColumnConfig } from /interface;......// 表格实例对象
const tableRef refElTableExtendedInstance | null(null);
// 表格列配置列表
const columnConfigs refIColumnConfig[]([{ prop: rkNo, label: 入库编号, width: 120 },{ prop: jzDatetime, label: 记账时间, width: 165 },{ prop: supplier, label: 供应厂商, width: 300 },{ prop: total, label: 入库总额, width: 120 },{ prop: remark, label: 备注信息, width: 250 }
]);
// 设置表格列宽使用 ref 定义先用 null 占位然后在 onMounted 中等待表格渲染完毕再赋值 useTableColumnWidth 组合式函数 hook
const setTableColumnWidth refany(null);......onMounted(async () {// 等待表格渲染完成await nextTick();// 对应 const setTableColumnWidth refany(null);if (tableRef.value) {setTableColumnWidth.value useSetTableColumnWidth(tableRef, columnConfigs, ref(MaterialInQuery_rkMaster));}// 加载表格列宽setTableColumnWidth.value?.loadColumnWidth();
});
/scripttemplate......el-tablereftableRef......header-dragendsetTableColumnWidth?.saveColumnWidth....../template
二、出库查询实现表格列宽设置本地持久化
MaterialOutQuery.vue
在原有代码基础上增加【设置表格列宽组合式函数 hook】相关的增量代码
特点
1、导入设置表格列宽组合式函数 hook、表格扩展实例类型、表格列配置接口
2、const 表格实例对象、表格列配置列表
3、const 设置表格列宽使用 computed 定义组合式函数 hook
4、onMounted、nextTick
5、加载表格列宽 loadColumnWidth
6、el-table 设置 reftableRef、header-dragendsetTableColumnWidth?.saveColumnWidth
7、拖动列宽变化时自动触发header-dragend保存表格列宽到本地存储空间
script setup langts nameMaterialOutQuery......import { useSetTableColumnWidth } from /hooks/useSetTableColumnWidth;
import type { ElTableExtendedInstance, IColumnConfig } from /interface;......// 表格实例对象
const tableRef refElTableExtendedInstance | null(null);
// 表格列配置列表
const columnConfigs refIColumnConfig[]([{ prop: ckNo, label: 出库编号, width: 120 },{ prop: jzDatetime, label: 记账时间, width: 165 },{ prop: llDeptId, label: 领取部门, width: 300 },{ prop: total, label: 出库总额, width: 120 },{ prop: remark, label: 备注信息, width: 250 }
]);
// 设置表格列宽使用 computed 定义组合式函数 hook并且自动处理 null 情况
const setTableColumnWidth computed(() {return tableRef.value ? useSetTableColumnWidth(tableRef, columnConfigs, ref(MaterialOutQuery_ckMaster)) : null;
});......onMounted(async () {// 等待表格渲染完成await nextTick();// 加载表格列宽setTableColumnWidth.value?.loadColumnWidth();
});
/scripttemplate......el-tablereftableRef......header-dragendsetTableColumnWidth?.saveColumnWidth....../template 【设置表格列宽组合式函数 hook】useSetTableColumnWidth.ts
import type { ElTableExtendedInstance, IColumnConfig } from /interface;
import { type TableColumnCtx } from element-plus;
import { type Ref } from vue;/*** 设置表格列宽组合式函数 hook* param tableRef 表格实例对象* param tableColumnConfigs 表格列配置列表* param tableName 表格名称名称前面加上路由前缀避免标识符重复如Reagent_reagent* returns*/
export const useSetTableColumnWidth (tableRef: RefElTableExtendedInstance | null,tableColumnConfigs: RefIColumnConfig[],tableName: Refstring
) {// 加载表格列宽const loadColumnWidth () {let columns tableRef.value?.store.states.columns.value;if (!columns || !Array.isArray(columns)) return;for (let column of columns) {let prop column.property;if (prop) {// 从本地存储中获取列宽let storageColWidth localStorage.getItem(${tableName.value}_${prop}_colWidth);if (storageColWidth) {column.width parseInt(storageColWidth) 0 ? parseInt(storageColWidth) : column.width;} else {// 从表格列配置列表中获取列宽let configColWidth tableColumnConfigs.value.find((item) item.prop prop)?.width;if (configColWidth) {column.width configColWidth;}}}}};// 存储表格列宽const saveColumnWidth (newWidth: number, oldWidth: number, column: TableColumnCtxany, event: MouseEvent) {let prop column.property;if (prop) {localStorage.setItem(${tableName.value}_${prop}_colWidth, newWidth.toString());}};// 重置列宽const resetColumnWidth () {let columns tableRef.value?.store.states.columns.value;if (!columns || !Array.isArray(columns)) return;for (let column of columns) {let prop column.property;if (prop) {// 删除本地存储的列宽数据localStorage.removeItem(${tableName.value}_${prop}_colWidth);// 从表格列配置列表中获取列宽let configColWidth tableColumnConfigs.value.find((item) item.prop prop)?.width;if (configColWidth) {column.width configColWidth;}}}};return {loadColumnWidth,saveColumnWidth,resetColumnWidth};
};数据类型定义 interface/index.ts
import { ElTable } from element-plus;// ElTable 扩展实例类型包含内部 store 属性
export type ElTableExtendedInstance InstanceTypetypeof ElTable {store: {states: {columns: {property?: string;// 其他列属性...}[];};};
};// 表格列配置接口
export interface IColumnConfig {prop: string;label: string;width: number;[key: string]: any; // 允许其他属性
}
