el-tree 根据节点属性控制节点显隐

根据canEdit 控制节点隐藏/显示

只有总公司canEdit 为true

一、整体思路

用render-content方法实现树节点的内容区的渲染，根据节点属性判断是否渲染内容区，若不显示，则删除该节点。

二、代码实现

   <div id="tree">
      <el-tree
        ref="tree"
        :data="treeData"
        show-checkbox
        node-key="id"
        :default-checked-keys="checkedKeys"
        default-expand-all
        :expand-on-click-node="false"
        @check="handleCheckChange"
        :render-content="renderContent"
      ></el-tree>
    </div>


 methods: {
    // 根据canEdit属性值判断是否渲染节点
    renderContent(h, { node, data, store }) {
      if (data.canEdit) {
        return <span>{data.name}</span>;
      } else {
        this.remove(node, data);
      }
    },
    // 删除节点数据方法
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.canEdit === 	data.canEdit);
      children.splice(index, 1);
    },
}

<template>
  <el-dialog
    title="新增团队"
    top="8vh"
    :visible="addDeptShowDialog"
    @close="handleCloseDialog"
    @click.native="clickDialog"
  >
    <el-form
      ref="deptForm"
      :model="deptForm"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="上级团队" prop="departmentName">
        <el-input
          :value="deptForm.departmentName"
          style="width: 90%"
          placeholder="请选择部门"
          @click.native.stop="getDeptList"
        />
        <div v-if="ShowTree" class="tree-box">
          <el-tree
            v-loading="loading"
            :data="ancestorsList"
            :props="{ label: 'name' }"
            @node-click="handleNodeClick"
            :render-content="renderContent"
          />
        </div>
      </el-form-item>
      <el-form-item label="团队名称" prop="name">
        <el-input
          v-model="deptForm.name"
          style="width: 90%"
          placeholder="请输入团队名称"
        />
      </el-form-item>
      <el-form-item label="团队负责人" prop="leader">
        <el-input
          v-model="deptForm.leader"
          style="width: 90%"
          placeholder="请输入团队负责人"
        />
      </el-form-item>
      <!-- <el-form-item label="活动区域" prop="provinceCode">
        <el-select
          v-model="deptForm.provinceCode"
          placeholder="请选择所在区域"
          @change="handleChange"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.areaCode"
            :value="item.areaCode"
            :label="item.areaName"
          />
        </el-select>
      </el-form-item> -->

      <el-form-item label="所在区域" prop="provinceCode">
        <el-select
          v-model="deptForm.provinceCode"
          placeholder="请选择所在省份"
          @change="handleChange"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.areaCode"
            :value="item.areaCode"
            :label="item.areaName"
          />
        </el-select>
        <el-select
          v-model="deptForm.regionCode"
          placeholder="请选择所在城市"
          style="width: 198px"
        >
          <el-option
            v-for="item in cityList"
            :key="item.areaCode"
            :value="item.areaCode"
            :label="item.areaName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input
          v-model="deptForm.phone"
          style="width: 90%"
          placeholder="请输入联系电话"
        />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input
          v-model="deptForm.email"
          style="width: 90%"
          placeholder="请输入邮箱"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="deptForm.status" size="small">
          <el-radio-button label="0">正常</el-radio-button>
          <el-radio-button label="1">停用</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="deptForm.remark"
          style="width: 90%"
          placeholder="1-300个字符"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button type="primary" @click="clickSubmit">确定</el-button>
      <el-button style="margin-top: 12px" @click="handleCloseDialog"
        >取消</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
