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

最新推荐文章于 2025-02-08 18:38:43 发布

原创最新推荐文章于 2025-02-08 18:38:43 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

antd 专栏收录该内容

16 篇文章

订阅专栏

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

部署运行你感兴趣的模型镜像

<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>

您可能感兴趣的与本文相关的镜像