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

目录

效果

一、介绍

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

 欢迎扫码下方二维码关注VX公众号