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

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;
        }
      }
    }
  }
};
相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript