Vue3 + TypeScript 操作第三方库（Element Plus 的 ElTable）的内部属性

1、定义 ElTable 扩展实例类型，包含内部 store 属性

import { ElTable } from "element-plus";// ElTable 扩展实例类型，包含内部 store 属性
export type ElTableExtendedInstance = InstanceType<typeof ElTable> & {store: {states: {columns: {property?: string;// 其他列属性...}[];};};
};

 2、定义表格实例对象（ElTable 扩展实例类型 ElTableExtendedInstance）

// 表格实例对象
const tableRef = ref<ElTableExtendedInstance | null>(null);

3、操作内部属性 columns，columns 是 Ref 对象，所以需要 columns.value

let columns = tableRef.value?.store.states.columns.value;

// 加载表格列宽
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(`reagent_colWidth_${prop}`);if (storageColWidth) {column.width = parseInt(storageColWidth) > 0 ? parseInt(storageColWidth) : column.width;} else {// 从表格列配置列表中获取列宽let configColWidth = columnConfigs.value.find((item) => item.prop === prop)?.width;if (configColWidth) {column.width = configColWidth;}}}}
};