el-tree的高亮,点击保存之后再次打开el-tree的弹框,高亮显示

<template>
  <div>
    <div style="height: 440px; overflow-y: auto; overflow-x: hidden">
      <el-tree
        ref="tree"
        :props="props"
        :load="loadNode"
        node-key="id"
        :default-checked-keys="checkedId"
        lazy
        show-checkbox
      >
      </el-tree>
    </div>
    <template slot="footer">
      <el-button type="success" size="medium" @click="onSubmit">保存</el-button>
      <el-button type="danger" size="medium" @click="visible = false"
        >取消</el-button
      >
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      props: {
        label: "name",
        children: "zones",
        isLeaf: "leaf",
      },
      // 默认选中的
      checkedId: [],
    };
  },
  methods: {
    loadNode(node, resolve) {
      let params;
      if (node.level == 0) {
        params = {
          // 传参
        };
      } else {
        params = {
          // 传参
        };
      }
      getTree(params).then((data) => {
        if (data.resultdata.length > 0) {
          if (data.resultdata[0].length > 0) {
            data.resultdata[0].forEach((item) => {
              this.checkedId = item.check;
            });
          }
          this.ChildNode(node, 100);
          resolve(data.resultdata);//数据,这是懒加载的数据拿取
        } else {
          resolve();
        }
      });
    },

    ChildNode(node, time) {
      setTimeout(() => {
        let count = 0;
        node.childNodes &&
          node.childNodes.forEach((cell) => {
            if (cell.data.check == 1) { //判断的是如果check等于1那么就让他高亮
              count += 1;
              cell.checked = true;
            } else {//否则不高亮
              cell.checked = false;
            }
          });
        if (count != 0 && node.childNodes.length != count) {
          node.checked = false;
          node.indeterminate = true;
        }
      }, time);
    },

    // 表单提交
    async onSubmit() {
      this.loading = true;
      const res = this.$refs.tree.getCheckedNodes();
      const semi = this.$refs.tree.getHalfCheckedKeys();
      let arr = "";
      res.forEach((item) => {
        arr = arr + "," + item.id;
      });

      this.dataForm.modulesString = arr;
      this.dataForm.semiId = semi;
      const result = await save(this.dataForm);
      if (result.result) {
        this.checkedId = res.map((node) => node.id);
        this.$emit("从父组件传过来的刷新方法");
        this.$message({
          type: "success",
          message: "操作成功",
        });
      } 
    },
  },
};
</script>

<style>
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值