antd vue table customRender 与 scopedSlots

最新推荐文章于 2025-01-26 08:51:52 发布

izhuoo

最新推荐文章于 2025-01-26 08:51:52 发布

阅读量3.2k

点赞数 1

分类专栏：踩坑 Vue 文章标签： vue ant-design

本文链接：https://blog.youkuaiyun.com/izhuoo/article/details/123798094

版权

踩坑同时被 2 个专栏收录

12 篇文章

订阅专栏

Vue

3 篇文章

订阅专栏

本文探讨了在Ant Design Vue的Table组件中，customRender与scopedSlots无法共存的问题。尽管如此，你可以利用jsx在customRender内实现组件渲染。参考链接提供了关于如何在Antd Vue Table中通过customRender方法来渲染其他组件的示例和jsx的语法说明。

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

ant-design-vue的table组件customRender 与 scopedSlots 如何共存？

答案是不可共存，但是可以在customRender里面写jsx，例如：

{
  title: '模块',
  dataIndex: 'name',
  // scopedSlots: { customRender: 'name' },
  customRender: (text, record, index) => {
    return {
      children: (
        <a-checkbox
          indeterminate={record.indeterminate}
          checked={record.isCheckAllLv2}
          vOn:change={(e) => this.onCheckRoleChange(e, index)}
        >
          {{ text }}
        </a-checkbox>
      ),
      attrs: {
        rowSpan: 1,
      },
    }
  },
},

Table 表格如何通过customRender方法渲染其它组件 · Issue #3424 · vueComponent/ant-design-vue (github.com)https://github.com/vueComponent/ant-design-vue/issues/3424jsx参考：