ant-vue组建a-table里的customRender里获取当前的key值

马娟

于 2021-12-31 16:55:30 发布

阅读量2.3k

点赞数

分类专栏： antd 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_41077029/article/details/122259186

版权

antd 专栏收录该内容

16 篇文章

订阅专栏

这篇博客介绍了在Vue.js应用中如何使用`<a-table>`组件，并通过`slots`属性自定义列的渲染方式。文章展示了如何定义`columns`数组，包括设置`customRender`属性来指定模板内的插槽，以及在`<template>`中处理`names`插槽，展示`name`字段的数据。

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

<template>
<a-table
:columns="columns"
>
<template #names="{ column, record ,index,text}">
       
  //column 为{  title: 'name',
    dataIndex: 'name',
    key: 'name',}
      </template>
</a-table>
</template>
<script>

import {
  defineComponent,
  nextTick,
  watch,
  computed,
  ref,
} from "vue";


export default defineComponent({
  props: {
  },
  setup(props, { emit }) {
    const columns=ref(
[
  {
    title: 'name',
    dataIndex: 'name',
    key: 'name',
    slots: {
      customRender: 'names',
    },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
])
    
    return {
      columns,
    };
  },
});
</script>