使用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-buttontype="text"size="mini"@click="() => remove(node, data)">Delete</el-button> --></span></span></el-tree>methods(){append(data) {this.getDeteListFromGroup(anizationId, () => {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 //重点：回显之前一定要设置为truethis.$nextTick(() => {this.$refs.tree.setCheckedKeys(this.defKeys) //给树节点赋值回显this.isCheck = false //重点： 赋值完成后 设置为false})}
