elementui - tree 自定义节点内容（只允许操作父节点）

最新推荐文章于 2024-04-09 17:48:59 发布

Condeys

最新推荐文章于 2024-04-09 17:48:59 发布

阅读量859

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/Condeys/article/details/117691042

版权

去掉子级复选框：

.el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {

display: none;

}

.el-tree .el-tree-node .el-checkbox .el-checkbox__inner {

display: inline-block;

}

添加样式即可

去掉操作：

render-content中使用jsx语法

isShow判断是否需要展示

数据格式如下：

<template>
  <div class="app-container">
    <div class="mail">
      <div class="mail-left">
        <div class="mailDetil-tit">全部通讯录</div>
        <div class="mailDeetil-cont">
          <div class="block">
            <el-tree
              :data="data"
              show-checkbox
              node-key="id"
              accordion
              default-expand-all
              :expand-on-click-node="false"
              :render-content="renderContent"
            >
            </el-tree>
          </div>
        </div>
      </div>
      <div class="mail-right">
        <header>
          <div class="seat">
            <el-button @click="handeladd" class="search">移动</el-button>
            <el-button @click="handeladdUser" class="search">删除</el-button>
          </div>
          <div class="header_rignt">
            <div class="operation">
              终端号码：
              <el-input
                style="width: 230px"
                v-model="search.user"
                placeholder="请输入终端号码搜索"
              ></el-input>
            </div>

            <el-button @click="handelSearch" type="primary" class="search"