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

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>

你可能感兴趣的:(vue)