Vue3.0 项目开发 bug 整理与解决方案（二）

问题 1

问题说明: 循环列表的时候发现，将数组下标 key 作为参数传值给子组件（代码如下）

<a-list item-layout="vertical" size="large" :data-source="useCallReportStore().reportContentsModel">
     <template #renderItem="{ item, index }">
         <a-list-item :key="item.id">
            <ContentEditor :content="item" :index="index" />
             <div v-for="(project, key) in item.projects" :key="project.id">
                    <ProjectInfo :basicInfo="project" :key="key" :contentId="item.id" :item="index" />
             </div>
         </a-list-item>
     </template>
</a-list>

渲染效果如下，列表序号显示 NaN，如图所示：

将传参 key 改为 i, 渲染效果就正常了。

<a-list item-layout="vertical" size="large" :data-source="useCallReportStore().reportContentsModel">
     <template #renderItem="{ item, index }">
         <a-list-item :key="item.id">
            <ContentEditor :content="item" :index="index" />
             <div v-for="(project, key) in item.projects" :key="project.id">
                    <ProjectInfo :basicInfo="project" :i="key" :contentId="item.id" :item="index" />
             </div>
         </a-list-item>
     </template>
</a-list>

渲染效果如下：

这个问题想了好久也想不明白，是因为 key 具有特殊属性，所以不能作为参数传值给子组件吗？

问题 2

问题描述：css 样式问题

页面渲染经常会有内容超出边框的情况，如下图所示：

解决办法，给组件加上 css 样式, 问题得到解决

.text {
        word-wrap: break-word;
}

table 表格渲染时（代码如下），content 内容不会垂直居中

 <a-table :dataSource="useCallReportStore().callReportInfo?.actions" :columns="columns"
    :rowKey="(record: any) => record.id" >
    <template #bodyCell="{ column, text, index }">
             <!-- 序号 -->
            <template v-if="column.dataIndex === 'indexDraw'">
                   {{ index + 1 }}
            </template>
            <!-- Action Item -->
            <template v-if="column.dataIndex === 'content'">
              <p class="content">{{ text }}</p>
            </template>                          
    </template>
</a-table>

渲染效果图：

将代码中

改为 , 渲染就变正常了

p 标签本身有包含属性，尽量使用 div。