uniapp实现模糊查询下拉框选中取值
uniapp实现input和select查找功能
·
<template>
<view class="content">
<view style="height:40rpx"></view>
<view class="item">自定义数据索引对象:</view>
<select-lay :zindex="1011" :value="tval3" name="name3" slabel="myname" svalue="myvalue" placeholder="请选择项目3"
:options="datalist3" @selectitem="selectitem3">
</select-lay>
</view>
</template>
<script>
//可在此导入组件路径,且在初始化时注册components:{组件名}
export default {
data() {
return {
//模拟数据列表
datalist3: [],
//模拟初始数据
tval3: "myvalue1",
}
},
onReady() {
this.datalist3 = [{
myname: "我是myname1",
myvalue: "myvalue1"
},
{
myname: "我是myname2",
myvalue: "myvalue2"
},
{
myname: "我是myname3",
myvalue: "myvalue3"
},
{
myname: "我是myname4",
myvalue: "myvalue4"
}
];
},
methods: {
selectitem3(index, item) {
console.log(item)
if (index >= 0) {
this.tval3 = item.myvalue;
} else {
this.tval3 = ""
}
},
}
}
</script>
<style lang="scss">
.content {
width: 300px;
padding: 20px 0;
margin: 0 auto;
.item {
margin-bottom: 10px;
}
.btn {
margin-top: 20px;
}
}
</style>
插件可在uniapp插件市场下载地址:https://ext.dcloud.net.cn/plugin?id=5070
实际开发需要将模拟数组改为从接口获取赋值。
更多推荐
已为社区贡献4条内容
所有评论(0)