el-tree基础渲染

  • el-tree 每个节点左右布局
  • 鼠标经过接电视,左边文字变色,右边不变
html 复制代码
<el-tree
        :data="list"
        :props="defaultProps"
        default-expand-all
        :expand-on-click-node="false"
      >
        <template #default="{ data }">
          <el-row
            style="width: 100%; height: 40px"
            type="flex"
            align="middle"
            justify="space-between"
          >
            <el-col :span="16">{{ data.name }}</el-col>
            <el-col :span="6" class="right">
              <span>{{ data.managerName }}</span>
              <el-dropdown @command="operateDept($event,data.id)">
                <span class="el-dropdown-link">
                  操作
                  <i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                  <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                  <el-dropdown-item command="del">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </template>
      </el-tree>
css 复制代码
.el-tree {
    ::v-deep .el-tree-node__content {
      width: 100%;
      height: 40px;
      &:hover {
        color: blue;
      }
    }
    .el-row {
      .right {
        width: 200px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
相关推荐
kakacc:21 分钟前
SpringBoot+Hutool+Vue实现导出
java·vue.js·spring boot
徐小夕3 小时前
花了4个月时间,我写了一款支持AI的协同Word文档编辑器
前端·vue.js·后端
paopaokaka_luck5 小时前
基于SpringBoot+Vue的少儿编程培训机构管理系(WebSocket及时通讯、协同过滤算法、Echarts图形化分析)
java·vue.js·spring boot·后端·spring
Gazer_S6 小时前
【前端状态管理技术解析:Redux 与 Vue 生态对比】
前端·javascript·vue.js
小光学长6 小时前
基于Vue的图书馆座位预约系统6emrqhc8(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Y学院6 小时前
vue的组件通信
前端·javascript·vue.js
Greg_Zhong7 小时前
vue项目安装使用,npm、webpack版本问题注意
vue.js·npm版本、webpack版本
岁月宁静8 小时前
AI聊天系统 实战:打造优雅的聊天记录复制与批量下载功能
前端·vue.js·人工智能
加洛斯8 小时前
Vue 知识篇(2):浅谈Vue中的DOM与VNode
前端·javascript·vue.js
Never_Satisfied9 小时前
在JavaScript中,map方法使用指南
前端·javascript·vue.js