iView 表格render 函数的使用

最新推荐文章于 2025-05-13 14:34:18 发布

Ma_CaiCai

最新推荐文章于 2025-05-13 14:34:18 发布

阅读量4.8k

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_62900544/article/details/122177335

本文详细介绍了在iView中如何使用render函数，包括基本语法、数据处理、样式定制、滚动条、固定列、多选和单选功能的实现。特别提示，避免在render和return之间进行赋值操作，以免引发无限刷新。同时，提供了行级和列级的样式设置方法，以及如何处理点击事件和显示图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

零、render

1、语法

以下分别定义了：标签名称，（样式，事件等综合内容），显示内容

render: (h, params) => {
    return h('span', {
        style: {
           color: '#FF7D41'
        },
        on: {
            click: () => {
                console.log(params)
            }
        }
    }, '点击');
}

2、举个简单栗子

render: (h, params) => {
    return h('span', 'hello');
}

3、显示多个内容

render: (h, params) => {
    return h('div', [
        h('span', params.row.name),
        h('span', ' ('+params.row.age+')')
    ]);
}

4、对数据进行处理

在数据返回之前可以进行任何数据处理

1>时间格式转换

render: (h, params) => {
    let time = this.$moment(params.row.time).format('YYYY-MM-DD HH:mm:ss')
    return h('span', time);
}

2>数据处理：数组拼接字符串等

render: (h, params) => {
    let str = ''
    for (let i = 0, len = params.row.arr.length; i < len; i++) {
        str += `${params.row.arr[i].name}-${params.row.arr[i].age} | `
    }
    return h('span', str);
}

3>多情况判断

render: (h, params) => {
    if (params.row.age > 18) {
        return h('span', '未成年');
    }else {
        return h('span', '成年');
    }
}

render: (h, params) => {
    switch (params.row.num) {
        case 1:
            return h('span', '你');
            break;
        case 2:
            return h('span', '好');
            break;
        case 3:
            return h('span', '啊');
            break;
    }
}

4>点击事件

render: (h, params) => {
    return h('span', {               
        on: {
            click: () => {
                // 这里通常做路由跳转，弹窗显示，发送请求等
            }
        }
    }, '点击');
}

5>样式处理：文本溢出以省略号显示