vue+element表格中使用render函数(if判断处理)

Posted 2021-05-29 以罗伊

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上尝试了一下 有效果 其他地方没试过