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

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

 

本文链接：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>

•