vue+element表格中使用render函數(if判斷處理)

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上嘗試了一下 有效果 其他地方沒試過