vue element tree組件，根據不同的狀態顯示不同的字體顏色

HTML

 <el-tree
      :data="data"
      :props="defaultProps"
      @node-click="handleNodeClick"
      :render-content="renderContent"
      :highlight-current="true"
  ></el-tree>

data

把帶status為1的顏色變為紅色，其余的變為綠色

   data: [
        {
          label: "一級 1",
          children: [
            {
              label: "二級 1-1",
              children: [
                {
                  label: "三級 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一級 2",
          children: [
            {
              label: "二級 2-1",
              children: [
                {
                  label: "三級 2-1-1",
                },
              ],
            },
            {
              label: "二級 2-2",
              children: [
                {
                  label: "三級 2-2-1",
                  status: 1,
                },
              ],
            },
          ],
        },
        {
          label: "一級 3",
          children: [
            {
              label: "二級 3-1",
              children: [
                {
                  label: "三級 3-1-1",
                  status: 1,
                },
              ],
            },
            {
              label: "二級 3-2",
              children: [
                {
                  label: "三級 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },

render-content的使用

 handleNodeClick(data) {
      console.log(data);
    },
    renderContent(h, { node, data, store }) {
      if (data.status == 1) {
        return <span style="color:red">{node.label}</span>;
      } else {
        return <span style="color:green">{node.label}</span>;
      }
    },

效果圖