Vue Ant Design Vue table customRender()函数 + h()函数
生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引。
文章共2,517字 · 阅读需要大约9分钟
目录
（1）customRender()函数Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js
效果
一、介绍
1、官方文档：
（1）customRender()函数Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js
（2）h()函数
2、定义
（1）customRender()函数
| customRender | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引 | Function({text, record, index, column}) {} |
（2）h()函数
h() 是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是 createVnode()，但当你需要多次使用渲染函数时，一个简短的名字会更省力。
h() 函数的使用方式非常的灵活，除了类型必填以外，其他的参数都是可选的
const vnode = h('div', { id: 'foo' }, [])
vnode.type // 'div'
vnode.props // { id: 'foo' }
vnode.children // []
vnode.key // nulltips：
完整的 VNode 接口包含其他内部属性，但是强烈建议避免使用这些没有在这里列举出的属性。这样能够避免因内部属性变更而导致的不兼容性问题。
二、准备工作
1、安装依赖包
# 选择一个你喜欢的包管理器
# NPM
$npm install ant-design-vue --save
#Yarn
$ yarn add ant-design-vue注：也可以在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 antd。
Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js
2、示例版本
"ant-design-vue": "^3.2.12",三、使用步骤
1、在main.ts引入
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
app.use(Antd);2、具体使用
customRender: ({ text, record }) => {
const textStyle = !text ? { display: 'none' }: '';
const iconStyle = text < 180 ? { color: 'green', marginRight: '5px' } : text > '180' ? { color: 'red', marginRight: '5px' } : '';
const iconNode = text ? LineHeightOutlined : '';
return h('span', { style: textStyle }, [h(iconNode, { style: iconStyle }), text + 'cm' ])四、完整示例
1、main.ts
import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
const app = createApp(App);
app.use(Antd);
app.mount("#app");2、example.vue
<template>
<a-table :columns="columns" :data-source="data" />
</template>
<script lang="ts" setup>
import type { TableColumnType } from 'ant-design-vue';
import { h } from 'vue';
import { LineHeightOutlined } from '@ant-design/icons-vue';
type TableDataType = {
key: string;
name: string;
detail: object,
};
const columns: TableColumnType<TableDataType>[] = [
{
title: '姓名',
dataIndex: 'name',
},
{
title: '身高',
dataIndex: ['detail', 'height'],
customRender: ({ text, record }) => {
const textStyle = !text ? { display: 'none' }: '';
const iconStyle = text < 180 ? { color: 'green', marginRight: '5px' } : text > '180' ? { color: 'red', marginRight: '5px' } : '';
const iconNode = text ? LineHeightOutlined : '';
return h('span', { style: textStyle }, [h(iconNode, { style: iconStyle }), text + 'cm' ])
},
},
{
title: '体重',
dataIndex: ['detail', 'weight'],
},
];
const data: TableDataType[] = [
{
key: '1',
name: '张三',
detail: {
height: 180,
weight: 165,
},
},
{
key: '2',
name: '李四',
detail: {
height: 178,
weight: 146,
},
},
{
key: '3',
name: '王五',
detail: {
height: 182,
weight: 168,
},
},
{
key: '4',
name: '赵六',
detail: {
height: 185,
weight: 160,
},
},
];
</script>
tips
由于本文中引用了icon，因此需要安装icon包
1、安装依赖包
npm install --save @ant-design/icons-vueAnt Design Vue — An enterprise-class UI components based on Ant Design and Vue.js
2、示例版本
"@ant-design/icons-vue": "^6.1.0",拓展
dataIndex
从 v1 / v2 升级到 v3 #
此外，比较重大的改动为 dataIndex 从支持路径嵌套如 user.age 改成了数组路径如 ['user', 'age']。以解决过去属性名带 . 需要额外的数据转化问题。
Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js
欢迎扫码下方二维码关注VX公众号
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)