el-select 自定义检索下拉框

vue 组件实现,附事件实现方式与逻辑

html

<template>
  <div>
    <el-select :popper-append-to-body="false" style="width: 400px !important;" class="select" multiple collapse-tags
      v-model="comSampleCode" placeholder="请选择">
      <div slot="empty" class="select-head empty-head">
        <el-input clearable v-model="searchKey" @change="searchChange(searchKey)"
          @clear="clearChange()"></el-input>
        <p class="noMess">未检索到匹配数据!</p>
      </div>
      <div class="select-head">
        <el-input class="head-ipt" v-model="searchKey" @change="searchChange" placeholder="范围检索时请输入最大值及最小值,中间以-区分,如1-2'">
          <i class="el-icon-search el-input__icon" slot="suffix" @click="searchChange(searchKey)">
          </i></el-input>
        <el-checkbox class="head-check" v-model="checkState"
          :indeterminate="comSampleCode.length == currentOption.length" @change="checkSelectAll">
          全选
        </el-checkbox>
      </div>
      <el-option style="position: relative;" :label="item" :value="item" v-for="(item, index) in currentOption"
        :key="index">
      </el-option>
    </el-select>
  </div>
</template>

js

// 获取数字是否在俩个值之间
export function calRange ([one, two],num){
  let min = Math.min(one, two)
  let max = Math.max(one, two)
  return min < Number(num) && Number(num) < max
}


<script>
import { calRange } from '@/utils/mathPoint'    //引入函数在上面

export default {
  props: {
    sampleCode: {
      type: Array,
      default: () => []
    },
    ctaskBizCode: {
      type: String,
    }
  },
  data() {
    return {
      sampleAll: [],
      checkState: false,
      searchKey: '',
      currentOption: []
    }
  },
  computed: {
    comSampleCode: {
      get() {
        return this.sampleCode
      },
      set(val) {
        this.$emit('update:sampleCode', val)
      }
    },
  },
  watch: {
    ctaskBizCode: {
      immediate: true,
      handler() {
        this.initData()
      }

    }
  },
  methods: {
    initData() {
      this.$request({
        url: this.$baseApi.SAMPLEMANAGE.queryAllSample,
        method: "GET",
        params: { ctaskCode: this.ctaskBizCode,sort:'code,desc' },
      }).then(
        (res) => {
          this.sampleAll = res;
          this.currentOption = this.sampleAll.map(o => o.code)
        },
        (err) => {
          this.sampleAll = [];
        }
      );
    },
    //全选事件
    checkSelectAll(val) {
      if (val) {
        this.comSampleCode = this.currentOption
      } else {
        this.comSampleCode = []
      }
    },
    //清空事件
    clearChange() {
      this.currentOption = this.sampleAll.map(o => o.code)
    },
    //检索事件
    searchChange(val) {
      if (!val) {
        return this.clearChange()
      }
      const [one, two] = val.split('-')
      let arr = []
      this.sampleAll.forEach(o => {
        let str = o.code.split('-').at(-1)
        if (two && calRange([one, two], str)) {
          arr.push(o.code)
        } else if (str == val || o.code == val) {
          arr.push(o.code)
        }
      })
      this.currentOption = arr

    }
  }
}

style

<style lang="scss" scoped>
.noMess {
  width: 100%;
  line-height: 50px;
  height: 50px;
  text-align: center;
}

.select {
  position: relative;

  ::v-deep {
    .el-select-dropdown__list{
      padding: 0;
    }
    .el-checkbox__label{
      padding-left: 2px;
    }
    .el-select-dropdown {
      width: 400px !important;
    }

    .select-head {
      padding: 10px 10px 0 15px;
      margin-top: 0;
      position: sticky;
      display: flex;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 9999;
      background-color: #fff;

      .head-ipt {
        width: 80%;
      }
      
      .head-check {
        text-align: center;
        width: 20%;
      }
    }
    .empty-head{
      flex-direction: column;
    }
  }
}
</style>