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;
      }
    }
  }
相关推荐
wzyoung18 分钟前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
枣把儿1 小时前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
paopaokaka_luck2 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
一大树2 小时前
Vue3祖孙组件通信方法总结
前端·vue.js
coder_zhx2 小时前
Vue3自定义编程式弹窗
前端·vue.js
独立开阀者_FwtCoder3 小时前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者3 小时前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder3 小时前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder3 小时前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
rui锐rui3 小时前
商品销售数据分析实验
vue.js·数据挖掘·数据分析