vue实现绑定select以及多选，清空检索条件

1、最近支援前端开发遇到select绑定数据，页面代码细节如下：

    <el-form :inline="true" :model="params" class="demo-form-inline" ref="demandRef" >

      <el-form-item label="需求名称" prop="demandName" >

        <el-input v-model="params.demandName" clearable placeholder="请输入" />

      </el-form-item >

      <el-form-item label="需求企业" prop="supplierCompanyName" >

        <el-input v-model="params.supplierCompanyName" clearable placeholder="请输入" />

      </el-form-item >

      <el-form-item label="报价单号" prop="quotationNumber" >

        <el-input v-model="params.quotationNumber" clearable aria-placeholder="请输入" />

      </el-form-item >

      <el-form-item label="报价状态" prop="quotationStatus" >

        <el-select v-model="params.quotationStatus" class="m-2" >

          <el-option

              v-for="item in options"

              :key="item.value"

              :label="item.label"

              :value="item.value"

          />

        </el-select >

      </el-form-item >

      <el-form-item >

        <el-button type="primary" @click="handleGetQuotation" >搜索</el-button>

        <el-button type="primary" @click="resetDemandFields">重置</el-button>

      </el-form-item >

    </el-form >

js如下：

<script setup >

import { getDemandQuotationListApi,getDemandQuotationDetailApi,updateDemandQuoteStatusApi } from "@/api/supplyChain/manage/quotation/index"

import { getDictDetails} from "@/api/common"

import TabNav from 'element-plus/es/components/tabs/src/tab-nav'

import { ref } from 'vue'

//全局检索条件对象，主要用于清空重置功能

const demandRef = ref(null)

//下拉框数据存放数组对象

const options = ref([])

/*获取报价管理列表*/

const tableList=ref([])

const total=ref(0)

const params=ref({

    quotationStatus: "",

    supplierCompanyName: "",

    quotationNumber:"",

    demandName:"",

    pageIndex: 1,

    pageSize: 10

})

async function handleGetQuotation(){

    let res = await getDemandQuotationListApi(params.value)

    tableList.value=res.items;

    total.value=res.totalCount;

}

/**获取状态下拉框数据 */

GetQuotationStatus()

async function GetQuotationStatus(){

  //options.value.push({label:"", value: "全部", sort: 0});

  options.value=await getDictDetails("QuotationStatus");

  options.value.splice(0,0,{label:"全部", value: "", sort: 0}); //根据索引位置向数组中插入数据

}

</script >

2、如果想多选，则在select中加入multiple，如下：

<el-form-item label="报价状态" prop="quotationStatus" >

        <el-select v-model="params.quotationStatus" class="m-2" multiple >

          <el-option

              v-for="item in options"

              :key="item.value"

              :label="item.label"

              :value="item.value"

          />

        </el-select >

      </el-form-item >

3、重置功能

需配置ref="demandRef"，且必须放到<el-form>标签中，

其他检索条件，最好也放到<el-form-item prop="demandName">中,且加入prop属性，prop值要与

js中定义得全局搜索对象里定义得字段一致，

function resetDemandFields(){

  demandRef.value.resetFields();//重置所有得输入、下拉框

}

 4、第二种重置

直接在标签中使用resetFields(),需要配置全局定义得检索对象demandRef

      <el-button type="primary" @click="demandRef.resetFields()">重置</el-button >