vue系列【element ui table中render函数加if的使用】

摘要：在table中  某一列数据的字段展示不同，可以使用render函数加if实现效果

 数据是这样的：

data: [
          {
            type: 0,
          },
          {
            type: 0,
          },
          {
            type: 0,
            children: [
              {
                type: 1,
              },
              {
                type: 1,
              },
            ],
          },
          {
            type: 0,
          },
          {
            type: 0,
          },
          {
            type: 0,
          },
        ],

实现代码：

column: [
         
          {
            prop: "type",
            label: "类型",
             "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>
              );
            },
          },
        ]

最终实现效果：