今日、プロジェクトで小さなバグに遭遇しました。その理由は少し微妙です。注意深く見ないと、実際にはわかりません。記録して、バグを調整しないことを願っています。この小さな問題については次回にお話します。
問題の説明:
a-table のソルトは次のとおりです
<template slot="title" slot-scope="text, record">
<a @click="onDetail(record)">{
{ record }}</a>
</template>欄のタイトルは次のように書かれます
{
title: "标题",
scopedSlots: { customRender: "title" },
align: "center"
},以下のようにページが表示され、レコードが正常に取得・表示できており、レコードにはtitle属性も付いていることが分かります。
しかし、record.title を取得すると、ページはエラーを報告し、title 属性が見つかりませんでした。
解決：
よく見てみると、title という名前のソルト スロットを追加した後、テーブルの上に余分なタイトル行があることがわかりました。スロットは列の書き込みだけでなく、属性の書き換えにも使用できるのではないかと突然思いつきました。 table タグに title 属性があるため、競合が発生しました。しかし結果によれば、レンダリングする際、スロットはタイトル属性とカラムのタイトルカラムを共有することに相当するので、レコードを取るだけなら問題ないのですが、レコード属性を取ると、テーブルにはレコードがありません。レコードを取得してください。プロパティが見つからない場合は、エラーが報告されます。
最初に属性書き換えの競合が見つからなかったときは、v-if を追加して判定するだけで正常にレンダリングされました。(属性が見つからない場合は、オブジェクトが存在するかどうかを判断するために非 null チェックを追加する必要があります)
<template slot="title" slot-scope="text, record">
<a @click="onDetail(record)" v-if="record">{
{ record.title }}</a>
</template>しかし、よく見てみると余分な行があり、列名の問題であることがわかり、最終的な解決策はタイトル名を置き換えることで終わりです。
<template slot="noticeTitle" slot-scope="text, record">
<a @click="onDetail(record)" v-if="record">{
{ record.title }}</a>
</template> {
title: "标题",
scopedSlots: { customRender: "noticeTitle" },
align: "center"
},要約:
a-table のカラム名自体はテーブル自身の属性と競合しないので気にする必要はありませんが、スロットを使用する場合は属性名との重複を避ける必要があります。また、オブジェクトのプロパティを使用する前に、オブジェクトが空でないことを判定する必要があります。