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

最新推荐文章于 2026-02-25 07:25:54 发布

原创最新推荐文章于 2026-02-25 07:25:54 发布 · 2.6k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了在Vue项目中，如何利用jsx语法来实现表格组件中复杂的条件渲染。通过示例展示了如何根据row.type的值动态设置el-tag的type和显示文字，从而达到灵活控制表格展示的效果。

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,
          },
        ],