el-tree点击时改变字体颜色+根据返回数据改变字体颜色

野性酷女 2023-01-17 11:55 560阅读 0赞

1.点击时字体为蓝色，state=1

过滤返回数据：state=0为灰色，state=1颜色正常

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

2.html

<el-tree ref="tree" class="filter-tree check" :class="isCheck=='1'?'start':''" :data="data" default-expand-all
              node-key="id" :filter-node-method="filterNode" :props="defaultProps" @node-click="handleNodeClick">
              <span class="custom-tree-node"
                :class="data.state == 1 ? 'selling-category' : (data.state == 0 ? 'seckill-category' : 'common-category')"
                slot-scope="{data}">
                <span>
                  {
       {data.code}}{
       { data.label}}
                </span>
              </span>
            </el-tree>

3.js

handleNodeClick(data) {
            console.log('它本身', data)
            this.isCheck = data.state
            console.log(this.isCheck)
    
          },

4.css

$stop: #ccc;
          $start: #409EFF;
          $default: #606266;
    
          .start .el-tree-node:focus>.el-tree-node__content {
            color: $start !important;
            background-color: #fff; //节点的背景颜色//节点的字体颜色
          }
    
          .custom-tree-node .selling-category {
            color: $default;
          }
    
          .seckill-category {
            color: $stop;
          }
    
          .common-category {
            color: $default;
          }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: /images/20221021/d06c2bff6cee4e1fa522af06f7750539.png