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

发布时间 2023-11-26 11:17:26作者: 能帮一下是一下

解决方式:

        在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,报错问题修复,页面不会卡死。

验证:

  1、修改el-table-column 为u-table-column,问题完全解决。