Ant-Design-Vue踩坑经历(a-list组件)
1.踩坑背景
由于论文组需要,最近维护一个比较老vue的项目,并在此基础上根据需要做出一些更改。
项目的需求从业务背景抽象出来是是展示一个可以动态调整的字符串列表。
这个项目没有使用SFC
,没有一个个的.vue文件组合起来,因此代码之间存在较强的耦合性,维护起来不太方便。
这个项目也没有使用vite
这样的打包工具,是直接在服务器上运行html文件得到的。
使用的组件是ant
组件库,因此我考虑在ant
组件库中寻找一个展示列表的组件,再通过数据绑定,当字符串数组的内容变化时,界面上组件的内容也会自动相应变化。
2.出现的问题
经查找,ant组件库中的a-list
组件比较符合要求:a-list组件链接
对应的模板代码如下,其中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文件中写入模板代码:
数据来源为**showList
**.
在index.js
文件中也声明了showList列表。
但是在页面中显示的是空列表:
console.log出来也是正常的:
但还是空白,就很奇怪,dom树中也没有渲染出来:
令笔者百思不得其解。
3.所做出的尝试
考虑到可能是赋值的时间问题,可能是渲染的时候还未赋值。
因此在onMounted
函数里再次对showList列表进行赋值:
仍未解决…
又怀疑是版本问题,使用了其它版本的ant
组件库中a-list
组件的模板代码。
仍未解决……
这个问题总共困扰了3天……
4.解决方案
换了个其它组件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',
}
]
}
5.总结
1.进行vue
开发时尽量使用SFC
开发模式,使用vite
这类的打包工具进行工程化开发。容易差错,代码耦合性不强,易于维护。
2.在维护一些老项目时,在一些组件不能生效时,可以多换几个版本的写法。
table
组件在v3中数据来源的写法是dataSource
,在V1中的是data-source
。我自己的项目中标的是antV3
但是使用dataSource
是不能生效的,还是空白,当改为data-source
时终于恢复正常。
3.当一个组件用不了时,可以更换为其他组件试试,既能帮助排错,也可能直接解决问题。
哈哈遇到困难应该绕着走而不是迎难而上。
最后附上我请教的一个学长的回答:
根据我的经验,要么就是vue哪里没写好,要么就是a-list没用对.
最后排查的原因也可能是漏了什么步骤或者哪里没写对.
这种情况得自己查.
要么再仔细看看文档,要么再仔细看看代码.
好像说了,但又好像没说,但是很有道理,问题只能出在这里。前端的排错就是这么折磨人…