vue-ant-design踩坑

原创已于 2023-04-03 20:34:47 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #前端框架 #anti-design-vue

于 2023-04-03 20:05:10 首次发布

作者在维护一个基于Vue的老项目时遇到a-list组件不工作的问题，尝试了版本切换和赋值时机调整，但未解决问题。最终改用table组件成功展示了字符串列表，总结指出在Vue开发中应使用SFC和现代构建工具，以及遇到问题时可尝试更换组件或排查版本差异。

Ant-Design-Vue踩坑经历（a-list组件）

1.踩坑背景

由于论文组需要，最近维护一个比较老vue的项目，并在此基础上根据需要做出一些更改。

项目的需求从业务背景抽象出来是是展示一个可以动态调整的字符串列表。

这个项目没有使用SFC，没有一个个的.vue文件组合起来，因此代码之间存在较强的耦合性，维护起来不太方便。

这个项目也没有使用vite这样的打包工具，是直接在服务器上运行html文件得到的。

使用的组件是ant组件库，因此我考虑在ant组件库中寻找一个展示列表的组件，再通过数据绑定，当字符串数组的内容变化时，界面上组件的内容也会自动相应变化。

2.出现的问题

经查找，ant组件库中的a-list组件比较符合要求：a-list组件链接

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0rkldBaX-1680523025664)(C:\Users\Zhai yanbo\AppData\Roaming\Typora\typora-user-images\image-20230403191641666.png)]$

对应的模板代码如下，其中data作为一个字符串数组即可。

<h3 :style="{ margin: '16px 0' }">Small Size</h3>
  <a-list size="small" bordered :data-source="data">
    <template #renderItem="{ item }">
      <a-list-item>{{ item }}</a-list-item>
    </template>
    <template #header>
      <div>Header</div>
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </a-list>

于是，我的项目中使用了这个组件：

在html文件中写入模板代码：

$VDRR~VKNL28MDU8Z7LNSID

数据来源为**showList**.

在index.js文件中也声明了showList列表。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rCX8MUVh-1680523025666)(D:\Pictures\blog\ant踩坑\js.png)]$

但是在页面中显示的是空列表:

(https://img-blog.csdnimg.cn/5fa9f078c7da49c2bb04f58645697d12.png)

console.log出来也是正常的：

但还是空白，就很奇怪，dom树中也没有渲染出来：

令笔者百思不得其解。

3.所做出的尝试

考虑到可能是赋值的时间问题，可能是渲染的时候还未赋值。

因此在onMounted函数里再次对showList列表进行赋值：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M0Zkh4WG-1680523025668)(D:\Pictures\blog\ant踩坑\init.png)]$

仍未解决…

又怀疑是版本问题，使用了其它版本的ant组件库中a-list组件的模板代码。

仍未解决……

这个问题总共困扰了3天……

4.解决方案

换了个其它组件table，也可以满足我进行字符串数组数据展示的需求。

table组件链接

展示图：

在这里插入图片描述

代码：

 <!--        高亮的数据表列表-->
        <div class="show-list">
            <a-table :data-source="showList" :columns="columns" :scroll="{ y: 240 }" :pagination="false"/>
        </div>
      <div class="graphInfos-container">
        Nodes:{{ curNodesNum }}, Edges:{{ curEdgesNum }}
        <p v-show="filterMethod==='delete'">
          过滤点边规模 Nodes:{{originalGraph.nodeNum-curNodesNum}},
          Edges:{{originalGraph.edgeNum-curEdgesNum}}
        </p>
      </div>

// 初始化showlist和columns
const initShowlist = () => {

                reactiveData.showList = [{
                    key: '1',
                    num: '1',
                    table_id: 'd57100c7-e4bd-4a2b-8a73-e7696c256639',
                },
                    {
                        key: '2',
                        num: '2',
                        table_id: '17a7c56d-0709-440c-a1d7-7688b5370ce2',
                    },
                    {
                        key: '2',
                        num: '2',
                        table_id: '17a7c56d-0709-440c-a1d7-7688b5370ce2',
                    },
                    {
                        key: '2',
                        num: '2',
                        table_id: '17a7c56d-0709-440c-a1d7-7688b5370ce2',
                    },
                    {
                        key: '2',
                        num: '2',
                        table_id: '17a7c56d-0709-440c-a1d7-7688b5370ce2',
                    },
                    {
                        key: '2',
                        num: '2',
                        table_id: '17a7c56d-0709-440c-a1d7-7688b5370ce2',
                    },
                    {
                        key: '2',
                        num: '2',
                        table_id: '17a7c56d-0709-440c-a1d7-7688b5370ce2',
                    },
                    {
                        key: '2',
                        num: '2',
                        table_id: '17a7c56d-0709-440c-a1d7-7688b5370ce2',
                    },
                    {
                        key: '2',
                        num: '2',
                        table_id: '17a7c56d-0709-440c-a1d7-7688b5370ce2',
                    },
                    {
                        key: '2',
                        num: '2',
                        table_id: '17a7c56d-0709-440c-a1d7-7688b5370ce2',
                    },
                ],

                reactiveData.columns= [
                    {
                        title: '序号',
                        dataIndex: 'num',
                        key: 'num',
                        width: 50,
                    },
                    {
                        title: '数据表id',
                        dataIndex: 'table_id',
                        key: 'table_id',
                    }
                   ]
            }