vue 封装el-select多选下拉框（可用输入框搜索过滤）

vue 封装el-select多选下拉框（可用输入框搜索过滤）

下拉筛选效果如下

代码部分

html部分

1. 创建多选组件 mSelect.vue

2. 在父组件中引用

css部分

.select-default {
  background-color: #43504a;
  color: #45494d;
  border: 1px solid #43504a;

 &.select-text-align-left {
    .el-scrollbar__wrap {
      .el-select-dropdown__list {
        .el-select-dropdown__item {
          text-align: left;
        }
      }
    }
  }
  &.no-empty {
    .el-scrollbar {
      display: block !important;
      .el-scrollbar__wrap {
        // overflow-y: scroll;
        // overflow-x: hidden;
        // margin-bottom: vh(-6) !important;
        // margin-right: vw(-6) !important;
        .el-select-dropdown__list {
          .filter-input {
            height: 50px;
            width: 84%;
            margin-bottom: 30px;
            margin-left: 30px;
            &.filter-input-mb {
              margin-bottom: 10px;
            }
            .el-input__inner {
              width: 100%;
              height: 100%;
              color:#fff;
              border: 1px solid #fff !important;
              font-size: 24px;
            }
          }
        }
      }
    }
  }

  .el-scrollbar__wrap {
   
    max-height: 404px;
    .el-select-dropdown__list {
      padding: 6px 0;
      
      .el-checkbox-group {
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 100%;

        .el-checkbox {
          width: fit-content;
          padding: 0;
          display: inline-flex;
          align-items: center;
          height: 100%;
          font-size: 24px;
          margin-right: vw(30);

          .el-checkbox__label {
            font-size: 24px;
            padding-left: 13px;
            color: #fff;
            display: flex;
            align-items: center;
            height: 100%;
          }

          .el-checkbox__input {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            &.is-checked {
              .el-checkbox__inner {
                background: url("勾选的图片");
                width: 33px;
                height: 33px;
                border: none;
              }

              + .el-checkbox__label {
                color: #fff;
              }
            }

           

            &.is-disabled {
              .el-checkbox__inner {
                background: url("禁用的图片");
                width: 33px;
                height: 33px;
              }
              &.is-checked {
                .el-checkbox__inner {
                  background: url("勾选的图片");
                  width: 33px;
                  height: 33px;
                  border: none;
                }

                + .el-checkbox__label {
                  color: #fff;
                }
              }
            }

            .el-checkbox__inner {
              background: url("未勾选的图片");
              width: 33px;
              height: 33px;
            }
          }
        }
      }

      .el-select-dropdown__item {
        font-size: 24px;
        padding: 0 20px;
        color: #fff;
        height: 38px;
        line-height: 38px;
        text-align: center;
        font-weight: 100;
        margin-bottom: 20px;
        box-sizing: border-box;
        cursor: pointer;
        &:last-child {
          margin-bottom: 0;
        }

        &.is-disabled {
          color: #75837c;
          cursor: not-allowed;

          &:hover {
            background: transparent !important;
            color: #75837c !important;
            font-weight: 100;
          }
          .el-checkbox {
            opacity: 0.7;
          }
        }

        &:hover {
          background: #808c87 !important;
          color: #fff !important;
          height: 38px;
        }

        &.hover {
          background: transparent !important;
          color: #fff !important;
          height: 38px;
          &:hover {
            background: #808c87 !important;
            color: #fff !important;
            height: 38px;
          }
        }

        &.selected {
          background: #808c87 !important;
          color: #fff !important;
          height: 38px;

          &.hover {
            background: #808c87 !important;
          }
        }
      }
    }
  }
}

传参属性解读

• filterOptions — 存储原始的下拉绑定的list,用来过滤（输入框改变的时候需要取到所有的数据进行筛选然后展示，所以该属性需要存储所有的下拉选的值）
• options — 下拉选绑定的list
• filterVal — 输入框绑定的值
• prop — 获取选中取值的key用那个字段
• chooseSelectList — 现在已经选中的下拉集合（在dropDownSearchTop方法中，之所以要拼接上chooseSelectList.concat是为了避免绑定的options中没有之前选中的值，页面展示不出来之前选中值的名称）

类名解读

• no-empty
  • 当我们模糊搜索时如果未匹配到相符合的数据，el-select展示暂无数据且将el-scrollbar下的内容全部隐藏掉，所以我们需要先把el-scrollbar样式设为block，否则输入框会被隐藏掉