【VUE】el-tree根据不同状态，显示不同颜色

最新推荐文章于 2024-05-27 14:23:55 发布

可可肉粒多ོ༙༽

最新推荐文章于 2024-05-27 14:23:55 发布

阅读量355

点赞数 2

分类专栏： VUE 文章标签： javascript servlet java

本文链接：https://blog.csdn.net/take_it_easy_hes/article/details/130759237

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

:render-content="renderContent"

<el-tree
                class="filter-tree"
                :data="pluginDatasourceLinkTreeData"
                :props="{
                      value: 'id',             // ID字段名
                      label: 'name',         // 显示名称
                      children: 'children',   // 子级字段名
                      disabled: function (data, node) {
                        if (data.isEnable !== '1') {
                          return !data.leaf
                        }
                      }
                    }"
                default-expand-all
                highlight-current
                node-key="id"
                :filter-node-method="filterNode"
                :expand-on-click-node="false"
                @node-click="handleNodeClick"
                :render-content="renderContent"
                ref="pluginDatasourceLinkTree">
                   <span class="custom-tree-node" slot-scope="{ node, data}">
                    <span :style="{ color: data.isEnable === '0'? 'red': 'black'}">{{ node.label }}</span>
<!--                    <span>
                        <el-button type="text" class="tree-item-button" icon="el-icon-plus" @click="() => addChildTreeNode(data)"></el-button>
                        <el-button type="text" class="tree-item-button" icon="el-icon-edit-outline" @click="() => editTreeNode(data)"></el-button>
                        <el-button type="text" class="red tree-item-button" icon="el-icon-delete" @click="() => delTreeNode(data)"></el-button>
                    </span>-->
                  </span>
              </el-tree>

renderContent (h, { node, data, store }) {
  if (data.hasOwnProperty('isNormal')) {
    if (data.isNormal === '1') {
      return <span style="font-size: 14px;">{node.label}</span>
    } else {
      return <span style="font-size: 14px;color:red">{node.label}</span>
    }
  } else {
    return <span style="font-size: 14px;">{node.label}</span>
  }
},