el-tree默认展开，以及el-tree的其他整理

作者: jesse28 | 来源:发表于2023-03-15 17:55 被阅读0次

如何修改el-tree默认选中项的样式
tree 仅允许勾选同一个层级的数据
element tree 无法默认选中
draggable属性影响input鼠标选中内容
el-tree 二级横向展开其他竖向展开
Vue+element ui树形菜单
element-ui el-tree选择子节点时同时选择并提交父
el-tree加载完成后默认触发点击事件非默认选中（下）支持自定
el-tree一级节点不显示复选框
El-Tree节点名称过长处理

默认选中并且高亮第一行:https://www.cnblogs.com/web-aqin/p/14926651.html
只有点击箭头才会收缩：https://blog.csdn.net/yuyu_2019/article/details/115125692
默认高亮第一条数据:https://blog.csdn.net/xiaoming4965/article/details/128834610

 <el-col :span="4" class="col-top div-col">
        <el-tree ref="treeRef" :expand-on-click-node='false' default-expand-all highlight-current node-key="id" :current-node-key="currentNodekey" :data="depTreeList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-col>

image.png

1.default-expand-all 展开数

:expand-on-click-node="false" el-tree 点击树的文字不要收缩仅点击图标的时候收缩
:current-node-key="currentNodekey" //默认选中节点树 ---默认选中第一个节点

        getLoginUserAvailableDepForTreeOptionApi({ unitId: "all" }).then(
          (res) => {
            this.depTreeList = res;
            if (this.depTreeList.length > 0) {
              this.currentNodekey = this.depTreeList[0].id;
              this.searchForm.depId = this.depTreeList[0].id;
              this.$nextTick(() => {
                this.$refs.treeRef.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
              });
            }
            resolve(res);
          }
        );

