el-select选择框多选进行搜索功能实现

多选框搜索功能实现：

效果图：

mysql数据库的数据类型

html

<el-form-item>
  <span>分类：span>
  <el-select
    multiple
    v-model="queryInfo.influenceType"
    @change="typeSearchQueryInfo"
    clearable
    placeholder="请选择"
    style="width: 75%"
  >
    <el-option
      v-for="item in influenceTypeOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >el-option>
  el-select>
el-form-item>

data

// 影响分类
influenceTypeOptions: [],
// 整个功能模块的缓存，v-model绑定的实际是influenceType，按自己需求替换
const state = () => ({
    activeName: 'myself',
    abnormalDate: [],
    queryInfo: {
        page: 1,
        page_size: 10,
        status: '',
        myself: 'm',
        startTime: '',
        endTime: '',
        responsibleDept: '',
        // influenceType: ''
        influenceType: []
    },
})

const mutations = {
    setActiveName(state, activeName) {
        state.activeName = activeName
    },
    setAbnormalDate(state, abnormalDate) {
        state.abnormalDate = abnormalDate
    },
    setQueryInfo(state, {page, page_size, status, myself, responsibleDept,influenceType}) {
        state.queryInfo.page = page
        state.queryInfo.page_size = page_size
        state.queryInfo.status = status
        state.queryInfo.myself = myself
        state.queryInfo.responsibleDept = responsibleDept
        state.queryInfo.influenceType = influenceType
    }

}

export default {
    namespaced: true,
    state,
    mutations
}

js-methods

// 分类多选搜索
typeSearchQueryInfo(value){
  // 升序数组进行搜索
  this.queryInfo.influenceType = value.sort(function(a,b){
    return a-b;
  })
  this.queryInfo.page = 1;
  this.$store.commit("warehouseVuex/setQueryInfo", {
    page_size: this.queryInfo.page_size,
    page: this.queryInfo.page,
    status: this.queryInfo.status,
    myself: this.queryInfo.myself,
    responsibleDept: this.queryInfo.responsibleDept,
    influenceType: this.queryInfo.influenceType
  });
  // 重新获取仓库异常问题列表数据
  this.dataLoading = true;
  this.getWarehouseProblemData();
},
// 获取仓库异常问题列表数据
async getWarehouseProblemData () {
  // 添加检索的时间区间信息
  if (this.abnormalDate !== '' && this.abnormalDate) {
    if (this.abnormalDate.length > 0) {
      this.queryInfo.startTime = this.abnormalDate[0];
      this.queryInfo.endTime = this.abnormalDate[1];
    }
  }
  const queryInfoClone = _.cloneDeep(this.queryInfo)
  // 未来可能有用的分类搜索
  queryInfoClone.influenceType = this.queryInfo.influenceType.join(',')
  // 请求数据
  const { data: res } = await this.$http.get("warehouse-problems/", {
    params: queryInfoClone,
  });

  if (res.results.code !== 200) {
    return this.$message.error("获取追踪问题列表失败！");
  }
  this.warehouseProblemData = res.results.data;
  this.total = res.count;
  this.dataLoading = false;
},

接口增改做升序排序

if 'influenceType' in request.data and request.data['influenceType']:
    # sort用来升序排序
    serializer.validated_data['influenceType'] = ','.join(map(str,sorted(request.data["influenceType"])))

最后，过滤器绑定该字段就好了(DRF框架)

influenceType = django_filters.CharFilter(field_name='influenceType', lookup_expr='icontains', help_text='影响分类')