uniapp+uView单选框多选框使用与模糊搜索
<template>
<!-- 类别筛选组件 -->
<view class="timeInput"
>{{filterArea}}
<u-icon name="arrow-up-fill" size="12" :color="areaPopup == true ? '#fff' : '#999'" class="rightIcon"
v-if="!showAreaIcon"></u-icon>
<u-icon name="arrow-down-fill" size="12" :color="areaPopup == true ? '#fff' : '#999'" class="rightIcon"
v-else></u-icon>
</view>
<view>
<u-search placeholder="请输入关键词搜索" shape="square" :showAction="false" v-model="searchKeyword"
:clearabled="true" @change="searchArea" class="searchBox"></u-search>
<view class="indicatorText">
*可同时选择{{categoryMaxNum >= categoryList.length ? categoryList.length : categoryMaxNum}}项
</view>
<!-- 单选 -->
<view style="margin: 0 5% 34rpx;height: 300rpx;overflow-y: scroll;" v-if="areaPopup&&categoryMaxNum==1&&radioAreaArr">
<u-radio-group v-model="radioAreaArr" placement="column" @change="radioAreaArrChange">
<u-radio :customStyle="{marginBottom: '16rpx'}" activeColor="#3849B4" v-for="(item, index) in categoryOptions" :key="index"
:label="item.value" :name="item.key" :checked="item.checked">
</u-radio>
</u-radio-group>
</view>
<!-- 多选 -->
<u-checkbox-group v-if="areaPopup&&categoryMaxNum!==1" v-model="areaArr" @change="checkboxChange"
placement="column" class="indicatorCheckbox">
<u-checkbox :customStyle="{marginBottom: '16rpx'}" iconSize="15" activeColor="#3849B4"
v-for="item in categoryOptions" :key="item.value" :label="item.value" :name="item.key"
:disabled="item.disabled" :checked="item.checked">
</u-checkbox>
</u-checkbox-group>
</view>
</template>
<script>
import {
fuzzyQuery,
} from './../../common/common.js'
import { //接口
queryIndicatorList
} from "@/api/chart.js"
export default {
data() {
return {
areaList: [], //省份前两项数据
filterArea: '省份' || filterArea, // 省份值
showAreaIcon: true, // 是否显示省份下拉图标
areaArr: [], // 选中的省份值
searchKeyword: '', // 搜索框值
nodeId: null, // 路径传来的详情id
categoryMaxNum: 0, //选择代码最大个数
categoryList: [], // 省份筛选数据
categoryOptions: [], // 省份数据
areaOptions: [],
radioIndicatorList: '', //单选的值
radioAreaArr: '', //单选的值
}
},
onLoad(options) {
this.nodeId = options.nodeId
},
created() {
this.getIndicatorList()
},
methods: {
getIndicatorList() {
let params = {
nodeId: Number(this.nodeId)
}
queryIndicatorList(JSON.stringify((params))).then(res => {
if (res.data) {
this.filterArea = res.data.categoryName || '省份'
this.categoryMaxNum = res.data.categoryMaxNum
this.areaOptions = res.data.categoryOption
this.categoryOptions = []
if (res.data.categoryOption != null) {
// this.areaList.push(res.data.categoryOption[0], res.data.categoryOption[1])
this.categoryList = res.data.categoryOption
this.categoryList.forEach(res => {
this.$set(res, 'checked', false)
this.$set(res, 'disabled', false)
})
window.sessionStorage.setItem('categoryList', JSON.stringify(this.categoryList));
if (this.categoryMaxNum > 1 && this.categoryList.length > 1) { //多选
this.categoryOptions = this.categoryList.filter((o, i) => i <= 1)
this.categoryList[0].checked = true
this.categoryList[1].checked = true
this.areaArr.push(this.categoryList[0].key, this.categoryList[1].key)
this.checkboxChange(this.areaArr)
} else { //单选
this.categoryOptions.push(this.categoryList[0])
this.categoryList[0].checked = true
this.areaArr.push(this.categoryList[0].key)
this.radioAreaArr = this.categoryList[0].key //设置单选的值
}
}
} else {
uni.$u.toast(res.msg)
}
})
},
// 单选
radioAreaArrChange(n) {
console.log('n', n)
this.areaArr = []
this.areaArr.push(n)
//设置勾选
this.categoryOptions.forEach(res => {
let find = this.areaArr.findIndex(item => {
return item == res.key
})
if (find > -1) {
res.checked = true
} else {
res.checked = false
}
})
},
// 多选
checkboxChange(n) {
this.areaArr = []
this.areaArr = n
this.categoryOptions.forEach(res => {
let find = n.findIndex(item => {
return item == res.key
})
if (find > -1) {
res.checked = true
} else {
res.checked = false
}
})
if (this.areaArr.length == this.categoryMaxNum&&this.categoryMaxNum!==1) {
this.categoryOptions.forEach(e => {
if (e.checked) {
e.disabled = false
} else {
e.disabled = true
}
})
} else {
this.categoryOptions.forEach(e => {
e.disabled = false
})
}
},
// 搜索
searchArea(e) {
if (e.trim() == '') {
let arr = this.categoryOptions.filter(i => {
return i.checked
})
if (arr.length == 0) {
this.categoryOptions = this.areaOptions
} else {
this.categoryOptions = arr
if(this.categoryMaxNum==1){
this.radioAreaArr = ''
this.$nextTick(()=>{
this.radioAreaArr = arr[0].key//单选的值
})
}
}
} else {
let arr2 = this.categoryOptions.filter((o, i) => o.checked)
let categoryList = sessionStorage.getItem('categoryList')
categoryList = JSON.parse(categoryList)
let arr = fuzzyQuery(categoryList, arr2, this.searchKeyword)
let arr3 = arr.slice(0, 500)
if (arr.length > 500) { //当搜索的数据超1000条时候,默认显示前1000条数据,避免页面卡死
this.categoryOptions = arr2.concat(arr3)
} else {
this.categoryOptions = arr2.concat(arr)
}
this.checkboxChange(this.areaArr)
}
}
}
}
</script>
<style lang="scss" scoped>
uni-page-body,
uni-page-refresh {
height: 100%;
overflow: hidden;
}
.b-nav-bar {
height: 88rpx;
}
.page {
background: #F1F2F4;
height: 100%;
overflow: hidden;
.title {
font-size: 32rpx;
height: 88rpx;
line-height: 88rpx;
width: 440rpx;
background-color: #fff !important;
text-align: center;
}
.nBack {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.icon-shaixuan1 {
font-size: 26rpx;
margin-right: 8rpx;
}
.sx-txt {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
.main-content {
position: relative;
display: flex;
flex-direction: column;
.chart-warp-box {
background-color: #FFF;
margin-bottom: 20rpx;
border-top: 1px solid #DCDEE3;
flex-shrink: 0;
ul {
list-style-type: none;
line-height: 40rpx;
margin: 20rpx 0;
padding: 0;
padding-left: 65rpx;
}
.chart-tab {
color: #999;
font-size: 20rpx;
.text {
color: #999;
font-size: 20rpx;
display: inline-block;
}
.text2 {
opacity: .6;
}
.tab-color {
width: 40rpx;
height: 16rpx;
border-radius: 3rpx;
display: inline-block;
margin-right: 10rpx;
}
.no-show-color {
background: #999 !important;
opacity: .6;
}
.tab-color2 {
width: 40rpx;
height: 8rpx;
display: inline-block;
border-bottom: 2px solid #333;
margin-right: 10rpx;
vertical-align: 10rpx;
}
.no-show-color2 {
border-bottom-color: #999 !important;
opacity: .6;
}
}
}
.list-warp-box {
padding: 40rpx 30rpx;
background-color: #FFF;
.uniTable {
display: flex;
justify-self: center;
align-items: center;
}
.list-box {
height: 543rpx;
background-color: #0086B3;
}
}
}
/deep/ .uni-table-td {
padding: 4px 10px;
font-size: 24rpx;
}
/deep/ .uni-table-th {
padding: 4px 10px;
line-height: 23px;
font-weight: bold;
color: #3849B4;
font-size: 24rpx;
background: #F7F8FB;
}
/deep/ .uni-table-tr:nth-child(2n + 3) {
background-color: #F7F8FB !important;
}
}
.u-page {
padding: 0;
&__item {
&__title {
color: $u-tips-color;
background-color: $u-bg-color;
padding: 15px;
font-size: 15px;
&__slot-title {
color: $u-primary;
font-size: 14px;
}
}
}
}
.u-collapse-content {
color: $u-tips-color;
font-size: 14px;
}
.filterPopup {
width: 100%;
.timeInput {
background-color: #F1F2F4;
margin: 0 5% 44rpx;
height: 70rpx;
color: #999999;
font-size: 28rpx;
padding: 0rpx 30rpx;
display: flex;
align-items: center;
position: relative;
border-radius: 10rpx;
.rightIcon {
position: absolute;
top: 20rpx;
right: 20rpx;
}
&.active {
background-color: #3849B4;
color: #fff;
}
&:first-child {
margin-top: 44rpx;
}
}
.btnOptions {
display: flex;
.cancelBtn {
border-radius: 0;
background-color: #F1F2F4;
color: #666666;
border: none;
}
.creatBtn {
border-radius: 0;
background-color: #3849B4;
border: none;
}
}
.indicatorText {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #C0C0C0;
margin-left: 5%;
margin-bottom: 38rpx;
}
.indicatorCheckbox {
margin: 0 5% 34rpx;
height: 300rpx;
overflow-y: scroll;
}
.searchBox {
width: 90%;
margin: 0 0 24rpx 5% !important;
background-color: #fff;
border: 1px solid #DCDEE3;
border-radius: 8px;
height: 70rpx;
}
}
.lyyTable {
flex: 1;
overflow: hidden;
}
/deep/ .u-radio {
margin-bottom: 46rpx !important;
}
/deep/ .u-checkbox {
margin-bottom: 46rpx !important;
}
/deep/ .u-search__content {
background-color: #fff !important;
}
/deep/ .u-search__content__input {
background-color: #fff !important;
height: 0rpx !important;
}
/deep/ .u-popup__content {
border: 1px solid #DCDEE3;
}
.uni-progress {
color: red;
/deep/ .uni-progress-info {
font-size: 10px !important;
}
}
/deep/ .no_data {
font-size: 28rpx;
color: #666666;
}
</style>
common.js文件公共方法
// 模糊搜索
export function fuzzyQuery(list, arrSelect, keyWord) {
var reg = new RegExp(keyWord.trim());
var arr = [];
for (var i = 0; i < list.length; i++) {
if (arrSelect.length) {
let find = arrSelect.find(res => {
return res.key == list[i].key
})
if (find) { //已经选中的数据
continue // 跳过本次循环,继续下⼀个循环
}
}
if (reg.test(list[i].value)) {
arr.push(list[i]);
}
}
return arr;
}
uniapp+uView单选框多选框使用与模糊搜索的更多相关文章
- 关于通过jq /js 实现验证单选框 复选框是否都有被选中
今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...
- 使用 SVG 制作单选和多选框动画【附源码】
通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...
- php一些单选、复选框的默认选择方法(示例)
转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...
- Python3+Selenium3+webdriver学习笔记8(单选、复选框、弹窗处理)
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...
- iCheck获取单选和复选框的值和文本
//获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...
- MFC_2.1使用单选和多选框
使用单选和多选框 单选 1.拖控件 设置名字,CTRL+D设置顺序,属性设置第一个GROUP为TRUE: 2.设置第一个按钮绑定变量为 值 INT型 名称m_RadioIndxe; 3.设置单击响应内 ...
- jquery单选框 复选框表格高亮 选中
单选框: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/T ...
- 纯css美化单选、复选框
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- mui单选和多选框
具体见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <ti ...
- django框架 input 文本框 单选框 多选框 上传文件 等数据传输后台的程序 request.getlist接收多个结果 obj.chunks 用于文件传输 enctype="multipart/form-data文件传输必备表头
在上一个博客中,我们学习了如果创建django,这里我们主要讲如何把数据传给后台 在url文件中, 从app01中导入views, 以及创建url(r'^login/', views.login) f ...
随机推荐
- 使用ADB拷贝Android设备的文件夹
在当前目录下执行,拷贝到当前目录. 拷贝照片 adb pull sdcard/DCIM 删除照片 adb shell rm -rvf sdcard/DCIM 拷贝图片 adb pull s ...
- my tools in windows
Q-Dir the Quad Explorerhttp://www.q-dir.com/ NetSpeed Monitor - Network Speed Monitor for Windows 10 ...
- 使用python启动appium(虚拟器)
1.先安装各种库 https://www.cnblogs.com/zhanglingling00/p/14169462.html pip install Appium-Flutter-Finder p ...
- C# RGB转Brush
C#中自定义一个Brush,使用Color赋RGB值给Brush: dataGrid2.HorizontalGridLinesBrush = new SolidColorBrush(System.Wi ...
- 备份Cisco交换机设备配置
需求: 备份网络核心设备配置 工具: 1.3CDaemon软件,用于配置TFTP服务器 链接:http://www.china-ccie.com/download/3CDaemon/3CDaemon. ...
- SQL Server【基础】DDL 数据定义语言
DDL 操作数据库,schema,表等语句 Create,Alter,Drop,DECLARE database --1.说明:创建数据库 Create DATABASE database-name ...
- kotlin inline的缺点
inline关键字修饰的方法,可以在运行时将代码复制到使用处 用来控制打印好用 但有两个缺点: 一.修饰的方法不能太大,行数也不能太多,不然会造成很多重复代码 2.控制打印时,方法的行数最好与使用的行 ...
- hnsw
Hnswlib - fast approximate nearest neighbor search Header-only C++ HNSW implementation with python b ...
- 我和Java这些年的故事(五)
时光荏苒,我来到了IBM.和慕名已久的WebSphere Application Server(WAS)打起了交道. 之前我搞过Weblogic,对应用服务器的特性有了一定的了解.但WAS无疑更为庞大 ...
- Java 03-基础 堆和栈(另,理解Java内存)
概述: 栈区(STACK)堆区(HEAP) 1.栈中主要存放一些基本类型的变量,且每一个基本数据类型有固定的大小(byte,short,int,long,float,double,boolean,ch ...