van-field实现el-select的远程搜索＋多选

注：仅做个人记录

1. el-select的远程搜索＋多选 效果：

2. 在app里，使用 vant-field ＋ van-picker 实现类似效果：

大致结构如下：

<!-- 结构 -->
    <van-popup
      v-model:show="showPopupObjectName"
      position="bottom"
      closeable
      @click-close-icon="objectNameCancel"
      :style="{ height: '85%' }"
    >
      <div class="popup-picker">
        <div class="pop-title">选择对象姓名</div>
        <div class="pop-content">对象姓名 :</div>
        <div class="pop-span-img">
          <div
            v-for="(item, index) in checkedObjNameList"
            :key="item.id"
            class="pop-content-span"
          >
            {{ item.name }}
            <img
              class="delete-img"
              src="@/assets/delete.png"
              alt=""
              @click="delBonusPointFile(index)"
            />
          </div>
        </div>
        <div>
          <van-field
            v-model="fieldValueObjectName"
            placeholder="请输入搜索对象姓名"
            @input="getObjectName"
          />
        </div>
        <div class="pop-pic-box">
          <van-picker
            :columns="objectNameList"
            :columns-field-names="customFieldNameObject"
            @confirm="onConfirmObjName"
            cancel-button-text=""
          />
        </div>
      </div>
      <div class="popup-work-auto-bottom">
        <van-button type="danger" color="#d94b4b" @click="objectNameSubmit"
          >提交</van-button
        >
        <van-button type="default" @click="objectNameCancel">取消</van-button>
      </div>
    </van-popup>

    /**
     * methods
     * */
   
   
    /**
     * 获取对象姓名列表
     * */
    getObjectName(e) {
      const params = {
        current: this.currentPage,
        size: this.pageSize,
        username: e.target.value,
      };
      allUserList(params)
        .then((res) => {
          this.selectLoading = false;
          if (
            res.data.statusCode === StatusCode.SUCCESS &&
            res.data.subStatusCode === SubStatusCode.SUCCESS
          ) {
            this.objectNameList = res.data.data.list;  //拿取数据
          } else {
            showFailToast(
              res.data.details ? res.data.details : "获取对象姓名列表失败"
            );
          }
        })
        .catch((err) => {
          this.selectLoading = false;
          showFailToast(
            err.data.details ? err.data.details : "获取对象姓名列表失败"
          );
        });
    },
    // 打开对象姓名选择
    openPopupObjNameBtn() {
      this.showPopupObjectName = true;
    },
    // 选择对象姓名确认
    onConfirmObjName({ selectedOptions }) {
      let isChecked = this.checkedObjNameList.findIndex(
        (item) => item.id === selectedOptions[0].id
      );
      if (isChecked !== -1) {
        showFailToast(`已选择过${selectedOptions[0].name}`);
      } else {
        this.checkedObjNameList.push({
          id: selectedOptions[0].id,
          name: selectedOptions[0].name,
        });
        this.objectNameRuleForm.name.push(selectedOptions[0].id);
      }
    },
    //删
    delBonusPointFile(index) {
      this.checkedObjNameList.splice(index, 1);
      this.objectNameRuleForm.name.splice(index, 1);
    },
    // 对象姓名提交
    objectNameSubmit() {
      this.showPopupObjectName = false;
    },
    // 对象姓名取消
    objectNameCancel() {
      if (this.approveIsHave) {
        this.showPopupObjectName = false;
      } else {
        this.checkedObjNameList = [];
        this.objectNameRuleForm.name = [];
        this.fieldValueObjectName = "";
        this.objectNameList = [];
      }
    },

<!-- css -->
.popup-picker::v-deep .van-field__control {
  border: 1px solid #858484;
  height: 30px;
}
.pop-title {
  font-size: 18px;
  padding: 10px;
  text-align: center;
  font-weight: bold;
}
.pop-content {
  font-size: 16px;
  padding: 10px;
}
.pop-span-img {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 10px;
}
.pop-content-span {
  margin: 8px 8px 0 0;
  padding: 5px 18px 5px 8px;
  background-color: #f4f4f5;
  position: relative;
}
.delete-img {
  cursor: pointer;
  position: absolute;
  z-index: 2;
  right: 0;
  top: 25%;
  width: 15px;
}
.pop-pic-box {
  border: 1px solid #f6f6f6;
  background-color: #f6faff;
  margin: 0 0 40px;
}
.popup-work-auto-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding: 8px 10px;
  width: 95%;
  position: fixed;
  bottom: 0;
  background-color: #ffffff;
  button {
    flex:1;1
    margin:0 5px;
  }
}