关于u-table 和el-table的问题相关

解决方式:

        在u-table中引入el-table中的el-table-column,修改el-table-column为u-table-column

页面报错

vue.runtime.esm.js:619 [Vue warn]: Duplicate keys detected: 'el-table_1_column_1'. This may cause an update error.

found in

---> <ElTableHeader>
       <ElTable> at packages/table/src/table.vue
         <UTable> at packages/u-table/src/u-table.vue
           <ElCard> at packages/card/src/main.vue
             <SvgIcon> at src\xxxx\yyyy\ddddd.vue
               <SelfDelivery> at src\views\oooooclient\ppppp\sssss\fffffff.vue
                 <AppMain> at src\views\layout\components\AppMain.vue
                   <Layout> at src\views\layout\Layout.vue
                     <App> at src\App.vue
                       <Root>

原因:

        1、由于之前使用的是el-table,它对大数据量的查询支持性不是很卡,页面经常卡住,后面经过技术选型,使用了u-table,在当时使用中未发现问题。后续由于业务需求在上面进行扩展后出现上述问题。

问题分析和解决思路:

        1、通过报错信息分析是由于主键重复的问题,但是当前页面的主键是没有重复的,所以通过报错分析处理问题失败。

        2、网上查找帖子和各种博客,统一的回复都是主键重复等等,处理方式是重新设置不重复的主键,通过网上查找问题失败。

        3、询问公司前端高手,给出的回复是重复调用了一些东西导致的问题,具体原因需要排查,(由于不是一个项目组,前端没有源码只是看了报错信息分析出来的),所以寻求公司内部帮助失败。

        4、加入官方交流群,发送错误信息,回复是多看看源码,是虚拟表格的问题。(本人后端对vue源码全瞎,完全看不懂。)此方式处理失败。

        5、后续通过还原代码(不报错的版本),慢慢扩展后发现问题,前端在添加扩展的时候,在u-table中引入el-table中的el-table-column导致报错,修改el-table-column 为u-table-column,报错问题修复,页面不会卡死。

fu-tableel-table都是前端开发中用于构建表格组件的库,它们分别来自不同的开源项目: 1. **vue-fu-table**: 这是一个基于Vue.js的轻量级表格组件库,它的设计目标可能是提供更简洁、易用的API以及更好的性能优化。fu-table可能专注于底层实现的灵活性,适合对性能有较高要求或者想要定制化程度更高的开发者。 2. **Element UI** (简称El-Table): Element UI是由饿了么团队开发的一个完善的UI组件套件,其中包括el-table,它提供了丰富的功能和高度可定制化的选项,比如列分隔线、合并单元格、排序、过滤等,而且通常有更好的文档支持和社区资源。Element UI是基于Vue.js的,所以它的组件往往已经内建了响应式和生命周期钩子等功能。 两者的区别主要体现在以下几个方面: - **生态系统**:El-Table隶属于一个完整的UI库,包含了其他组件和工具,而fu-table相对独立,可能没有那么全面的功能集。 - **功能丰富度**:El-Table通常包含更多的预置功能和交互效果,对于快速上手和基本场景来说较为方便;而fu-table可能会更侧重于基础功能,允许更多自定义。 - **灵活性和定制性**:fu-table可能更加灵活,对于高级开发者或希望深入控制组件内部的用户来说更合适。 - **学习曲线**:由于Element UI的广泛使用,El-Table的学习曲线相对平缓;而fu-table可能需要更多时间去理解和适应。 如果你正在寻找一个简单快速搭建表格的应用,El-Table可能是首选;如果追求极致的灵活性和高性能,或者想深入了解组件内部机制,fu-table则是个不错的选择。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值