使用ant-design-vue的table组件，部分table列通过自定义插槽渲染内容，如何获取当前列的key

Question

项目使用ant-design-vue，通过antd提供的scopedSlots: { customRender: 'columnName' }和v-slot搭配的方式来展示部分列的自定义内容。

存在一种可能的情况：这个table组件是多个页面共用的table模板，且当一个页面里有2个或者多个列同时使用一个自定义插槽内容时，执行插槽里的事件时该如何获取当前的列的key或者字段key。

例子：

字段name和age共用一个插槽，当点击插槽content1的内容时，我要如何区分这事件是在name列还是在age列执行的，之后才能进行后续的业务逻辑。

Answer 1

把key传进点击的回调？@click="onClick(key)"

Answer 2

先设置table行的key值才可以点击获取到

<Table rowKey={record => record.uid} />;

https://www.antdv.com/components/table-cn/#components-table-demo-template-style-api

最底部有说明

Answer 3

功夫不负有心人我拿到key了 {{column.dataIndex}}

<span slot="aaaa" slot-scope="text, record, index, column">

      {{column.dataIndex}}
      <a-switch
        :defaultChecked="!!text"
        @click="tableSwitch"
        :act_id="record.id"
        :act_type="column.dataIndex"
      />
    </span>

Answer 4

在vue2项目中使用的antdesign版本应该是1.x。由于不支持一些新的写法，可以尝试自定义列的一些数据，然后在html循环渲染插槽实现拿到key值。

 <template v-for="(item,index) in tableColumns" :slot="item.dataIndex" slot-scope="text, record,index">
          {{text}}
          {{item.dataIndex}}
          {{item.type}}
          <EditableFormItem v-model="record[item.dataIndex]" :type="item.type" />
        </template>

{
          title: '测试title',
          align: "center",
          width: 150,
          dataIndex: 'test',
          scopedSlots: { customRender: 'test' },
          type: 5
        },