element-ui table组件如何使用render属性的实现

2020-06-12 20:52:16易采站长站整理

return `<img style="width:30px;height:30px" src='${pic}' />`
}},
{label:'操作',prop:'operate',id:3,render:({text})=>{
return `<div style="color:#999">${text}</div>`
}},
],
tableList:[
{name:'章三',pic:'https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c192f6.png',text:'新增'},
{name:'里斯',pic:'https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c2797e.png',text:'删除'},
{name:'网舞',pic:'https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c33144.png',text:'跳转'},
] }
}
}
</script>

结尾

有了render属性,可以想 ant-design 那样简洁的属性 ui组件模版了!