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;
}