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;
      }
    }
  }
相关推荐
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
前端工作日常9 小时前
我学习到的Vue2.6的prop修饰符
vue.js
小菜全10 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
wow_DG10 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_4569042710 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
ST.J10 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记
还有多远.12 小时前
jsBridge接入流程
前端·javascript·vue.js·react.js
半花14 小时前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js
我的名字帅不帅14 小时前
使用 Element UI -Container 布局容器时监听屏幕滚动无效
vue.js