Vue2设置el-tree数据处理、点击事件、色彩调整

Ling_5230

已于 2024-07-23 17:15:03 修改

阅读量261

点赞数 1

文章标签： elementui javascript 前端

于 2024-07-23 17:14:55 首次发布

本文链接：https://blog.csdn.net/Ling_5230/article/details/140640752

版权

1.后端给的数据没有el-tree要求的label和children，所以需要自行处理一下

2.一级节点和二级节点需要不同的点击效果，需要设置

3.默认选中的背景色和字体色以及鼠标悬停的背景色都需调整

1.处理数据

<div class="PsyText-bottom-tbody">
    <el-tree :data="videoData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>

video_review(res.data.roomNo).then(res => {
   console.log(res);
   const data1 = res.data.map(item => ({
      id: item.id,
      beginTime: item.beginTime,
      endTime: item.endTime,
      label: `${item.interrogated}：${item.beginTime} 至${item.endTime}`,
      children: item.alertInfos.map(alert => ({
      id: alert.id,
      label: `报警时间：${alert.createTime}`
    })),
   videoUrl: item.videoUrl
 }))
    this.videoData = data1

2.点击事件

handleNodeClick(data, node, component) {
      if (node.level === 1) {
        this.handleFirstLevelClick(data, node, component);
      } else if (node.level === 2) {
        this.handleSecondLevelClick(data, node, component);
      }
},
handleFirstLevelClick(data, node, component) {
      // 处理一级节点的点击事件
      console.log('一级节点被点击:', data);
      if (data.videoUrl) {
        this.textvideoUrl = data.videoUrl
        this.videoBeginTime = data.beginTime
        this.videoEndTime = data.endTime
      }
},
handleSecondLevelClick(data, node, component) {
      // 处理二级节点的点击事件
      console.log('二级节点被点击:', data);
     
},

3.调整背景色

/* 正常显示时节点的背景颜色 */
::v-deep .el-tree-node__content {
  background-color: transparent;
}
/* 鼠标点击时节点的背景颜色 */
::v-deep .el-tree-node:focus>.el-tree-node__content {
  background-color: transparent
}

/* ::v-deep .is-current>.el-tree-node__content:first-child {
  background-color: #08a8a0
} */
/* 鼠标选中后节点的背景颜色 */
::v-deep .el-tree-node.is-current>.el-tree-node__content {
  background-color: #cccccc;
}