Ant Design Vue 表格自定义渲染指南：高效单元格内容控制

2025-01-02 00:11:18

Ant Design Vue 表格单元格自定义渲染方案

在 Ant Design Vue 中使用表格时，常常需要对单元格的内容进行自定义渲染。customRender 属性提供了这样的能力，允许开发者控制单元格内容的显示方式。然而，不正确的使用方式可能导致内容显示不符合预期。以下是一些常见的问题以及对应的解决办法。

问题：直接返回 HTML 字符串

一种常见误解是将 HTML 字符串直接返回，期望 Ant Design Vue 能够正确解析并渲染。这通常导致字符串以纯文本的形式显示，而不是被当作 HTML 处理。

错误用法：

columns: [
    { title: 'Design',
      dataIndex: 'designImage.fileUrl',
      customRender () {
        return '<div id="foo">bar</div>'
      }
    }
]

原因分析: customRender 返回的通常是 VNode （虚拟节点），不是 HTML 字符串。直接返回字符串，Vue 会把它作为文本节点对待。

正确方法：使用 VNode 或者组件

Ant Design Vue 推荐使用 Vue 的 h 函数 (render 函数中的 createElement ) 创建 VNode，或直接使用组件进行渲染。 customRender 的函数将会接收到 text，record, 和 index 作为参数。可以使用此方法返回 Vue 的渲染对象，比如VNode。另外，它也可以是一个自定义组件，可以灵活的处理表格单元格内的内容显示。

方案一：使用 h 函数

使用 h 函数是创建 VNode 的直接方式。

代码示例：

import { h } from 'vue';

const columns = [
  {
    title: 'Design',
    dataIndex: 'designImage.fileUrl',
    customRender: (text, record) => {
       return h('div', { id: 'foo' }, 'bar');
    },
  },
];

操作步骤：

确保 vue 和 @ant-design/icons-vue 已经安装到项目中。
导入 Vue 的 h 函数。
在 customRender 中，使用 h 函数创建包含指定内容的 div 元素，或者根据 text 以及 record 返回动态内容。
将数据传入Ant Design Vue table 组件的 data 数据源即可。

方案二：返回 Vue 组件

若单元格内容复杂，建议创建独立的 Vue 组件进行渲染，代码可复用，也更易维护。

代码示例：

首先创建一个图片展示的组件 ImageDisplay.vue。

<template>
  <img :src="imageUrl" :alt="imageAlt" style="max-width: 100px; max-height: 100px;" />
</template>

<script>
export default {
  props: {
    imageUrl: {
        type: String,
        default: ""
    },
    imageAlt: {
        type: String,
        default: ""
    }
  }
};
</script>

然后在表格的列定义中使用该组件。

import ImageDisplay from './ImageDisplay.vue'; // 组件路径，按实际情况更改

const columns = [
  {
    title: 'Design',
    dataIndex: 'designImage.fileUrl',
    customRender: (text, record) => {
        return  {
              component: ImageDisplay,
              props: {
                 imageUrl:  text || "https://via.placeholder.com/300.png/09f/fff",
                 imageAlt: 'Image'
              }
            }
    },
  },
];

操作步骤:

创建一个 Vue 单文件组件，用于渲染自定义单元格内容。
在 columns 中，在 customRender 中返回对象，此对象需包含 component 属性和一个props属性来传递参数。text, record 是很有用的两个数据源，可以使用这些数据做各种定制化展示。
把数据传递给 Ant Design Vue table 组件。

附加提示：

当单元格内容较多或者频繁变化时，使用组件渲染能够提高渲染效率和维护性。
可以给 image标签添加css控制样式，使其样式更灵活。例如 max-width, max-height 等来约束图片的尺寸，防止撑破表格布局。
根据实际业务需求，选择适合的方法自定义单元格内容。

问题：`children` 属性使用错误

另外一个常见的错误是使用了 children 属性包裹 HTML 字符串。这样做不能直接让 Ant Design Vue 渲染出对应的 HTML 内容。它会按照它的预设逻辑对待。

错误用法：

{
    title: 'Design',
    dataIndex: 'designImage.fileUrl',
    customRender: (text, record, index) => {
        return {
           children: '<img src="https://via.placeholder.com/300.png/09f/fff">'
        }
   }
}

原因分析： children 主要用于 JSX 场景。对于函数式返回结果，需要使用上述正确的方案。

解决方案: 同样应该返回VNode，参考方案一、方案二即可。

结论

通过理解 customRender 的正确用法，开发者可以在 Ant Design Vue 表格中灵活自定义单元格内容，以满足不同的显示需求。避免直接返回 HTML 字符串，以及使用不必要的children 属性。选择合适的 VNode 创建方法或组件渲染，可以实现更强大、更灵活的表格自定义效果。记住 text, record , index 这三个参数可以在 customRender 里很好的利用起来，实现动态渲染内容的目的。