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

BillKu2025-06-14 16:40

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

TypeScript 复制代码

import { ElTable } from "element-plus";

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

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

TypeScript 复制代码

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

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

TypeScript 复制代码

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

TypeScript 复制代码

// 加载表格列宽
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;
        }
      }
    }
  }
};