0 环境
系统环境：win10
1 问题描述
使用别人集成好的table插件 复杂表格使用render操作 搜了一下render+if判断基本上是介绍createElement怎么用(也可能是我搜索姿势不对) 没爱了 我就想加2个判断 把值塞到标签里
2 解决
官网上写 在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上 react也有JSX语法 我直接试试用react写法写vue render函数
1 对应列 column
column: [
{
prop: "type",
label: "类型",
width: "100",
render: (h, scope) => {
let type = "";
let typeVal = "";
if (scope.row.type === 0) {
type = "";
typeVal = "目录";
} else if (scope.row.type === 1) {
type = "success";
typeVal = "菜单";
} else if (scope.row.type === 2) {
type = "info";
typeVal = "按钮";
}
return (
<el-tag size="small" type={type}>
{typeVal}
</el-tag>
);
},
},
]
2 对应列的数据 data
data: [
{
type: 0,
},
{
type: 0,
},
{
type: 0,
children: [
{
type: 1,
},
{
type: 1,
},
],
},
{
type: 0,
},
{
type: 0,
},
{
type: 0,
},
],
3 效果
在这里插入图片描述
3 总结
只在table上尝试了一下 有效果 其他地方没试过
