Vue3类Excel表格编辑器(开发中，有bug)

开发环境：Vue3、Typescript

快速开始

1 安装

npm install vue3-excel-table

2 配置

2.1 导入插件

在 main.ts 中导入插件：

import {Vue3ExcelTablePlugin} from 'vue3-excel-table' 
import '/node_modules/vue3-excel-table/dist/vue3-excel-table.css' 

app.use(Vue3ExcelTablePlugin);

2.2 配置全局类型

在src\types 新增global.d.ts 文件，内容如下：

 // src/types/global.d.ts<br/>
import type { 
Column, CellClickEventData,CellEditEventData,CellValidationErrorEventData,CellSelectionEventData 
} from 'vue3-excel-table' 
 // 将类型声明为全局可用 
declare global { 
  // 直接声明全局类型别名 
  type VET_Column = Column 
  type VET_CellClickEventData = CellClickEventData 
  type VET_CellEditEventData = CellEditEventData 
  type VET_CellValidationErrorEventData = CellValidationErrorEventData 
  type VET_CellSelectionEventData = CellSelectionEventData 
  // 或者直接重新声明（扩展）接口 
  //interface TableColumn extends TableColumn {} 
  //interface TableEventParams<T = any> extends TableEventParams<T> {} 
} 

3 使用

<vue3-excel-table ref="mainTable"
    :columns="columns"
    :data="tableData"
    :-one-new-row-only="false"
        :show-selection-column="true"
        @cell-dbclick="handleCellDbClick"
        @cell-click="handleCellClick"
        @edit-start="handleEditStart"
        @edit-end="handleEditEnd"
        @validation-error="handleValidationError"
        @selection-change="handleSelectionChange" />

3.1 属性解释

3.2 示例数据

const mainTable = ref();

3.2.1 数据结构

 const columns = ref([
    {
        prop: 'name', label: '姓名', type: 'string', width: 150, required: true,
        editStart: handleNameEditStart,
        editEnd: handleNameEditEnd,
        click: handleNameClick,
        dbclick: handleNameDbClick
    },
    { prop: 'age', label: '年龄', type: 'number', width: 100, required: true, readonly: (value: any) => value > 18 },
    { prop: 'birthday', label: '出生日期', type: 'date', format: 'yyyy/MM/dd', width: 180 },
    { prop: 'verified', label: '已验证', type: 'bool', width: 100, placeholder: "Yes|NO" },
    {
        prop: 'role', label: '角色', type: 'select', width: 120, options: [
            { label: '管理员', value: 'admin' },
            { label: '用户', value: 'user' }
        ]
    }
]);

const tableData = ref([
    {
        name: '张三', fileUrl: 'http://192.168.1.1/log.png',
        logo: 'data:image/png;base64,iVBOR......5CYII=', age: 25, birthday: '1998-05-12', verified: true, role: 'admin'
    },
    { name: '李四', logo: 'http://192.168.1.1/log.png', age: 30, birthday: '1993-08-22', verified: false, role: 'user' },
    { name: 'jhon', logo: 'http://192.168.1.1/log.png', age: 13, birthday: '1990-08-22', verified: false, role: 'user' },
    { name: 'sam', age: 18, birthday: '2000-08-22', verified: false, role: 'user' }
])

3.2.2 单元格级别事件

const handleNameEditStart = (event: VET_CellEditEventData) => { 
    console.log('开始编辑姓名:', event) 
} 
const handleNameEditEnd = (event: VET_CellEditEventData) => { 
    //event.row.name = event.oldValue;<br/>
    console.log('结束编辑姓名:', event) 
} 
const handleNameClick = (event: VET_CellClickEventData) => { 
    //event.row.name = event.oldValue;<br/>
    console.log('单击姓名:', event) 
} 
const handleNameDbClick = (event: VET_CellClickEventData) => { 
    //event.row.name = event.oldValue;<br/>
    console.log('双击姓名:', event) 
} 

3.2.3 表格级别事件

const onNewRow = () => { 
    mainTable.value.newRow(); 
}; 
const handleCellClick = (event: VET_CellSelectionEventData) => { 
    console.log('选中单元格:', event) 
} 
const handleCellDbClick = (event: VET_CellSelectionEventData) => { 
    console.log('双击事件:', event) 
} 
const handleEditStart = (event: VET_CellEditEventData) => { 
    console.log('开始编辑:', event) 
} 
const handleEditEnd = (event: VET_CellEditEventData) => { 
    console.log('结束编辑:', event) 
} 
const handleValidationError = (event: VET_CellValidationErrorEventData) => { 
    console.log('校验失败:', event) 
} 
const handleSelectionChange = (event: VET_CellSelectionEventData) => { 
    console.log('选中行:', event) 
}