uniapp开发,模糊查询,下拉选择
JS模块:
const optionList = ref([]) //零件号初始列表
const options = ref([]) //零件号匹配列表
/** 获取所有零件列表 */
async function partListFun() {
const { data } = await getPartInfo()
console.log(data)
optionList.value = data
console.log(optionList.value)
}
/** 零件号模糊匹配 */
function fuzzyCheck(e : string) {
let reg = new RegExp(e) //声明正则变量
options.value = optionList.value.filter((item) =>
reg.test(item.partCode)
) //返回
}
/** 零件号选中 */
function checkItem(item : any) {
form.value.partCode = item.partCode
scanFocusTwo.value = false
scanFocusThree.value = true
}
/** 零件号获得焦点 */
function fuzzyIn() {
scanFocusTwo.value = true
check()
}
/** 零件号失焦 */
function fuzzyOut() {
setTimeout(() => {
scanFocusTwo.value = false
}, 100)
}
/** 零件号清空 */
function fuzzyClear() {
scanFocusTwo.value = false
setTimeout(() => {
scanFocusTwo.value = true
}, 100)
}
前端标签模块:
<u-form-item label="零件编号" prop="partCode" borderBottom="true" ref="item1">
<u--input :focus="scanFocusTwo" v-model="form.partCode" disabledColor="#f6f6f6" border="none"
placeholder="请输入" clearable @focus="fuzzyIn" @blur="fuzzyOut" @change="fuzzyCheck"
@clear="fuzzyClear"></u--input>
<view v-show="
scanFocusTwo && form.partCode
" class="absolute w-250 bg-white top-60 z-9 px-5 py-5 rounded-5" style="top: 110px">
<scroll-view v-if="options.length > 0" scroll-top="0" scroll-y="true" class="h-100">
<view class="flex justify-between items-center border-b py-5" v-for="(
item, index
) in options" :key="index" @click="checkItem(item)">
<view>
{{ item.partCode }}
</view>
<view class="text-gray-400">
{{ item.partName }}
</view>
</view>
</scroll-view>
<view v-else class="text-center py-10">
没有匹配的数据
</view>
</view>
</u-form-item>
更多推荐
所有评论(0)