一、元素标签写法
<el-form-item label="配件名称" prop="materialName"><el-autocomplete style="width:100%" v-model="form_feiyong.materialName" :fetch-suggestions="querySearchVType" clearable placeholder="请选择配件名 称" @select="selectMaterial" value-key="value" @change="selectMaterial"/></el-form-item>
二、具体方法
const restaurants = ref([])
// 配件名称过滤修改
const querySearchVType = (queryString:string, cb:any)=>{restaurants.value = state.materialOption;let results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value;// 调用 callback 返回建议列表的数据cb(results);
}
// 过滤方法的实现
const createFilter = (queryString:string)=> {
return (restaurant:any) => {
// 第一个字或者字母匹配 return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > ===0 );
// 下面的写法支持模糊查询
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
}
}
// 选择配件名称
const selectMaterial=(value) =>{if(value === ""){state.form_feiyong.materialSpec=""state.materialSpecOption=[]state.form_feiyong.materialType=""state.materialTypeOption=[]}else{// 根据配件名称过滤配件规格state.materialSpecOption=state.materialAllOption.filter((item) =>{return item.materialName == value.value})}
}
