Element中Tree树结构组件中实现Ctrl和Shift多选

技术分享 2年前 (2022-05-20) 0 999+

　　在Element中的树结构中，实现多选功能，首先的是判断有没有按下键盘ctrl和shift按键。但是在Element中的tree组件的左键点击事件是没有提供$event鼠标属性判断的。所以就需要在函数中使用自身的$event来判断。请看树结构下面左键和右键点击的函数传参的截图。

　　所以，左键的点击函数，需要自行判断。如下代码示例

<el-tree      class="filter-tree"      :load="loadNode"      lazy      :props="defaultProps"      :filter-node-method="filterNode"      :render-content="renderContent"      ref="treeRef"      :expand-on-click-node="false"      @node-contextmenu="rightClick"      @node-click="leftClick" // 左键点击事件      :highlight-current="true"      node-key="id"      :check-on-click-node="true"      :show-checkbox="false"      check-strictly ></el-tree>

里面的左键函数，是这样的

 1   methods: {  2     leftClick(data, node, dom) {  3       let event = window.event || arguments.callee.caller.arguments[0];  4       var ctrlKeyDowned = event.ctrlKey;  5       var shiftKeyDowned = event.shiftKey;  6       // 走单击事件  7   8       var allTreeNode = this.$refs.treeRef.getNode(1);  9       this.clickTime = ""; 10       if (ctrlKeyDowned == false && shiftKeyDowned == false) { // 都没有点击 11         this.cancelSelectTree(); // 取消原来的选中 12         this.leftTreeSelectedArr.splice(0); 13         this.leftTreeSelectedArr.push(data); 14       } else if (ctrlKeyDowned == true && shiftKeyDowned == false) { // 只点击ctrl 15         this.$set(data, "Selected", true); 16         var isIN = this.leftTreeSelectedArr.every(item => { 17           return item.id != data.id; 18         }); 19         isIN && this.leftTreeSelectedArr.push(data); 20         if (!isIN) { 21           // 如果已经是选中的了，那么应该取消选择 22           data.Selected = false; 23           this.leftTreeSelectedArr.map((item, i) => { 24             if (item.id == data.id) { 25               this.leftTreeSelectedArr.splice(i, 1); 26               this.$refs.treeRef.setCurrentKey(); // 取消高亮，要不然区分不出来，是不是没有选中 27             } 28           }); 29         } 30       } else if (ctrlKeyDowned == false && shiftKeyDowned == true) { // 只点击shift 31         this.delayeringArr.splice(0); 32         this.delayering([allTreeNode]); // 把现在展开的数据都扁平化 33         this.$set(data, "Selected", true); 34         this.leftTreeSelectedArr.push(data); 35         this.shiftTree(); // shifit多选 36       } 37     } 38   }

通过，第三行中的内容，获取到鼠标的点击事件属性，然后从中获取到是都点击了键盘的Ctrl和Shift；

　　Ctrl多选就不用过多的介绍了，把点击树结构的内容，通过去重判断，直接放在leftTreeSelectedArr中就可以了。这里就不做过多的介绍了。具体请看，14至30行代码。下面主要是讲解一下，shift多选。

　　Shfit多选，在平常的列表中是很好实现的。我们可以把所有的数据，放在一个一维的数组中，那么任意选择其中的两项的话，就能把数组分割成为三部分。其中的中间部分，也就是第二部分就是Shift多选的结果。请看下面的草图

但是对于树结构的话，就稍微的麻烦一点了，树结构的数据是这样的。

那么他的真实的数据格式应该是这样的。

 1 treeData: [  2         {  3           id: 1,  4           name: "1节点",  5           childrenId: [  6             {  7               id: 2,  8               name: "2节点",  9               childrenId: [ 10                 { 11                   id: 5, 12                   name: "5节点", 13                   childrenId: [] 14                 }, 15                 { 16                   id: 6, 17                   name: "6节点", 18                   childrenId: [] 19                 } 20               ] 21             }, 22             { 23               id: 3, 24               name: "3节点", 25               childrenId: [ 26                 { 27                   id: 7, 28                   name: "7节点", 29                   childrenId: [] 30                 } 31               ] 32             }, 33             { 34               id: 4, 35               name: "4节点", 36               childrenId: [ 37                 { 38                   id: 8, 39                   name: "8节点", 40                   childrenId: [] 41                 }, 42                 { 43                   id: 9, 44                   name: "9节点", 45                   childrenId: [] 46                 }, 47                 { 48                   id: 10, 49                   name: "10节点", 50                   childrenId: [ 51                     { 52                       id: 11, 53                       name: "11节点", 54                       childrenId: [] 55                     }, 56                     { 57                       id: 12, 58                       name: "12节点", 59                       childrenId: [] 60                     } 61                   ] 62                 } 63               ] 64             } 65           ] 66         } 67       ]

那么树结构在页面上渲染完成之后就是这样的：

那shift多选是怎么判断的呢，怎么知道这个层级是属于哪个呢，怎么知道这个层级下面的内容需不需选中呢，如果展开了，就是应该选中的，如果没有展开是不是就不需要选中呢。所以的这些问题，如果思考下来的话，确实比较复杂，如果遍历的话，也是很难的。任意选中两个之后，都不知道应该是向上查找遍历，还是向下查找遍历。所以遍历的话，是不可用的，或者说是不太容易实现的。

　　回到问题的本质，在一维的数组，shif多选是很简单的。那么这个树形结构是不是也可以转换成一维的呢。按照这个思路，我们通过递归循环遍历，把这个数组转换成为一维的数组。请看下面的代码

 1     delayering(allTreeNode, pid) {  2       allTreeNode.map(item => {  3         this.delayeringArr.push({  4           id: item.data.id,  5           pid: pid ? pid : "null",  6           name: item.data.name  7         });  8         if (  9           item.hasOwnProperty("childNodes") && 10           item.childNodes.length && 11           item.expanded 12         ) { // 通过检查有没有子节点，并且查看是否展开，从而确定是否递归 13           this.delayering(item.childNodes, item.data.id); 14         } 15       }); 16     },

调用的时候，则需要把所有的节点的数据都传过去。

1 this.delayeringArr.splice(0); 2 this.delayering([allTreeNode]); // 把现在展开的数据都扁平化

　　调用delayering之后，就能把现在树结构中，已经展开的树结构，格式化成为一个一维的数组。请看下面的截图

当我们把树结构中的数据格式化成为一个一维的数组之后，我们就能判断了。那些是需要选中的。

 1     shiftTree() {  2       console.log("this.leftTreeSelectedArr", this.leftTreeSelectedArr);  3       console.log("this.delayeringArr", this.delayeringArr);  4       // 把第一个和最后一个当成是shift选择的  5       var nodeLength = this.leftTreeSelectedArr.length;  6       var startNode = this.leftTreeSelectedArr[0];  7       var startNodeId = startNode.id;  8       var endNode = this.leftTreeSelectedArr[nodeLength - 1];  9       var endNodeId = endNode.id; 10  11       // var startIndex = this.delayeringArr.filter((item,i)=>{ 12       //   return itemid == startNodeId; 13       // }) 14       // var endIndex = this.delayeringArr.filter((item,i)=>{ 15       //   return itemid == endNodeId; 16       // }) 17       var startIndex, endIndex; 18       this.delayeringArr.map((item, i) => { 19         if (item.id == startNodeId) { 20           startIndex = i; 21         } 22         if (item.id == endNodeId) { 23           endIndex = i; 24         } 25       }); 26       if (startIndex > endIndex) { 27         var rongIdex = endIndex; 28         endIndex = startIndex; 29         startIndex = rongIdex; 30       } 31       console.log(startIndex, endIndex); 32       this.leftTreeSelectedArr.splice(0); 33       this.delayeringArr.map((item, i) => { 34         if (i >= startIndex && i <= endIndex) { 35           console.log("需要选中的name", item.name); 36           var node = this.$refs.treeRef.getNode(item.id); 37           this.$set(node.data, "Selected", true); 38           this.leftTreeSelectedArr.push(node.data); 39         } 40       }); 41       console.log("this.leftTreeSelectedArr: ", this.leftTreeSelectedArr); 42     }

这个函数的主要目的就是，通过循环，找到对应的数据在扁平化处理之后数组数据中的位置。然后同理，就能找到需要选中的数据，通过设置Selected为true，则可以知道需要选中的节点。

　　最后附上完成的代码，包括其中的打印信息。（注意其中依赖Element的tree组件）

  1 <template>   2   <div id="MyVue">   3     <el-tree   4       ref="treeRef"   5       :data="treeData"   6       node-key="id"   7       :props="defaultProps"   8       @node-click="leftClick"   9     >  10        <span class="custom-tree-node" slot-scope="{ node, data }">  11          <span :class="data.Selected?'sel':''">{{ node.label }}</span>  12        </span>  13     </el-tree>  14     <div>扁平化数据：{{delayeringArr}}</div>  15   </div>  16 </template>  17 <script>  18 export default {  19   name: "MyVue",  20   data() {  21     return {  22       defaultProps: {  23         children: "childrenId",  24         label: "name"  25       },  26       treeData: [  27         {  28           id: 1,  29           name: "1节点",  30           childrenId: [  31             {  32               id: 2,  33               name: "2节点",  34               childrenId: [  35                 {  36                   id: 5,  37                   name: "5节点",  38                   childrenId: []  39                 },  40                 {  41                   id: 6,  42                   name: "6节点",  43                   childrenId: []  44                 }  45               ]  46             },  47             {  48               id: 3,  49               name: "3节点",  50               childrenId: [  51                 {  52                   id: 7,  53                   name: "7节点",  54                   childrenId: []  55                 }  56               ]  57             },  58             {  59               id: 4,  60               name: "4节点",  61               childrenId: [  62                 {  63                   id: 8,  64                   name: "8节点",  65                   childrenId: []  66                 },  67                 {  68                   id: 9,  69                   name: "9节点",  70                   childrenId: []  71                 },  72                 {  73                   id: 10,  74                   name: "10节点",  75                   childrenId: [  76                     {  77                       id: 11,  78                       name: "11节点",  79                       childrenId: []  80                     },  81                     {  82                       id: 12,  83                       name: "12节点",  84                       childrenId: []  85                     }  86                   ]  87                 }  88               ]  89             }  90           ]  91         }  92       ],  93       delayeringArr: [], // 扁平化之后的数据  94       leftTreeSelectedArr: [] // 选中的数据  95     };  96   },  97   props: {},  98   mounted() {},  99   components: {}, 100   computed: {}, 101   methods: { 102     leftClick(data, node, dom) { 103       let event = window.event || arguments.callee.caller.arguments[0]; 104       var ctrlKeyDowned = event.ctrlKey; 105       var shiftKeyDowned = event.shiftKey; 106  107       var allTreeNode = this.$refs.treeRef.getNode(1); 108       console.log("allTreeNode: ", allTreeNode); 109       if (ctrlKeyDowned == false && shiftKeyDowned == false) { 110         this.cancelSelectTree(); // 取消原来的选中 111         this.leftTreeSelectedArr.splice(0); 112         this.leftTreeSelectedArr.push(data); 113       } else if (ctrlKeyDowned == true && shiftKeyDowned == false) { 114         // this.leftTreeSelectedArr.splice(0); 115         // data.Selected = true; 116         this.$set(data, "Selected", true); 117         var isIN = this.leftTreeSelectedArr.every(item => { 118           return item.id != data.id; 119         }); 120         isIN && this.leftTreeSelectedArr.push(data); 121         console.log("isIN: ", isIN); 122         if (!isIN) { 123           // 如果已经是选中的了，那么应该取消选择 124           data.Selected = false; 125           this.leftTreeSelectedArr.map((item, i) => { 126             if (item.id == data.id) { 127               this.leftTreeSelectedArr.splice(i, 1); 128               this.$refs.treeRef.setCurrentKey(); // 取消高亮，要不然区分不出来，是不是没有选中 129             } 130           }); 131         } 132         console.log("this.leftTreeSelectedArr: ", this.leftTreeSelectedArr); 133       } else if (ctrlKeyDowned == false && shiftKeyDowned == true) { 134         this.delayeringArr.splice(0); 135         this.delayering([allTreeNode]); // 把现在展开的数据都扁平化 136         this.$set(data, "Selected", true); 137         this.leftTreeSelectedArr.push(data); 138         this.shiftTree(); // shifit多选 139       } 140     }, 141     // 把所有的数据,进行扁平化处理 142     delayering(allTreeNode, pid) { 143       allTreeNode.map(item => { 144         this.delayeringArr.push({ 145           id: item.data.id, 146           pid: pid ? pid : "null", 147           name: item.data.name 148         }); 149         if ( 150           item.hasOwnProperty("childNodes") && 151           item.childNodes.length && 152           item.expanded 153         ) { 154           // 通过检查有没有子节点，并且查看是否展开，从而确定是否递归 155           this.delayering(item.childNodes, item.data.id); 156         } 157       }); 158     }, 159     shiftTree() { 160       console.log("this.leftTreeSelectedArr", this.leftTreeSelectedArr); 161       console.log("this.delayeringArr", this.delayeringArr); 162       // 把第一个和最后一个当成是shift选择的 163       var nodeLength = this.leftTreeSelectedArr.length; 164       var startNode = this.leftTreeSelectedArr[0]; 165       var startNodeId = startNode.id; 166       var endNode = this.leftTreeSelectedArr[nodeLength - 1]; 167       var endNodeId = endNode.id; 168  169       // var startIndex = this.delayeringArr.filter((item,i)=>{ 170       //   return itemid == startNodeId; 171       // }) 172       // var endIndex = this.delayeringArr.filter((item,i)=>{ 173       //   return itemid == endNodeId; 174       // }) 175       var startIndex, endIndex; 176       this.delayeringArr.map((item, i) => { 177         if (item.id == startNodeId) { 178           startIndex = i; 179         } 180         if (item.id == endNodeId) { 181           endIndex = i; 182         } 183       }); 184       if (startIndex > endIndex) { 185         var rongIdex = endIndex; 186         endIndex = startIndex; 187         startIndex = rongIdex; 188       } 189       console.log(startIndex, endIndex); 190       this.leftTreeSelectedArr.splice(0); 191       this.delayeringArr.map((item, i) => { 192         if (i >= startIndex && i <= endIndex) { 193           console.log("需要选中的name", item.name); 194           var node = this.$refs.treeRef.getNode(item.id); 195           this.$set(node.data, "Selected", true); 196           this.leftTreeSelectedArr.push(node.data); 197         } 198       }); 199       console.log("this.leftTreeSelectedArr: ", this.leftTreeSelectedArr); 200     } 201   } 202 }; 203 </script> 204 <style lang="scss" scoped> 205 #MyVue { 206   width: 100%; 207   height: 100%; 208   user-select: none; 209   .sel{ 210     color: aqua; 211   } 212 } 213 </style>