目录
效果
一、介绍
1、官方文档:
(1)customRender()函数Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js
(2)h()函数
2、定义
(1)customRender()函数
(2)h()函数
tips:
二、准备工作
1、安装依赖包
2、示例版本
三、使用步骤
1、在main.ts引入
2、具体使用
四、完整示例
1、main.ts
2、example.vue
tips
拓展
dataIndex
效果
一、介绍
1、官方文档:
(1)customRender()函数Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js
(2)h()函数
渲染函数 & JSX | Vue.js
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 // null
tips:
完整的 VNode
接口包含其他内部属性,但是强烈建议避免使用这些没有在这里列举出的属性。这样能够避免因内部属性变更而导致的不兼容性问题。
渲染函数 & JSX | Vue.js
二、准备工作
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-vue
Ant 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