element树形复选框实现一级菜单单选

  

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5   <meta charset="UTF-8">
  6   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8   <title>Document</title>
  9   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 10   <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
 11   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 12   <style>
 13     .part2 {
 14       margin: 0 auto;
 15     }
 16   </style>
 17 </head>
 18 
 19 <body>
 20   <div id="app">
 21     <div style="width: 100%;display: flex;">
 22       <el-select ref="selectTree" clearable v-model="value" placeholder="总行(默认)" class="part2">
 23         <el-option :value="selectValue" style="height: auto !important;overFlow: auto">
 24           <el-tree :data="centerOptions" :props="defaultProps" node-key="id" show-checkbox ref="Tree"
 25             style="height:500px" @check="checkClick">
 26             </e1-tree>
 27         </el-option>
 28       </el-select>
 29     </div>
 30   </div>
 31   <script>
 32     new Vue(
 33       {
 34         el: '#app',
 35         data: {
 36           value: [],
 37           selectValue: [],
 38           defaultProps: {
 39             children: "children",
 40             value: "id",
 41             label: "name",
 42           },
 43           centerOptions: [
 44             {
 45               "name": "陕西省分行",
 46               "checked": false,
 47               "type": 'one',
 48               "id": "11005293",
 49               "children": [
 50                 {
 51                   id: 1,
 52                   name: "A支行",
 53                   type: "one",
 54                 },
 55                 {
 56                   id: 2,
 57                   name: "B支行",
 58                   type: 'one'
 59                 },
 60                 {
 61                   id: 3,
 62                   name: "c 支行",
 63                   type: 'one'
 64                 }
 65               ]
 66             },
 67             {
 68               "name": "厦门分行",
 69               "checked": false,
 70               "type": 'two',
 71               "id": "110052931",
 72               children: [
 73                 {
 74                   "id": 4,
 75                   name: "D支行",
 76                   type: 'two'
 77                 },
 78                 {
 79                   id: 5,
 80                   name: "E支行",
 81                   type: 'two'
 82                 }
 83               ]
 84             }
 85           ],
 86           initArr: [] // 存放选中的值
 87         },
 88         methods: {
 89           checkClick(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
 90             this.initArr.push(checkedNodes);
 91             if (this.initArr.length > 1) {
 92               if (this.initArr[0].type != this.initArr[1].type) { // 一级选中和跨级选中进行判断
 93                 this.initArr = [this.initArr[1]];
 94                 this.$nextTick(() => {
 95                   this.$refs.Tree.setCheckedKeys([this.initArr[0].id]);
 96                 })
 97               } else if (this.initArr[this.initArr.length - 2].type != this.initArr[this.initArr.length - 1].type) { // 选中多个的时候进行判断
 98                 this.initArr = [this.initArr[this.initArr.length - 1]];
 99                 this.$nextTick(() => {
100                   this.$refs.Tree.setCheckedKeys([this.initArr[this.initArr.length - 1].id]);
101                 })
102               }
103             }
104             this.value = [];
105             this.initArr.length && this.initArr.forEach((item) => {
106               if (item.children && item.children.length) {
107                 item.children.forEach((items) => {
108                   this.value.push(items.name);
109                 })
110               } else {
111                 this.value.push(item.name);
112               }
113             });
114           },
115         }
116       }
117     )
118   </script>
119 </body>
120 
121 </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

posted @ 2023-04-03 11:50  等风来灬  阅读(157)  评论(0)  编辑  收藏  举报