When the Ant Design Vue a-table tag uses a slot to write a column, calling record prompts that the attribute of the record cannot be obtained

I encountered a small bug in the project today, and the reason for it is a bit subtle. If you don’t look carefully, you can’t really see it. Record it, and hope that you won’t adjust the bug because of this small problem next time.

Problem Description:

The solt in a-table is as follows

<template slot="title" slot-scope="text, record">
          <a @click="onDetail(record)">{
   
   { record }}</a>
        </template>

The title in colomn is written as follows

  {
    title: "标题",
    scopedSlots: { customRender: "title" },
    align: "center"
  },

The page is displayed as follows, and it is found that the record can be successfully fetched and rendered, and the record also has a title attribute

 

But when fetching record.title, the page reported an error, title attribute could not be found

solve:

After taking a closer look, I found that after adding the solt slot named title, there is an additional title line above the table. Suddenly, I thought that the slot can not only be used to write columns, but also rewrite attributes, and it happens that the table tag has a title attribute. led to a conflict. But according to the results, when rendering, the slot is equivalent to sharing the title attribute and the title column of the column, so there is no problem with only taking the record, but when taking the record attribute, since the title attribute of the table does not have a record, take it An error will be reported when the property is not found.

When I didn't find the attribute rewriting conflict at first, I only added a v-if to judge, and it was successfully rendered. (When the attribute cannot be found, a non-null check should be added to determine whether the object exists)

    <template slot="title" slot-scope="text, record">
          <a @click="onDetail(record)" v-if="record">{
   
   { record.title }}</a>
        </template>

 But after a closer look, I found that there was an extra line, and I realized that it was the problem of the column name. The final solution is to replace the name of the title, and that's it.

    <template slot="noticeTitle" slot-scope="text, record">
          <a @click="onDetail(record)" v-if="record">{
   
   { record.title }}</a>
        </template>

  {
    title: "标题",
    scopedSlots: { customRender: "noticeTitle" },
    align: "center"
  },

 Summarize:

The column name of a-table itself does not conflict with the table's own attributes, so you don't need to care about the name, but once you use a slot, you must avoid duplication with the attribute name. In addition, before using the properties of the object, it is necessary to make a non-empty judgment of the object.