打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
成功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>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>

关键代码::check-strictly="true"
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
调用自定义的 el-tree-select (elementUI)
js操作table(创建并设置样式)与图片控制
element tree  树节点
jquery ajax的例子
你可能不需要 jQuery!使用原生 JavaScript 进行开发
PHP+Mysql+easyui点击左侧tree菜单对应表名右侧动态生成datagrid加载表单数据(二)
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服