ant-design-vue构建后台管理系统记录

快来打我* 2023-06-07 10:55 8阅读 0赞

# ant-design-vue构建后台管理系统记录 #

本文链接：[https://blog.csdn.net/qq\_26769677/article/details/88794507][https_blog.csdn.net_qq_26769677_article_details_88794507]

1.使用v-slot指令代替废弃了的slot 和 slot-scope。  
原：

<a-table bordered :data-source="data" ...>
        <template slot="name" slot-scope="value, row, index">
          {
       {row.name}} {
       {row.other}}
        </template>
      </a-table>

使用v-solt:

<a-table bordered :data-source="data" ...>
            <a-table-column data-index="dealerShortName" title="xxx" #default="value, row, index">
              <span>{
       { value }}</span>
              <span>{
       {row.name}}</span>
            </a-table-column>
     </a-table>

2.使用table组件的时候控制台警示：Each record in dataSource of table should have a unique `key` prop, or set `rowKey` of Table to an unique primary key,  
返回的数据里没有名为key的键值，所以需要在组件上设置这个表是以什么作为key来区别每一行数据的。  
解决：  
使用row-key属性

<a-table  row-key="id"   ...  >
          ...
    </a-table>

3.警告：Duplicate keys detected: ‘7(1/2/3…)’. This may cause an update error.  
这个警告也是key的设置问题，一是没有设置row-key，二是row-key的值设置错了。  
解决：  
一般是以id作为每一行数据的key，自行判断。

4.设置defaultExpandAllRows无效。  
在组件还没拿到datasource值的时候不会生效而且只在第一次渲染的时候起作用。  
解决：  
先判断已经有了datasource值，比如在a-table外面包一层div或者其他组件

<a-card v-if="data && data.length" :bordered="false">
       <a-table
            bordered
            :data-source="data"
            :indent-size="15"
            row-key="id"
            :default-expand-all-rows="true"
            size="middle"
            :pagination="false"
          >
          .....
       </a-table>
    </a-card>

[https_blog.csdn.net_qq_26769677_article_details_88794507]: https://blog.csdn.net/qq_26769677/article/details/88794507