antd vue table customRender 与 scopedSlots

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

原创最新推荐文章于 2025-01-26 08:51:52 发布 · 3.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #ant-design

踩坑同时被 2 个专栏收录

12 篇文章

订阅专栏

Vue

3 篇文章

订阅专栏

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

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参考：