2021-07-19 2021年7月19日 ElementUI

实现页面组件

注意点
1、el-option 标签要加上v-show="index == 0"，不然回显框不显示名称
2、 el-option 内容的<div class="dept-member" v-if="index == 0"> 要加上v-if 不然会加载多次的load函数
3、当变成多选框时，TypeError: this.$refs.tree.getCheckedNodes is not a function会报错。因为是for循环出来的所以会报错

<template>
  <div>
    <el-select
      v-model="userList"
      clearable
      placeholder="请选择"
      multiple
      value-key="id"
      ref="selectUserList"
      popper-class="depart-member-mulitiple-select"
    >
      <el-option
        :key="item.id"
        :label="item.name"
        :value="item"
        disabled
        v-for="(item, index) in options"
        v-show="index == 0"
      >
        <div class="dept-member" v-if="index == 0">
          <div class="dept-member-content">
            <div class="select-list">
              <div class="select-list-header">
                <el-input
                  class="search"
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
                  v-model="filterText"
                  clearable
                  @change="getFilter"
                >
                </el-input>
              </div>
              <div class="select-list-content">
                <el-tree
                  :data="treeData"
                  :load="getTree"
                  ref="tree"
                  node-key="userId"
                  lazy
                  :check-strictly="true"
                  show-checkbox
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                  @node-expand="handleNodeClick"
                  @check-change="handleCheckChange"
                >
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <svg
                      v-if="data.disabled"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      class="file-icon"
                    >
                      <path
                        d="M157.3 158.7h319.1c22.5 0 43 12.7 53 32.6l42.9 85.4h296.4c32.7 0 59.3 26.4 59.3 59v472c0 32.5-26.6 59-59.3 59H157.3c-32.7 0-59.3-26.4-59.3-59v-590c0-32.5 26.6-59 59.3-59z"
                        fill="#009cff"
                      ></path>
                    </svg>
                    <el-radio
                      v-if="!data.disabled"
                      @change="changeOne"
                      v-model="radio"
                      :label="data"
                    ></el-radio>
                    <span>{{ data.name }}</span>
                  </span>
                </el-tree>
              </div>
            </div>
            <div class="select-has-been">
              <div class="select-has-been-header">
                <span> 已选择的成员</span>
                <ul>
                  <li v-for="(item, index) in chooseMan" :key="index">
                    <div
                      id="tree-active-XieSiQiang"
                      data-id="35"
                      data-parentid=""
                      data-department="[5]"
                      title="谢思强"
                      class=""
                      style="display: flex; height: 36px; align-items: center"
                    >
                      <span class="ic">{{
                        item.name || item.businessName
                      }}</span>
                    </div>
                    <i class="el-icon-close" @click="deleOneChoose(item)"></i>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="handle">
            <div class="handle-selected"></div>

            <div class="btn-group">
              <button
                data-v-e92afaea=""
                data-v-79a6a809=""
                type="button"
                class="el-button mk-button mk-button-biz el-button--default"
                style="width: 56px; height: 24px; font-size: 12px; padding: 0px"
                @click="cansubmitSelect"
              >
                <!----><!----><span> 取消 </span>
              </button>
              <button
                data-v-e92afaea=""
                data-v-79a6a809=""
                type="button"
                @click="submitSelect"
                class="
                  el-button
                  mk-button mk-button-biz
                  confirm
                  el-button--primary
                "
                style="width: 56px; height: 24px; font-size: 12px; padding: 0px"
              >
                <!----><!----><span> 确认 </span>
              </button>
            </div>
          </div>
        </div>
      </el-option>
    </el-select>
  </div>
</template>

