vue AntDesign中关于 #[ ] 的困惑

在ant Design的关于实现可编辑单元格的代码中，
但是有一段代码没看明白，网上没有找到相关的语法的说明，请问有 哪位同学可以帮我解释下吗？谢谢啦

<template>
  <a-table :columns="columns" :data-source="dataSource" bordered>
    <template v-for="col in ['name', 'age', 'address']" #[col]="{ text, record }" :key="col">

1、v-for="col in ['name', 'age', 'address']" 循环遍历， #[col]="{ text, record }"中，text表示当前单元格内容，record 表示当前行，但#[col]这种写法没有见过，请问表示是什么意思？

2、可以帮忙解释一下 <template v-for="col in ['name', 'age', 'address']" #[col]="{ text, record }" :key="col"> 这句的实现过程吗？

1. #[col]="{ text, record }" 是一个 Vue 的语法，它被称为 "属性选择器"。在这个例子中，#[col] 是一个特殊的语法糖，它等价于 :ref。:ref 是一个 Vue 的特性，它允许你在 Vue 组件的 JavaScript 代码中通过 this.$refs 来访问 DOM 元素或子组件。

在你的代码中，#[col]="{ text, record }" 等价于 :ref="col" { text, record }。也就是说，每一个被 v-for 循环生成的单元格都被赋予了一个对应的 ref，这个 ref 的名字就是 col。然后你可以通过 this.$refs[col] 来访问这个单元格。

2. 这句代码的实现过程如下：

<!-- 假设 dataSource 是一个数组，它包含了多个对象，每个对象都有 'name', 'age', 'address' 这几个属性 -->
<!-- 先循环遍历 'name', 'age', 'address' 这几个字段 -->
<!-- 在循环中，创建一个特殊的模板，这个模板会为每一个字段生成一个单元格 -->
<!-- 在这个单元格中，你可以通过 this.$refs[col] 来访问这个单元格 -->

这个特殊的语法可以用来在 Vue 的模板中动态地创建元素或组件，并且给这些元素或组件赋予一个唯一的 ref。这样，你就可以在 Vue 的 JavaScript 代码中通过这个 ref 来访问这些元素或组件。