本文详细介绍了如何使用iView的render方法自定义表格内容，包括文本、样式、事件处理、数据处理、多条件判断、悬浮气泡、图片显示等，并提供了具体的代码示例。此外，还涉及到表格的特定样式、滚动条、固定列、多选和单选功能的实现。
零、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;
}
最低0.47元/天 解锁文章
497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
