2021-07-19 2021年7月19日 ElementUI el-select绑定对象 公司 部门 员工 下拉树 选择 组件

实现页面组件


image.png

注意点
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>

以前的写法：
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,496评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,407评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,632评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,180评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,198评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,165评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,052评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,910评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,324评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,542评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,711评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,424评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,017评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,668评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,823评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,722评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,611评论 2赞 353