直接上效果图

template部分

   <!-- 这里下面是多选列表 -->
        <el-form-item v-if="CheckList.length > 0" prop="type" label-width="20px">
          <div class="content">
            <div class="selectAll">
              <div
                :class="['select', SelectId.length == CheckList.length ? 'selectActv' : '']"
                @click="allFun()"
              >
              </div>
              <span>全选/反选</span> <span class="zhuan">选择转入工号，数字为当天转入数量</span>
            </div>
            <div class="CheckBox">
              <div v-for="(item, index) in CheckList" :key="index" class="CheckItem">
                <div
                  :class="['select', SelectId.includes(item.userId) ? 'selectActv' : '']"
                  @click="selectFun(item.userId)"
                ></div>
                <span>{{ item.userId }}: {{ item.nickName }}</span>
                <span style="padding-left: 4px;">{{ [Number(item.count)] }}</span>
              </div>
            </div>
          </div>
        </el-form-item>

SelectId: [], // 已选列表
CheckList: [], // 部门下面的人员列表

   computed: {
        // 被选中项的集合
        ChooseList() {
            return this.CheckList.filter((item) => {
                if (this.SelectId.includes(item.id)) {
                    return item
                }
            })
        },
    },
  selectFun(userId) {
            if (!this.SelectId.includes(userId)) {
                this.SelectId.push(userId) // 判断已选列表中是否存在该id，不是则追加进去
            } else {
                const index = this.SelectId.indexOf(userId) // 求出当前id的所在位置
                this.SelectId.splice(index, 1) // 否则则删除
            }
            console.log(this.SelectId, 'this.SelectId');
        },
        // 全选、反选
        allFun() {
            if (this.SelectId.length === this.CheckList.length) {
                this.SelectId = [] // 判断是否已全部选中，是则清空已选列表
            } else {
                this.CheckList.forEach((item) => {
                    if (!this.SelectId.includes(item.userId)) {
                        this.SelectId.push(item.userId) // 否则将未选中的全部加入已选列表中
                    }
                })
            }
            console.log(this.ChooseList, 'ChooseList');
        },

<style lang="scss" scoped>
.tree-container {
    padding: 0 !important;
}

.main-select-el-tree .el-tree-node .is-current>.el-tree-node__content {
    font-weight: bold;
    color: #409eff;
}

.main-select-el-tree .el-tree-node.is-current>.el-tree-node__content {
    font-weight: bold;
    color: #409eff;
}

.CheckBox {
    width: 100%;
    display: flex;
    // flex-wrap: wrap;
    // margin: 50px auto;
    // margin-bottom: 20px;
    flex-direction: column;
    height: 300px;
    overflow: auto;
}

.CheckItem {
    display: flex;
    // margin: 0px 30px 30px 0px;
    align-items: center;
}

.select {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    cursor: pointer;
    margin-right: 10px;
    align-items: center;
}

.selectActv::before {
    display: block;
    content: "";
    width: 5px;
    height: 12px;
    border-bottom: 2px solid #13ce66;
    border-right: 2px solid #13ce66;
    // border-right: 2px solid #aaa;
    transform: rotate(45deg);
}

.selectAll {
    display: flex;
    align-items: center;
}

.content {
    width: 500px;
    // margin: 120px auto;
}

.zhuan {
    display: inline-block;
    padding-left: 12px;
    font-size: 0.5rem;
    color: #b8b6b6;
}

</style>