前言

最近评估需求时，有个需求要求可以ctrl多选树状数据。评估时就觉得有点意思，本节就来介绍一下该功能的具体实现。

修饰符

公司技术栈是vue，刚开始想法是去找相关的原生方法，没想到vue中有对应的修饰符——.ctrl，果断使用修饰符实现了该功能，下面来看下具体的用法。 系统按键修饰符能够监听系统按键，当按下相关按键时触发事件并执行相关效果。具体包含以下几种按键：

• .ctrl、.alt、.shift、.meta meta键在各个系统键盘上图标不一样，真的需要用时我们查一下具体对应哪个图标。 还有一个修饰符.exact，该修饰符能够精确触发事件的键盘，设定了该修饰符只有按下对应的系统按键才能触发事件。

    <!-- 同时按下其他按键 比如alt也能触发 -->
    <el-button @click.ctrl="handleClick"></el-button>
    <!-- 如果有其他按键 不会被触发 只能单独按下ctrl -->
    <el-button @click.ctrl.exact="handleClick"></el-button>

有了ctrl修饰符，想要实现多选功能就非常方便了：

1. 声明一个数组，用来保存数据。
2. 增加ctrl修饰符，按住ctrl点击时触发点击事件，获取选中数据添加到数组中。
3. 优化样式，进行去重校验。 通过以上步骤我们就拿到了选中数据的list，后面根据具体需求进行处理。步骤非常清楚下面我们用el-tree简单写个demo，需要注意的是label显示，我们需要用slot插槽自定义节点内容，给每个label增加点击事件，并增加ctrl修饰符。 打印一下此时的this.existed，我们选中的label都添加进行了。不过如果重复点击，还会继续添加，所以我们优化一下，增加个判断，数组没有才添加。

 handleCtrl(node) {
  if (this.existed.indexOf(node.label) === -1) {
    this.existed.push(node.label)
  }
}

以上就是ctrl多选的实现思路，还是非常简单的。如果我们使用的是vue2，要注意对应的版本：

• .ctrl:2.1.0版本及以上。
• .exact:2.5.0版本及以上。

键盘事件

修饰符虽然简便，但是对版本有所要求。除了修饰符，我们还可以监听键盘事件，对按键进行判断，如果是ctrlKey，就进行对应的逻辑，实现过程如下：

• 声明一个布尔值isCtrl，默认为false,并监听按键按下事件。
• 按键按下进行判断，如果是ctrl，就将isCtrl变为true。
• label绑定点击事件，如果isCtrl为true，将选择数据进行添加。

该方法就不受版本限制，而且不管是vue，react等也能用此思路实现ctrl多选的功能。最后我们看下这块vue2中对修饰符ctrl的一些源码：

vue在绑定事件与指令都做了相关的处理，实现肯定要比我这个复杂多了。

总结

使用ctrl修饰符或者原生事件都能实现ctrl多选的需求，注意修饰符有版本要求。这种需求虽然简便，但是也很有意思，可玩性还是挺高的。