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


效果

Vue Ant Design Vue table customRender()函数 + h()函数_第1张图片

一、介绍

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



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

你可能感兴趣的:(Ant,Design,Vue,Vue3,vue.js,前端,javascript)