<template>
  <div class="container">
    <!-- 搜索框 -->
    <div class="search-box">
      <div class="top-left">
        <el-form :inline="true" label-width="85px">
          <el-form-item label="人员姓名：">
            <el-input style="width: 100%" size="small" v-model="searchForm.name" @keyup.enter.native="getDataList" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item style="margin-left:20px">
            <el-button size="small" type="primary" plain icon="el-icon-search" @click="getDataList">搜索</el-button>
            <el-button size="small" icon="el-icon-refresh-right" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
    <el-row>
      <!-- 树结构 -->
      <el-col :span="4" class="col-top div-col">
        <el-tree ref="treeRef" :expand-on-click-node='false' default-expand-all highlight-current node-key="id" :current-node-key="currentNodekey" :data="depTreeList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col :span="20" class="col-top">
        <!-- 表格 -->
        <div class="top-right">
          <el-button size="small" type="primary" @click="handleAdd" plain>新增人员</el-button>
        </div>
        <div class="takeMeForApproval">
          <el-table size="small" height="60vh" :data="tableData" border :cell-style="rowClass" :header-cell-style="rowClass" style="width: 100%">
            <el-table-column show-overflow-tooltip prop="name" label="姓名">
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="sex" label="性别" >
              <template slot-scope="scope">
                 <span v-if="scope.row.sex=='M'">男</span>
                 <span v-if="scope.row.sex=='W'">女</span>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="zw" label="职务" />
            <el-table-column :show-overflow-tooltip="true" prop="depName" label="执法机构" />
            <el-table-column :show-overflow-tooltip="true" prop="lecNo" label="执法证号" />
            <el-table-column :show-overflow-tooltip="true" prop="lecNoEffectiveTime" label="执法证有效期" />
            <el-table-column :show-overflow-tooltip="true" prop="phone" label="联系方式" >
              <template slot-scope="scope">
                {{ scope.row.phone | hiddenMobile(scope.row.phone) }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button @click="del(scope.row.id)" type="text" style="color: red;margin-left:20px" icon="el-icon-delete">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex;justify-content: center;margin-top: 20px;">
            <Pagination :pageNum="pageNum" :total="total" :pageSize="pageSize" :small="true" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></Pagination>
          </div>
          <!-- 新增编辑组件 -->
          <Dialog v-if="dialogShow" :depId="searchForm.depId" :rowData="rowData" :id="editId" :title="title" @close="close" @finish="finish"></Dialog>
        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import dayjs from "dayjs";
import utils from "@/plugins/utils";
import { getLoginUserAvailableDepForTreeOptionApi } from "@/api/dataFilters";
import Pagination from "@/components/Pagination";
import {
  objectRoundsUserListApi,
  objectRoundsUserAddtApi,
  objectRoundsUserDelApi,
} from "@/api/lawInspection/lawInspectionInspectors";
import Dialog from "./components/dialog";
export default {
  data() {
    return {
      rowData: "",
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      title: "",
      editId: "", //编辑id
      ids: "",
      dialogShow: false, //控制新增编辑弹窗
      multipleSelection: [],
      searchForm: {
        depId: "", //部门id
        name: "", //用户名称
      },
      depTreeList: [],
      defaultProps: {
        children: "sub",
        label: "name",
      },
      currentNodekey: "",
    };
  },
  components: { Pagination, Dialog },
  async created() {
    // 获取部门list
    await this.getDepList();
    this.getDataList();
  },
  filters: {
    timeFormat(val) {
      if (!val) return "";
      return dayjs(val).format("YYYY-MM-DD");
    },
    /**
     * 隐藏手机号中间
     */
    hiddenMobile(cellValue) {
      if (Number(cellValue) && String(cellValue).length === 11) {
        let mobile = String(cellValue);
        let reg = /^(\d{2})\d{7}(\d{2})$/;
        return mobile.replace(reg, "$1*******$2");
      } else {
        return cellValue;
      }
    },
  },
  methods: {
    // 点击树触发的方法
    handleNodeClick(data) {
      this.searchForm.depId = data.id;
      this.getDataList();
    },
    getDepList() {
      return new Promise((resolve, reject) => {
        getLoginUserAvailableDepForTreeOptionApi({ unitId: "all" }).then(
          (res) => {
            this.depTreeList = res;
            if (this.depTreeList.length > 0) {
              this.currentNodekey = this.depTreeList[0].id;
              this.searchForm.depId = this.depTreeList[0].id;
              this.$nextTick(() => {
                this.$refs.treeRef.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
              });
            }
            resolve(res);
          }
        );
      });
    },
    // 获取数据
    getDataList() {
      let json = {
        limit: this.pageSize,
        page: this.pageNum,
        depId: this.searchForm.depId, //部门名称
        name: this.searchForm.name, //用户名称
      };
      objectRoundsUserListApi(json)
        .then((res) => {
          console.log("列表数据", res);
          this.tableData = res.list;
          this.total = res.total;
        })
        .catch((_) => {});
    },
    // 重置
    handleReset() {
      this.pageNum = 1;
      this.searchForm.depId = this.currentNodekey;
      this.searchForm.name = "";
      this.$nextTick(() => {
        this.$refs.treeRef.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
      });
      this.getDataList();
    },
    // 新增
    handleAdd() {
      this.editId = null;
      this.title = "新增";
      this.dialogShow = true;
    },
    //删除
    del(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          objectRoundsUserDelApi({ id: id }).then((res) => {
            console.log("删除之后的返回", res);
            this.$message.success("删除成功");
            this.getDataList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 保存
    finish(data) {
      // 走新增逻辑
      if (data.add) {
        delete data.add;
        let params = Object.assign({}, data, { userId: data.userId.join(",") });
        console.log("保存的data", params);
        objectRoundsUserAddtApi(params)
          .then((res) => {
            console.log("保存之后返回", res);
            this.dialogShow = false;
            this.getDataList();
            this.$message.success("保存成功");
          })
          .catch(() => {});
      }
    },

    // 关闭弹窗
    close() {
      this.dialogShow = false;
      this.detailShow = false;
      this.statusShow = false;
    },
    // 表格居中显示
    rowClass() {
      return "text-align:center";
    },
    //一页显示多少条
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getDataList();
    },
    // 切换第几页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getDataList();
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  padding: 10px 20px;
  .top-right {
    float: right;
    margin-bottom: 17px;
    margin-top: 17px;
  }
}
.pagination {
  padding: 0 10px;
  margin: 20px 0;
}
.takeMeForApproval {
  margin-left: 20px;
}
.div-col {
  height: calc(~"100vh - 155px");
  padding-top: 10px;
  border-right: 1px solid #ccc;
  overflow: auto;
}
.col-top {
  border-top: 1px solid #ccc;
  padding-top: 10px;
}
/* 点击树结构项的选中颜色 */
.el-tree--highlight-current .is-current.el-tree-node > .el-tree-node__content {
  background-color: #99ccff !important;
}
</style>

如何修改el-tree默认选中项的样式
如图，需求是将el-tree改成如下样式：默认展开第一层，左侧添加蓝色条条点击任意一项时，左侧添加蓝色条条，其...
tree 仅允许勾选同一个层级的数据
element tree 无法默认选中
draggable属性影响input鼠标选中内容
1.背景今天遇到一个特别有意思的问题，给el-tree设置了draggable后，el-tree中的el-inp...
el-tree 二级横向展开其他竖向展开
二级横向效果图实现就这么简单，我自己都不敢相信。代码如下
Vue+element ui树形菜单
效果图：源码： Title
element-ui el-tree选择子节点时同时选择并提交父
el-tree组件在获取选择的节点时，默认的逻辑是，选中父节点时所有的子节点会被选中（checked），但是当该节...
el-tree加载完成后默认触发点击事件非默认选中（下）支持自定
前面那篇选中默认节点，有朋友留言说能不能支持自定义节点，自己想了想认为可行，思路主要利用el-tree 的curr...
el-tree一级节点不显示复选框
修改样式 /deep/ .el-tree > .el-tree-node > .el-tree-node__con...
El-Tree节点名称过长处理
任何事物都无法抗拒吞食一切的时间。——泰戈尔上一篇写到用el-tree实现触发部门管理的默认点击事件，但是当我们...