在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>
View Code