Vue实现自动触发点击事件

使用VUE自定义指令实现

 <el-tree :check-strictly="isCheck" ref="tree" :data="data" show-checkbox node-key="detectorId" :default-expanded-keys="[]" default-expand-all :default-checked-keys="defKeys" :expand-on-click-node="false" :props="defaultProps" @check-change="handleCheckChange">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>
                <i class="iconfont icon-jianceqi" v-if="data.isDet"></i>
                <i v-else style="color:#F19F00;margin-right:10px;" class="iconfont icon-24gf-folder"></i>
                {{ node.label }}
                <!-- <i class="iconfont fr icon-gengduo1"></i> -->
              </span>
              <span>
                <el-button v-if="data.itemsNumber > 0 && data.isShow" type="text" size="mini" v-trigger class="wlh-textColor-red" @click="() => append(data)">
                  查看检测器
                </el-button>
                <!-- <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            Delete
          </el-button> -->
              </span>
            </span>
   </el-tree>
   methods(){
    append(data) {
      this.getDeteListFromGroup(data.organizationId, () => {
        this.checkList.forEach(item => {
          const newChild = {
            organizationId: item.detectorId,
            detectorId: item.detectorId,
            organizationName: item.detectorName,
            children: [],
            isDet: true
          };
          if (!data.children) {
            this.$set(data, "children", []);
          }
          data.children.push(newChild);
          this.getPolicyOne();
        });
      });
      // data = Object.assign({},data,{isShow:false})
      data.isShow = false;
    }
   },
   2.指令
   directives: {
    trigger: {
      inserted(el, binging) {
        // console.log(el)
        // el.click()
        $(el).trigger('click');//所以都触发一次,
      }
    }
  }
  3.回显赋值,el-tree的数据是动态添加的,所以回显的数据一定要在data数据追加后再回显被选中的数据
  getInfo(){
   this.isCheck = true //重点:回显之前一定要设置为true
   this.$nextTick(() => {
       this.$refs.tree.setCheckedKeys(this.defKeys) //给树节点赋值回显
       this.isCheck = false //重点: 赋值完成后 设置为false
   })
  }

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值