// 组织管理列表获取 / 团队新增
import {
  reqGetDeptList,
  reqAddDepartments,
  reqGetProvince,
  reqGetRegion,
} from "@/api/dept";
import { transListDataToTreeData } from "@/utils/index";
export default {
  name: "JRYDeptAdd",
  props: {
    addDeptShowDialog: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    var checkEmail = (rule, value, callback) => {
      const regEmail = /^\w+@\w+(\.\w+)+$/;
      if (regEmail.test(value)) {
        // 合法邮箱
        return callback();
      }
      callback(new Error("请输入合法邮箱"));
    };
    var checkMobile = (rule, value, callback) => {
      const regMobile = /^1[34578]\d{9}$/;
      if (regMobile.test(value)) {
        return callback();
      }
      callback(new Error("请输入合法的手机号码"));
    };
    return {
      ShowTree: false, // 是否显示tree
      loading: false, // 延时加载
      ancestorsList: [], // 上级团队
      deptForm: {
        departmentName: "", // 上级团队节点选择数据回显
        parentId: "", // 上级团队ID
        name: "", // 团队名称
        leader: "", // 团队负责人
        status: "",
        phone: "",
        email: "", // 邮箱
        remark: "", // 备注
        provinceCode: "",
        regionCode: "",
      },
      provinceList: [],
      cityList: [],
      // 定义校验规则
      rules: {
        provinceCode: [
          {
            required: true,
            message: "请选择所在地区",
            trigger: ["blur", "change"],
          },
        ],
        departmentName: [
          {
            required: true,
            message: "请选择上级团队",
            trigger: ["blur", "change"],
          },
        ],
        name: [
          {
            required: true,
            message: "请输入团队名称",
            trigger: ["blur", "change"],
          },
          {
            min: 1,
            max: 10,
            message: "团队名称必须是1-10位字符",
            trigger: ["blur", "change"],
          },
        ],
        leader: [
          {
            required: true,
            message: "请输入团队负责人",
            trigger: ["blur", "change"],
          },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ],
        status: [
          {
            required: true,
            message: "请选择状态",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    // this.getDeptList()
  },
  mounted() {
    this.getPro();
  },
  computed: {},
  methods: {
    // 根据canEdit属性值判断是否渲染节点
    renderContent(h, { node, data, store }) {
      if (data.canEdit) {
        return <span>{data.name}</span>;
      } else {
        this.remove(node, data);
      }
    },
    // 删除节点数据方法
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.canEdit === data.canEdit);
      children.splice(index, 1);
    },

    // 关闭
    handleCloseDialog() {
      this.$emit("update:addDeptShowDialog", false);
      this.$refs.deptForm.resetFields();
    },
    async clickSubmit() {
      this.$refs.deptForm.validate(async (valid) => {
        if (!valid) return;
        await reqAddDepartments(this.deptForm);
        this.$message.success("操作成功", false);
        this.handleCloseDialog();
        this.$emit("getPermissionList");
      });
    },
    clickDialog() {
      this.ShowTree = false;
    },
    // 获取上级团队
    async getDeptList() {
      this.ShowTree = !this.ShowTree;
      if (!this.ShowTree) return;
      this.loading = true;
      const res = await reqGetDeptList();
      this.ancestorsList = transListDataToTreeData(res.result, "0");
      this.loading = false;
    },
    // 数据回显
    handleNodeClick(data) {
      this.deptForm.departmentName = data.name;
      this.deptForm.parentId = data.id;
      this.ShowTree = false;
    },
    // 获取地区
    async getPro() {
      const { result: res } = await reqGetProvince();
      // console.log(res)
      this.provinceList = res;
    },
    async getReg(code) {
      const res = await reqGetRegion(code);
      this.cityList = res.result;
    },
    /** 地域 */
    handleChange(val) {
      this.deptForm.regionCode = "";
      this.getReg(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.tree-box {
  position: absolute;
  width: 90%;
  min-height: 80px;
  left: 0;
  top: 45px;
  z-index: 100;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding-right: 5px;
  overflow: hidden;
  background-color: #fff;
  max-height: 160px;
  overflow: auto; //显示滚动条
  ::v-deep {
    //补充 样式穿透 对于每个部门的节点显示距离
    //找到el-自带属性
    .el-tree-node__content {
      height: auto;
    }
  }
}
</style>