uni-app:firstUI框架的选择器Select改造，添加一个搜索的插槽

耶啵奶膘

于 2025-04-02 18:25:30 发布

阅读量414

点赞数 3

分类专栏： uni、vue 文章标签： uni-app 前端

本文链接：https://blog.youkuaiyun.com/xulihua_75/article/details/146958894

版权

uni、vue 专栏收录该内容

154 篇文章

订阅专栏

在这里插入图片描述

<fui-select :show="showSiteType" :options="siteTypeList" textKey="dict_label" title="请选择站点类型"
@confirm="chooseSiteType" @close="onCloseSiteType">
	<template v-slot:search>
		<view>
			<fui-search-bar background="#ffffff" inputBackground="#FAFAFA"
				@search="searchSiteType"></fui-search-bar>
		</view>
	</template>
</fui-select>

const showSiteType = ref(false) //站点类型选择
// 站点类型
function getSiteTypeList(key) {
	api.getSiteTypeList({
		keyworld: key,
	}).then(res => {
		if (res.code == 200) {
			console.log(res);
			siteTypeList.value = res.data
		}
	})
}

function searchSiteType(e) {
	let key = e.detail.value
	getSiteTypeList(key)
}

function chooseSiteType(e) {
	state.type_id = e.options.dict_value//站点类型id
	state.typeIdName = e.options.dict_label//站点类型名称
	onCloseSiteType()
}

function onCloseSiteType() {
	showSiteType.value = false
}