菜鸟所在的公司很多流程都需要用到`excel`，因为之前没有信息化，所以现在很多功能都是要上传`excel`识别，然后对识别内容进行编辑！这部分菜鸟之前写过一篇文章：[vue3 导出数据为 excel 文件 + 导入并识别excel文件](https://juejin.cn/post/7366889205336670208) 上述这篇文章主要是实现的`json`数据导出为`excel`，有讲编辑功能，当时想的是直接用`el-input`实现，并没有实现完整。后面发现了`vxe-table`，但没有切实的使用，所以没有更新那篇文章。这次项目中再次需要用到excel识别后编辑的功能，所以特来补充！ ## vxe UI 介绍 `vxe-table` 是 vxe UI 里面的 table组件，很实用，其他的组件需要各位读者去开发，因为菜鸟没怎么使用。菜鸟感觉这个基本和 element plus 差不多，只是功能有的更强、有的又偏弱，基本上 element plus 的都可以替代 vxe UI 里面的组件，但菜鸟感觉 vxe UI 的：表单、`vxe-grid`各位读者可以好好看看，因为这两个都有通过数据结构生成内容的能力，对喜欢jsx的帮助应该很大；然后其他组件的话，感觉也比较有用，有element plus里面没有的一些功能！ vxe UI 网址： ### 为什么 vxe-table 实用？ `vxe-table` 实用不是因为别的，就因为其使用方式和 element plus 的 `el-table` 一模一样，但是不同的是，其可以对每一行数据进行编辑！ ![table\_edit\_footer\_Immediately.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/da20cb90e8af4aec9147feb9fd77aff3~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgUEJpdFc=:q75.awebp?rk3s=f64ab15b&x-expires=1759101361&x-signature=m6aQ7MIorFonPdurbATdwqx8tAQ%3D) ## 安装这里菜鸟感觉有个槽点，按需要引入很奇怪（感觉很超出了认知，是你要用什么自己去引入的这种按需引入，而不是element plus那种自动的），主要是使用`vxe-table`以及`vxe-table`中会用到的`vxe-select`、`vxe-input`，大部分只需要引入一点就行了！具体见：菜鸟的main.js部分 ```js // 导入vxe-table --> 必须导入VxeTooltip不然有问题，其他随便 // 导入vxe ui的组件 --> 必须导入VxeUI不然没法使用VxeUI.setI18n等方法 // 导入VxeSelect --> 必须导入VxeInput，不然样式不对，因为VxeSelect中使用了VxeInput import { VxeUI, VxeSelect, VxeTooltip, VxeInput } from "vxe-pc-ui"; import { VxeTable, VxeColumn, VxeColgroup, VxeGrid, VxeToolbar } from "vxe-table"; // 导入主题变量，也可以重写主题变量 import "vxe-table/styles/cssvar.scss"; import "vxe-pc-ui/styles/cssvar.scss"; // 导入默认的语言 import zhCN from "vxe-pc-ui/lib/language/zh-CN"; VxeUI.setI18n("zh-CN", zhCN); VxeUI.setLanguage("zh-CN"); function lazyVxe(app) { app.use(VxeSelect); app.use(VxeInput); app.use(VxeTooltip); app.use(VxeTable); app.use(VxeColumn); app.use(VxeColgroup); app.use(VxeGrid); app.use(VxeToolbar); } app.use(lazyVxe); ``` ## 实际应用菜鸟的界面 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/194fac85d83a4531aae0de6b109555ea~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgUEJpdFc=:q75.awebp?rk3s=f64ab15b&x-expires=1759101361&x-signature=2MkQfGKpnCnxl7kRUA5POIRJsio%3D) ### 代码实现代码 -- 父组件 ```js ``` 这里的`upload_or_download_path`就是个枚举，用到了策略模式，不然每一个都要写，很麻烦： ```js import * as sampleSend from "@/api/sample/sampleSend"; import * as sampleInput from "@/api/sample/sampleInput"; import * as sampleListByOrderId from "@/api/sample/sampleList"; import { sublibEnumsNum } from "@/components/Lims/SampleCommon/SampleInput/common"; const rulesObject = { // 组织/核酸 sampleName: [ { required: true, message: "请输入样本名称" } ], latinSpeciesName: [ { required: true, message: "请输入拉丁学名" } ], …… }; export const upload_or_download_path = [ { label: "组织", value: 1, height: "600px", downloadApi: () => sampleInput.orderSampleDownload(1), uploadApi: sampleInput.orderSampleUpload, associated: sampleSend.sampleAssociatedOrder, detail: sampleListByOrderId.orderSampleList, itemName: "orderSampleDTOList", serverDataToLocal: (res) => { let data = res.data.records; for (let i of data) { i.infective = i.infective + ""; } return data; }, rules: function () { return rulesObject; } }, { label: "核酸", value: 2, height: "600px", downloadApi: () => sampleInput.orderSampleDownload(2), uploadApi: sampleInput.orderSampleUpload, associated: sampleSend.sampleAssociatedOrder, detail: sampleListByOrderId.orderSampleList, itemName: "orderSampleDTOList", serverDataToLocal: (res) => { let data = res.data.records; for (let i of data) { i.infective = i.infective + ""; } return data; }, rules: function () { return rulesObject; } }, { label: "文库", value: 3, height: "500px", downloadApi: sampleInput.orderSampleLibraryDownload, uploadApi: sampleInput.orderSampleLibraryUpload, associated: sampleSend.sampleAssociatedOrderSampleLibrary, detail: sampleListByOrderId.orderSampleListLibrary, itemName: "orderSampleLibraryDTOList", serverDataToLocal: (res) => { let data = res.data.records; for (let i of data) { i.baseBalance = i.baseBalance + ""; i.cyclized = i.cyclized + ""; for (let j of i.orderSampleSubLibraryDTOList) { j.baseBalance = j.baseBalance + ""; j.libraryEndFivePhosphorylation = j.libraryEndFivePhosphorylation + ""; } } return data; }, rules: function (data) { const sampleName = []; sampleName.push({ required: true, message: "请输入文库名称" }); sampleName.push({ validator(e) { // console.log(e); let sampleNameArr = {}; for (let i = 0; i < data.length; i++) { if (sampleNameArr[data[i]?.sampleName]) { sampleNameArr[data[i].sampleName]++; } else { sampleNameArr[data[i].sampleName] = 1; } } if (sampleNameArr[e.cellValue] > 1) { return new Error("存在重名的文库名称"); } } }); return Object.assign({}, rulesObject, { sampleName: sampleName, latinSpeciesName: [ { required: true, message: "请输入来源物种" } ] }); } }, { label: "单细胞", value: 4, height: "450px", downloadApi: sampleInput.orderSampleCellDownload, uploadApi: sampleInput.orderSampleCellUpload, associated: sampleSend.sampleAssociatedOrderSampleCell, detail: sampleListByOrderId.orderSampleListCell, itemName: "orderSampleCellDTOList", serverDataToLocal: (res) => { let data = res.data.records; for (let i of data) { i.sampleRunOut = i.sampleRunOut + ""; i.sampleHasBackup = i.sampleHasBackup + ""; } return data; }, rules: function () { return Object.assign({}, rulesObject, { latinSpeciesName: [ { required: true, message: "请输入来源物种" } ] }); } }, { label: "子文库", value: sublibEnumsNum, height: "500px", detail: sampleListByOrderId.orderSampleListSubLibrary, serverDataToLocal: (res) => { let data = res.data; for (let i of data) { i.baseBalance = i.baseBalance + ""; i.libraryEndFivePhosphorylation = i.libraryEndFivePhosphorylation + ""; } return data; }, rules: function () { return Object.assign({}, rulesObject, { sampleName: [ { required: true, message: "请输入文库名称" } ] }); } } ]; ``` 实现代码 -- 子组件子组件都是列之类的，这里就只放一个了`SampleCellCol.vue`，作为例子 ```js ``` 这里菜鸟感觉不是很难，就按照element plus的去搞就行，主要是需要找到对应的文档，具体文档在这里： 1. 可编辑 - 插槽式： 2. 可编辑 - 配置式： 3. 校验数据： 4. 设置选择项： ### 复杂表单如果是复杂表单，后端识别出来，只要给过来的数据结构没啥问题，感觉都可以使用`vxe-table`实现编辑！然后如果是简单excel（没有合并的列），甚至都不用后端识别，菜鸟这里有个办法，见文章：[工作+学习常用的一些东西](https://juejin.cn/post/7436421093278400563)