Ant Design Vue a-table标签使用插槽slot写column时，调用record提示无法获取record的属性

最新推荐文章于 2025-06-11 16:29:01 发布

原创

最新推荐文章于 2025-06-11 16:29:01 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#深度优先 #算法 #npm

在项目中遇到Ant Design Vue的a-table组件使用插槽slot定义column时，遇到record属性访问问题。当slot名称与table的属性title冲突时，虽然record能被正确渲染，但访问record的属性会报错。解决方案是避免slot名字与table属性重名，确保属性访问的安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在项目时遇到一个小bug，出现的原因也有点细，不仔细看还真看不出来，记录一下，希望下次不要因为这种小问题调bug了。

问题描述：

a-table中的solt如下

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

colomn中的title写法如下

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

而页面显示如下，发现取record是可以成功取到并渲染的，record也有title属性

但是在取record.title时，页面报错，找不到title属性

解决：

仔细看了一眼发现，在加了solt插槽名为title后，表格上方多出了一项title行，忽然想到slot除了用来写column，也可以重写属性，而恰好table标签有title属性，导致了冲突。但是根据结果来看，在渲染时，该slot相当于公用给了title属性和column的title列，所以仅取record是没有问题的，但是取record属性时，由于table的title属性并