成功el-tree父节点选中子节点不选中解决方案 / 开普饭

<template>
<div class="app-container">
    <div
      class="custom-tree-container"
      style="float: left; width: 40%; border: 1px solid red"
    >
      <div class="block">
        <p>权限管理</p>
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="角色" prop="Role">
            <el-select
              @change="handleChange"
              v-model="form.Role"
              placeholder="请选择角色"
            >
              <el-option
                v-for="item in Roleoptions"
                :key="item.RoleId"
                :label="item.RoleName"
                :value="item.RoleId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-tree
          :data="data"
          ref="rootTree"
          show-checkbox
          node-key="NodeId"
          default-expand-all
          :expand-on-click-node="false"
          :check-strictly="true"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
    </div>
    <div style="width: 60%; border: 1px solid blue; float: right">
      <div>
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item>
            <el-button type="primary" @click="SaveSelect()">保存选择</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</div>
</template>
<script>
let NodeId = "";
import { treeDataGetnode, getRandomCode } from "@/api/tree";
import { getList } from "@/api/MenuTable";
import { Save, GetKeys } from "@/api/AuthorityTable";
import { getListRole } from "@/api/RoleTable";
import listVue from "../AijitaikangSequencingDataWESF/list.vue";
export default {
data() {
    var data = [];
    return {
      form: {},
      data: JSON.parse(JSON.stringify(data)),
      Roleoptions: [],
      SelectRole: "",
    };
},
created() {
    this.fetchRole();
    this.fetchData();
},
methods: {
    handleChange(value) {
      this.SelectRole = value;
      this.fetchCheck(value);
    },
    fetchRole() {
      getListRole().then((response) => {
        this.Roleoptions = response.Data;
      });
    },
    fetchData() {
      let param = {};
      getList().then((response) => {
        this.data = response.Data;
        var result_data = JSON.stringify(this.data).myReplace(
          "childList",
          "children"
        );
        this.data = JSON.parse(result_data);
      });
    },
    //获取当前角色选中节点
    fetchCheck(role) {
      GetKeys(role).then((response) => {
        this.$refs.rootTree.setCheckedKeys(response.Data,true);
      });
    },
    SaveSelect() {
      var check_array = this.$refs.rootTree.getCheckedKeys(false); //全选中节点
      var check_half_array = this.$refs.rootTree.getHalfCheckedKeys(); //半选中节点
      check_array = check_array.concat(check_half_array);
      var arr_link = "";
      check_array.forEach((element) => {
        arr_link += "'" + element + "',";
      });
      arr_link = arr_link.trim(",");
      var role = this.SelectRole;
      // let params = { list: JSON.stringify(arr), role: this.SelectRole };
      Save(arr_link, role).then((res) => {
        this.$message({
          type: "info",
          message: res.Message,
        });
      });
    },
},
};
</script>

关键代码：:check-strictly="true"

成功el-tree父节点选中子节点不选中解决方案

相关推荐