<script>
// 单人活码
// :selectMan="ChoosePeople"
import * as api from "@/api/organization";
export default {
  data() {
    return {
      filterText: "",
      query: {
        pageNum: 1,
        pageSize: 100000,
        isActivate: "",
        department: "",
      },
      originData: [],
      flag: false,
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
        isLeaf: "leaf",
      },
      chooseMan: [{}],
      radio: "",
      userList:'',
      options: [
        {
          name: "JDQ",
          alias: "",
          userId: "15665400628",
          gender: 1,
          mobile: "15665400628",
          email: "",
          department: ["1"],
          position: "",
          isLeaderInDept: ["0"],
          enable: 1,
          telephone: "",
          isActivate: 4,
        }
      ],
    };
  },
  props: {
    chooseman:{
      type:Array,
      default: () => []
    }
  },
  created() {
      this.chooseMan = this.chooseman //回显数据
  },
  watch: {
    chooseman: {
      handler(newVal, oldVal) {
        console.log(44, newVal);
        // this.chooseMan = newVal;
      },
      deep: true,
    },
    // filterText(val) {
    //   // this.$refs.tree.filter(val);
    // },
    visible(val) {
      if (val) {
        console.log(55);
      }
    },
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    getTree(node, resolve) {
      if (this.flag) {
        this.getList(node, resolve);
        return;
      }
      console.log(3333)

      api.getTree().then(({ data }) => {
        data.map((item) => {
          return (item.disabled = true);
        });
        this.originData = data;
        this.treeData = this.handleTree(data);
        this.flag = true;
      });
    },
    getList(node, resolve) {
      this.query.name = "";
      this.query.department = node.data.id;
      this.loading = true;
      api
        .getList(this.query)
        .then(({ rows, total }) => {
          rows.map((item) => {
            item.id = item.userId;
            item.businessId = item.userId;
            item.businessName = item.name;
            return (item.leaf = true);
          });
          // this.originData //全部的数据
          this.originData = this.originData.concat(rows);

          if (this.chooseman.length !== 0) {
            let selects = this.originData.filter((item, index) => {
              return item.id == this.chooseman[0].id;
            });
            this.radio = selects[0]; //回显加载的数据
          }
          let data =
            (node.data.children && rows.concat(node.data.children)) || rows;
          resolve(data);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getFilter() {
      if (this.filterText == "") {
        this.flag = false;
        this.getTree();
        return;
      }
      this.query.department = "";
      this.originData = [];
      this.query.name = this.filterText;

      api
        .getList(this.query)
        .then(({ rows, total }) => {
          rows.map((item) => {
            item.id = item.userId;
            item.businessId = item.userId;
            item.businessName = item.name;
            return (item.leaf = true);
          });
          // this.originData //全部的数据
          this.originData = this.originData.concat(rows);

          if (this.chooseman.length !== 0) {
            let selects = this.originData.filter((item, index) => {
              return item.id == this.chooseman[0].id;
            });
            this.radio = selects[0]; //回显加载的数据
            // console.log(3333,this.radio)
          }
          this.treeData = this.handleTree(rows);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    changeOne(one) {
      this.chooseMan = [one];
    },
    handleNodeClick(data, node) {
      this.query.department = data.id;
    },
    handleCheckChange(data, checked, indeterminate) {
      this.chooseMan = this.$refs.tree.getCheckedNodes();
    },
    deleOneChoose(item) {
      this.radio = "";
      this.chooseMan.splice(this.chooseMan.indexOf(item), 1);
      this.$refs.tree.setCheckedNodes(this.chooseMan);
    },
    cansubmitSelect() {
      this.originData = this.originData.concat(this.chooseman);

      this.$emit("selectMan", this.chooseman, this.originData);
    },
    submitSelect() {
      this.$refs.selectUserList.blur();
      this.userList = this.chooseMan;
      // this.options = this.unique(this.originData) //会报错
     this.options = this.options.concat(this.chooseMan)
      console.log(3333,this.options)
      this.$emit("selectMan", this.chooseMan);
    },
  },
};
</script>

<style lang="scss" scoped>
.dept-member ::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
.dept-member {
  width: 450px;
  height: 386px;
  border-radius: 4px;
  background-color: #fff;
  position: relative;
  z-index: 2002;
  cursor: pointer;
  .search-type {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0;
    /deep/ .el-radio-button__inner {
      font-size: 13px;
      padding: 4px 8px !important;
    }
  }
  .dept-member-content {
    display: flex;
    width: 100%;
    height: 342px;
    box-sizing: border-box;
    border-bottom: 1px solid #f5f5f5;
    .select-list {
      width: 240px;
      border-right: 1px solid #f5f5f5;
      .select-list-header {
        display: flex;
        height: 44px;
        box-sizing: border-box;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-bottom: 1px solid #f5f5f5;
        .search {
          width: calc(100% - 24px);
          height: 32px;
        }
      }
      .select-list-content {
        width: 100%;
        height: calc(100% - 44px);
        overflow: auto;
        box-sizing: border-box;
        border-bottom: 1px solid #f5f5f5;
        /deep/.el-checkbox.is-disabled {
          display: none !important;
        }
        /deep/ .custom-tree-node {
          display: flex;
          -ms-flex-align: center;
          align-items: center;
          .file-icon {
            color: #8f9fb3;
            font-size: 14px;
            margin-right: 2px;
          }
        }
      }
    }
    .select-has-been {
      width: 210px;
      .select-has-been-header {
        height: 44px;
        box-sizing: border-box;
        border-bottom: 1px solid #f5f5f5;
        span {
          color: #a1a1a1;
          font-size: 13px;
          line-height: 44px;
          margin-left: 10px;
        }
      }
      ul {
        width: 100%;
        height: 305px;
        overflow-y: auto;
        li {
          &:hover {
            background-color: rgb(247, 247, 247);
            .el-icon-close {
              color: rgb(64, 169, 253);
            }
          }
          line-height: 36px;
          font-size: 13px;
          color: #595959;
          padding: 0 10px;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-pack: justify;
          justify-content: space-between;
          -ms-flex-align: center;
          align-items: center;
          span.ic {
            margin-left: 14px;
            width: 154px;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 36px;
            color: #262626;
          }
          .el-icon-close {
            color: #888;
            font-size: 14px;
            cursor: pointer;
          }
        }
      }
    }
  }

  .handle {
    height: 44px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    .handle-selected {
      font-size: 12px;
      color: #595959;
      margin-left: 15px;
    }
    .btn-group {
      .confirm {
        margin-right: 10px;
      }
    }
  }
}
.el-radio {
  margin-right: 5px;
}
/deep/.el-radio__label {
  display: none;
}
/deep/.el-tree-node__content > label.el-checkbox {
  display: none;
}

.el-select-dropdown__item.is-disabled {
  cursor: default !important;
  // height: auto!important;
  color: #c0c4cc;
  padding: 0;
    height: 430px;
    max-height: inherit;
  .tag-select-group {
    padding: 10px 0 2px;
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px dotted #f0f0f0;
    .tag-name {
      color: #666;
      font-size: 13px;
      line-height: 20px;
    }
    .tag-list {
      margin-left: 34px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      .tag-item {
        height: 20px;
        line-height: 20px;
        padding: 0 8px;
        margin: 0 8px 8px 0;
        border-radius: 2px;
        font-size: 12px;
        background-color: #ebeff4;
        color: #6b7b88;
        cursor: pointer;
      }
    }
  }
}

 //  这个是选择员工
 .depart-member-mulitiple-select {
     .el-scrollbar {
         background-color: #fff;
         width: calc(100% + 2px);
         height: 430px;
         .el-select-dropdown__wrap {
             height: 449px;
             background-color: #fff;
             max-height: inherit!important;
             .el-select-dropdown__list {
                 padding: 0;
                 
             }
         }
     }
     /deep/ .el-select-dropdown__item.is-disabled {
          padding: 0;
          height: 430px;
          max-height: inherit;
      }
 }
</style>

以前的写法：