antd vue table customRender 与 scopedSlots

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

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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
Antd 表格组件的 `customRender` 和 `scopedSlots` 是用于自定义表格单元格内容的两种不同方式。 `customRender` 是一个函数,用于自定义表格单元格的渲染内容。你可以在函数中根据传入的参数来返回自定义的渲染结果。 `scopedSlots` 是一个插槽,用于自定义表格单元格的内容。你可以在插槽中编写自定义的 HTML 或组件,并将其作为表格单元格的内容。 当 `customRender` 和 `scopedSlots` 同时存在时,Antd 表格组件会优先使用 `customRender` 来渲染单元格内容。这意味着,如果你同时使用了 `customRender` 和 `scopedSlots`,`scopedSlots` 中的插槽将会失效。 如果你想要使用 `scopedSlots` 来自定义表格单元格的内容,可以将 `customRender` 的值设为 `undefined` 或 null,这样 Antd 表格组件就会使用 `scopedSlots` 来渲染单元格内容。 以下是一个示例代码: ```vue <template> <a-table :columns="columns" :data-source="data"> <template v-slot:title> Custom Table </template> <template v-slot:name="{ text }"> <span style="color: red">{{ text }}</span> </template> </a-table> </template> <script> export default { data() { return { columns: [ { title: 'Name', dataIndex: 'name', customRender: undefined, // or null scopedSlots: { customRender: 'name' } }, { title: 'Age', dataIndex: 'age' }, { title: 'Address', dataIndex: 'address' } ], data: [ { name: 'John Doe', age: 30, address: 'New York' }, // ... ] }; } }; </script> ``` 在上面的示例中,我们将 `customRender` 的值设为 `undefined`,并在 `scopedSlots` 中使用 `name` 插槽来自定义 `Name` 列的内容。这样,`scopedSlots` 中的插槽就会生效,并且 `Name` 列的单元格内容会渲染为红色字体。 希望以上解答能对你有帮助!如有任何疑问,请随时提问。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值