vue-element ui select下拉树，请求多选/反选

写完方便下次利用，于是放在这里，也可以给大家参考参考遇到的话

代码片段

<template>
  <div>
    <el-dialog title="批量转移客户资料" :visible.sync="tranVisible" width="30%">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label="right"
        label-width="60px"
        class="demo-ruleForm"
        :label-position="labelPosition"
      >
        <el-form-item label-width="22px">
          <el-radio v-model="radio" label="1">{{ `已选择${ids.length}个客户` }}</el-radio>
        </el-form-item>
        <el-form-item label="组别" prop="treeValue">
          <div class="tree-container">
            <el-select
              ref="selectTree"
              v-model="ruleForm.treeValue"
              class="main-select-tree"
              clearable
              style="width: 60%;"
            >
              <el-option
                v-for="item in formatData(deptOptions)"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                style="display: none;"
              />
              <el-tree
                ref="selecteltree"
                class="main-select-el-tree"
                :data="deptOptions"
                node-key="id"
                highlight-current
                :props="defaultProps"
                :current-node-key="ruleForm.treeValue"
                :expand-on-click-node="expandOnClickNode"
                :default-expand-all="false"
                @node-click="handleNodeClick"
              />
            </el-select>
          </div>
        </el-form-item>
        <!-- 这里下面是多选列表 -->
        <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>
        <el-form-item>
          <el-button style="float:right;" type="primary" @click="submit('ruleForm')">确定转移</el-button>
          <el-button style="float:right;margin-right:15px" @click="cancel('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// const selector = () => import("@/views/compoments/selector.vue");
import { treeselect } from '@/api/admin/sys-dept'
import { getTranCtm, plTrainCustom } from "@/api/ctm/ctm-my";
export default {
    name: "TramCtm",
    components: {
        // selector,
    },
    props: {
        ids: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            radio: '1',
            tranVisible: false,
            labelPosition: 'right',
            ruleForm: {
                treeValue: null, // 这里下面都是下拉树形的数据
            },
            rules: {
                treeValue: [{ required: true, message: "请选择部门", trigger: "change" }],
            },

            SelectId: [], // 已选列表
            CheckList: [], // 部门下面的人员列表
            expandOnClickNode: true,
            deptOptions: [],
            //  datas: [{
            //     id: 1,
            //     label: '云南',
            //     children: [{
            //         id: 2,
            //         label: '昆明',
            //         children: [
            //             { id: 3, label: '五华区', children: [{ id: 8, label: '北辰小区' }] },
            //             { id: 4, label: '盘龙区' }
            //         ]
            //     }]
            // }, {
            //     id: 5,
            //     label: '湖南',
            //     children: [
            //         { id: 6, label: '长沙' },
            //         { id: 7, label: '永州' }
            //     ]
            // }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    computed: {
        // 被选中项的集合
        ChooseList() {
            return this.CheckList.filter((item) => {
                if (this.SelectId.includes(item.id)) {
                    return item
                }
            })
        },
    },
    watch: {
        'ruleForm.treeValue': {
            deep: true,
            immediate: true,
            handler(v) {
                this.getDepPeople(v)
            }
        }
    },
    mounted() {
        this.getTreeselect()
    },
    methods: {
        /** 查询部门下拉树结构 */
        getTreeselect() {
            treeselect().then(response => {
                this.deptOptions = response.data
            })
        },
        // 根据部门id返回人员
        getDepPeople(id) {
            const deptId = {
                deptId: id
            }
            getTranCtm(deptId).then((res) => {
                this.CheckList = res.data
            })
        },
        // 四级菜单
        formatData(data) {
            const options = [];
            data.forEach((item, key) => {
                options.push({ label: item.label, value: item.id });
                if (item.children) {
                    item.children.forEach((items, keys) => {
                        options.push({ label: items.label, value: items.id });
                        if (items.children) {
                            items.children.forEach((itemss, keyss) => {
                                options.push({ label: itemss.label, value: itemss.id });
                                if (itemss.children) {
                                    itemss.children.forEach((itemsss, keysss) => {
                                        options.push({ label: itemsss.label, value: itemsss.id });
                                    });
                                }
                            });
                        }
                    });
                }
            });
            return options;
        },
        handleNodeClick(node) {
            this.ruleForm.treeValue = node.id;
            this.$refs.selectTree.blur();
        },

        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');
        },

        cancel() {
            this.tranVisible = false
            this.SelectId = []
        },
        submit(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let res;
                    const data = {
                        CustomerIds: this.ids,
                        UserIds: this.SelectId
                    }
                    // eslint-disable-next-line prefer-const
                    res = await plTrainCustom(data);
                    if (res.code === 200) {
                        this.tranVisible = false
                        this.$message.success("转交客户成功");
                        this.$refs.ruleForm.resetFields();
                        this.$emit('ok'); // 调用父组件的方法
                        this.SelectId = []
                    }
                } else {
                    return false;
                }
            });
        },
        
        showDialog() {
            this.tranVisible = true
        },
    }
}
</script>

<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>

拆成组件，页面中使用

<tranCtm
     ref="tran"
     :tran-visible="'tranVisible'"
     :ids="ids"
      @ok="handleOk"
      ></tranCtm>
      
         // 子组件要触发父组件查询方法
    handleOk() {
      this.onSelect();
    },
    这里来触发弹窗显示
    handleTran() {
      this.$refs.tran.showDialog();
      // this.tranVisible=true;
    },