Vue Ant Design Vue table customRender()函数 + h()函数

在Vue中，你可以使用customRender方法来自定义表格中的单元格渲染。h()函数是Vue的一个全局函数，用于创建Vue的虚拟DOM节点。

以下是一个简单的例子，展示如何使用customRender和h()函数来自定义表格中的单元格渲染：

<template>
  <a-table :columns="columns" :dataSource="data">
    <template slot="name" slot-scope="text">
      <!-- 使用 customRender 方法自定义渲染 -->
      {{ customRender(h => <span style="color: red;">{text}</span>) }}
    </template>
  </a-table>
</template>
 
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          scopedSlots: { customRender: 'name' }
        },
        // ... 其他列定义
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          // ... 其他数据
        },
        // ... 其他数据行
      ]
    };
  },
  methods: {
    customRender(render) {
      // 使用 h() 创建虚拟DOM节点
      return render(h => h('span', '自定义渲染内容'));
    }
  }
};
</script>

在这个例子中，我们定义了一个名为name的列，并通过scopedSlots指定了自定义渲染的作用域插槽。在customRender方法中，我们使用h()函数创建了一个带有红色文本样式的<span>元素，并将单元格的文本作为子元素插入。这样，表格中的name列将显示具有自定义样式的单元格内容。