pointer-events: none；属性。pointer-events: none；看得见摸不着，点击穿透。

pointer-events: none;理解：你可以看的到某个元素，但是你无法摸的着，点击不到，点击会穿透触发到下层的元素
display：none; 是你摸不着，但是你也看不见。

最简单的使用场景是：给某个box1盒子设置样式和内容，然后定位遮住在另一个box2上，点击box1会触发点击box2的事件。

例如下方将蓝色盒子放在select的位置展示某值，选择所有时候展示颜色盒子。点击颜色区域需要打开下拉框。既可以用到pointer-events: none;

以下代码可以直接复制：

<!--
 * @Description: el-select 结合 el-checkBox 实现下拉全选+多选功能
-->
<template>
  <div style="padding: 300px 100px;">
    <el-select v-model="menus" multiple collapse-tags @change="changeSelectMenu" placeholder="请选择菜单" clearable>
      <el-checkbox v-model="checkedAll" @change="selectAll">全选</el-checkbox>
      <el-option v-for="item in menuList" :key="item.id" :label="item.menuName" :value="item.id"></el-option>
    </el-select>
    <span v-if="checkedAll" class="pointer_box">点此会渗透到 点击select</span>
  </div>
</template>
<script>
export default {
  data () {
    return {
      checkedAll: false,
      menus: [],
      menuList: [
        { id: '01', menuName: '菜单一' },
        { id: '02', menuName: '菜单二' },
        { id: '03', menuName: '菜单三' },
        { id: '04', menuName: '菜单四' },
        { id: '05', menuName: '菜单五' },
        { id: '06', menuName: '菜单六' },
      ]
    }
  },
  mounted () {

  },
  methods: {
    // 点击下拉列表选项时触发
    changeSelectMenu (val) {
      if (val.length === this.menuList.length) {
        this.checkedAll = true
      } else {
        this.checkedAll = false
      }
    },
    // 点击“全选”按钮时触发
    selectAll () {
      this.menus = []
      if (this.checkedAll) {
        this.menuList.map(item => {
          this.menus.push(item.id)
        })
      } else {
        this.menus = []
      }
    }
  }
}
</script>
<style lang='less'>
.el-select-dropdown {
  .el-checkbox {
    display: inline-block;
    margin-left: 20px;
    padding: 8px 0;
  }
}

.pointer_box {
  pointer-events: none;
  position: relative;
  display: inline-block;
  z-index: 999;
  left: -180px;
  top: 10px;
  width: 120px;
  background-color: #1fff;
}
</style>