|
阅读：4204回复：0
ele-tree实现单选,实现ele-tree单选<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ele-tree实现单选</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- element-ui --> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入element-ui组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <style type="text/css"> .clear10{clear: both;width:100%;height:10px;} </style> </head> <body> <section class="pump-r-box" id="app"> <div class="area-r-cont2"> <el-tree class="filter-tree" show-checkbox :data="controlList" :props="defaultProps" node-key="id" :check-strictly="true" default-expand-all :filter-node-method="filterNode" @check="treeCheckChange" @node-click="treeNodeClick" ref="tree" > </el-tree> <div class="clear10"></div> </div> </section> </body> <script> new Vue({ el: '#app', data: { controlList: [ { id:"1", label: "网格", children: [], }, { id:"2", label: "企业", children: [ { id:"21", label: "工业企业", }, { id:"22", label: "商贸企业", }, { id:"23", label: "在建工地", }, ], }, { id:"3", label: "隐患", children: [], }, { id:"4", label: "风险", children: [], }, { id:"5", label: "重大危险源", children: [], }, { id:"6", label: "视频监控", children: [], }, { id:"7", label: "人群分析", children: [], }, ], defaultProps: { children: "children", label: "label", }, form:{ parameterMajor_id:"", id:"" }, }, mounted() { this.$nextTick(()=> { }) }, methods: { filterNode(value, data) { if (!value) return true; return data.label.indexOf(value) !== -1; }, treeNodeClick (data, check) { let id = this.$refs.tree.getCheckedKeys() if (id instanceof Array && id[0] === data.id) { this.treeCheckChange(data, false) this.$refs.tree.setCheckedKeys([]) } else { this.treeCheckChange(data, true) } }, treeCheckChange (data, check) { const _this = this this.form.parameterMajor_id = [] this.$refs.tree.setCheckedKeys([]) if (check) { this.form.id = data.id this.$refs.tree.setCheckedKeys([data.id]) if (data.children && data.children.length > 0) { //_this.setDeleteids(data) } else { _this.form.parameterMajor_id.push(data.id) } } else { if (this.form.id === data.id) { this.form.parameterMajor_id = [] this.form.id = '' this.$refs.tree.setCheckedKeys([]) } } }, // onCheckChange(data, checked, children) { // data = JSON.parse(JSON.stringify(data)); // let checkedNodes = []; // let Nodes = JSON.parse(JSON.stringify(checked.checkedNodes)); // if (checked) { // console.log('only one') // } else { // if (this.template.checkedId === data.id) { // this.$refs.tree.setCheckedKeys([]) // } // } // }, }, }) </script> </html> |
|
