html代码:
<!-- 弹出框 --> <el-dialog title="选择参与人" :visible.sync="dialogCreateFormVisibleTDCY" width="40%" :before-close="handleClose" :close-on-click-modal = "false"> <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> <el-row> <el-col :span="24"> <div> <div class="searchStyle">可选参与人</div> <div class="TDCYstyle"> <el-tree ref="userTree" :data="treeData" :default-checked-keys="TDCY" :render-content="renderContent" @node-expand="handleExpand" @node-collapse="closeExpand" show-checkbox node-key="orgid" accordion :filter-node-method="filterNode" :props="defaultProps"> </el-tree> </div> </div> </el-col> </el-row> <div slot="footer" class="dialog-footer"> <el-button @click="resetChecked">清空</el-button> <el-button @click="dialogCreateFormVisibleTDCY=false">取 消</el-button> <el-button type="primary" @click="addCustomTDCY">确 定</el-button> </div> </el-dialog>
代码实现:
private defaultProps:any = { children: 'children', label: 'orgname' } private dialogCreateFormVisibleTDCY:boolean = false; private treeData:any = []; private filterText:any = ""; private TDCY:any=[] @Watch('filterText') onFilterText(val:any){ // 关键词过滤 let node:any = this.$refs.userTree node.filter(val); } filterNode(value:any, data:any) { if (!value) return true; return data.orgname.indexOf(value) !== -1; } // 一行显示多条数据 handleExpand() { //节点被展开时触发的事件 //因为该函数执行在renderContent函数之前,所以得加this.$nextTick() this.$nextTick(()=>{ this.changeCss(); }) } // 关闭一行显示多条 closeExpand(){ // 关闭节点时删除class为foo的属性 var levelName = document.getElementsByClassName("foo"); // levelname是上面的最底层节点的名字 for (var i = 0; i < levelName.length; i++) { // cssFloat 兼容 ie6-8 styleFloat 兼容ie9及标准浏览器 // @ts-ignore levelName[i].parentNode.style.cssFloat = ""; // @ts-ignore levelName[i].parentNode.style.styleFloat = ""; // @ts-ignore levelName[i].parentNode.onmouseover = function() { // @ts-ignore this.style.backgroundColor = ""; }; } } // 一行显示多条 // @ts-ignore renderContent(h:any, { node, data, store}){ // console.log('信息',h,node,data,store) let classname = '' // perms这个是后台数据区分普通tree节点和横向tree节点的标志 各位要根据实际情况做相对应的修改 // 由于项目中有三级菜单也有四级级菜单,就要在此做出判断 if (node.level === 4) { classname = "foo"; } if (node.level === 3 && node.childNodes.length === 0) { classname = "foo"; } if (node.level === 2 && node.childNodes.length === 0) { classname = "foo"; } return h( "p", { class: classname }, node.label ); } // 改变tree节点样式 changeCss() { var levelName = document.getElementsByClassName("foo"); // levelname是上面的最底层节点的名字 for (var i = 0; i < levelName.length; i++) { // cssFloat 兼容 ie6-8 styleFloat 兼容ie9及标准浏览器 // @ts-ignore levelName[i].parentNode.style.cssFloat = "left"; // 最底层的节点,包括多选框和名字都让他左浮动 // @ts-ignore levelName[i].parentNode.style.styleFloat = "left"; // @ts-ignore levelName[i].parentNode.onmouseover = function() { // @ts-ignore this.style.backgroundColor = "#fff"; }; } } // 清空-已选项 resetChecked() { console.log('清空数',this.$refs.userTree) // @ts-ignore this.$refs.userTree.setCheckedKeys([]); } // 打开弹出框 async hShowTDCY(){ await this.getTreeData(); console.log('成员信息展示',this.dialogCreateFormVisibleTDCY) this.dialogCreateFormVisibleTDCY = true; } // 获取成员信息 async getTreeData(){ // @ts-ignore const { data } = await this.commonApi.getOrg(); this.treeData=data.data; console.log('获取机构树',this.treeData) } // 选中成员 addCustomTDCY(){ let node:any = this.$refs.userTree; let data:any = node.getCheckedNodes(); let id:any = []; id = data.map((item:any,index:any)=> { console.log('data数据',item) return item.orgid }) let TDCY:any; // id是个数组 // TDCY = id; this.TDCY = id; // TDCY = id.toString(); this.form1.USERIDTDCY = this.TDCY this.dialogCreateFormVisibleTDCY=false; }
效果: