美文网首页
vue+element表格中使用render函数(if判断处理)

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

作者: 曾经很远未来很近 | 来源:发表于2021-05-29 15:42 被阅读0次

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

    相关文章

      网友评论

          本文标题:vue+element表格中使用render函数(if判断处理)

          本文链接:https://www.haomeiwen.com/subject/cqoysltx.html