<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue@2/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <style> .part2 { margin: 0 auto; } </style> </head> <body> <div id="app"> <div style="width: 100%;display: flex;"> <el-select ref="selectTree" clearable v-model="value" placeholder="总行(默认)" class="part2"> <el-option :value="selectValue" style="height: auto !important;overFlow: auto"> <el-tree :data="centerOptions" :props="defaultProps" node-key="id" show-checkbox ref="Tree" style="height:500px" @check="checkClick"> </e1-tree> </el-option> </el-select> </div> </div> <script> new Vue( { el: '#app', data: { value: [], selectValue: [], defaultProps: { children: "children", value: "id", label: "name", }, centerOptions: [ { "name": "陕西省分行", "checked": false, "type": 'one', "id": "11005293", "children": [ { id: 1, name: "A支行", type: "one", }, { id: 2, name: "B支行", type: 'one' }, { id: 3, name: "c 支行", type: 'one' } ] }, { "name": "厦门分行", "checked": false, "type": 'two', "id": "110052931", children: [ { "id": 4, name: "D支行", type: 'two' }, { id: 5, name: "E支行", type: 'two' } ] } ], initArr: [] // 存放选中的值 }, methods: { checkClick(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) { this.initArr.push(checkedNodes); if (this.initArr.length > 1) { if (this.initArr[0].type != this.initArr[1].type) { // 一级选中和跨级选中进行判断 this.initArr = [this.initArr[1]]; this.$nextTick(() => { this.$refs.Tree.setCheckedKeys([this.initArr[0].id]); }) } else if (this.initArr[this.initArr.length - 2].type != this.initArr[this.initArr.length - 1].type) { // 选中多个的时候进行判断 this.initArr = [this.initArr[this.initArr.length - 1]]; this.$nextTick(() => { this.$refs.Tree.setCheckedKeys([this.initArr[this.initArr.length - 1].id]); }) } } }, } } ) </script> </body> </html>
代码思路:
1. 通过点击第二次复选框与前一次点击复选框进行唯一值判断,相同类型的不做处理,不同类型的值取后面一次点击的,前面的数据都清空。
2. this.initArr[0].type != this.initArr[1].type // 一级选中和跨级选中进行判断
3. 除了2情况外,就是点击全选中的时候数据是多个,需要判断最后一个与最后倒数二个 this.initArr[this.initArr.length - 2].type != this.initArr[this.initArr.length - 1].type
标签:initArr,name,element,length,单选,选中,复选框,type,id From: https://www.cnblogs.com/PengZhao-Mr/p/17282673.html