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;
      }
    }
  }
相关推荐
天下无贼25 分钟前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_2 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing2 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
最后一个农民工4 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
艾小码7 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
wusp19948 小时前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
森林的尽头是阳光9 小时前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
计算机毕业设计木哥9 小时前
计算机毕设选题推荐:基于Java+SpringBoot物品租赁管理系统【源码+文档+调试】
java·vue.js·spring boot·mysql·spark·毕业设计·课程设计
zero13_小葵司9 小时前
Vue 3 前端工程化规范
前端·javascript·vue.js
Yolanda_20229 小时前
vue-sync修饰符解析以及切换iframe页面进行保存提示功能的思路
前端·javascript·vue.js