零、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;
}