uniapp 基于单选框多选框实现上拉触底多选/单选、回显

问题:在uniapp上 实现分页多选的操作

结果:可以传接口(接口只能post请求) 可以搜索 下面是结果图片展示 单选多选都可以

 头部标题 搜索参数 等等都是需要传值的

 

 下面是组件的完整代码

<template>
	<u-popup width="100%" v-model="showPickerCheckbox" :mode="position" :mask-close-able='false'>
		<view class='topTitle'>
			<text style="color:#969799;" @click="$emit('update:showPickerCheckbox', false)">取消</text>
			<span style="font-size:16px;font-weight:bold;">{{headName}}</span>
			<text style="color:#6398fb;" @click="confirm">确认</text>
		</view>
		<view class="search">
			<u-search height='70' shape="square" :action-style="{color:'blue'}" :placeholder="`请搜索${headName}`"
				:clearabled="true" v-model="inputValue" @custom='search'></u-search>
		</view>
		<scroll-view :scroll-top="scrollTop" scroll-y class="scroll-Y" @scrolltolower='scrollBottom'
			lower-threshold='100'>
			<u-checkbox-group style="width: 100%;" v-if='mode'>
				<u-cell-item :title="item[label]" :arrow="false" v-for="(item, index) in list" clickable
					:key="item[value]" style="width: 100%;">
					<u-checkbox slot="right-icon" v-model="item.checked" :name="item[value]" @change="checkboxChange" />
				</u-cell-item>
			</u-checkbox-group>
			<u-radio-group v-model="radioValue" v-else>
				<u-cell-item :title="item[label]" :arrow="false" v-for="(item, index) in list" clickable
					:key="item[value]" @click='getRadioItem(item)'>
					<u-radio slot="right-icon" :disabled="false" :name="item[value]"></u-radio>
				</u-cell-item>
			</u-radio-group>
		</scroll-view>
	</u-popup>
</template>

<script>
	import {
		selProfessional
	} from '@/api/index.js'
	import {
		isSuccess,
		pageSize
	} from '@/utils/index.js'
	export default {
		name: "multiple-picker",
		props: {
			showPickerCheckbox: {
				type: Boolean,
				default: true
			},
			multList: {
				type: Array,
				default: () => []
			},
			label: {
				type: String,
				default: 'label'
			},
			value: {
				type: String,
				default: 'value'
			},
			headName: {
				type: String,
				default: '处理人'
			},
			position: {
				type: String,
				default: 'bottom'
			},
			url: {
				type: String,
				default: '/sysprofessional/pages'
			},
			mode: {
				type: Boolean,
				default: true
			},
			fieldName: {
				type: String,
				default: ''
			},
			fieldValue: {
				type: String,
				default: ''
			},
			isClose: {
				type: String,
				default: ''
			},
			searchName: {
				type: String,
				default: ''
			},
		},
		created() {
			this.getList()
			if (this.mode) {
				this.checkboxGroupValue = this.fieldValue?.trim() ? this.fieldValue.split(',') : []
			} else {
				this.radioValue = this.fieldValue
			}
		},
		onLoad() {
			this._freshing = false;
			setTimeout(() => {
				this.triggered = true;
			}, 1000)

		},
		data() {
			return {
				result: [],
				isloading: false,
				pages: {
					pageNum: 1,
					pageSize: pageSize,
				},
				total: 0,
				list: [],
				triggered: false,
				scrollTop: 0,
				inputValue: '',
				searchValue: '',
				checkboxGroupValue: [],
				radioValue: ''
			};
		},
		watch: {},
		methods: {
			selectCheckList(list) {
				if (this.checkboxGroupValue.length > 0) {
					const checkboxGroupValue = this.checkboxGroupValue
					this.list = list.map(i => ({
						...i,
						checked: i.checked || checkboxGroupValue.includes(i[this.value])
					}))
				} else {
					this.list = list
				}
			},
			scrollBottom(e) {
				if (this.pages.pageNum * this.pages.pageSize >= this.total) {
					uni.$showMsg('数据加载完毕!')
					return
				}
				if (this.isloading) return
				this.pages.pageNum++
				this.getList()
			},
			// 查询 装置 专家 等列表
			async getList(type = true, searchValue) {
				this.isloading = true
				const {
					data
				} = await selProfessional(this.url, {
					pages: {
						...this.pages
					},
					[this.searchName]: this.searchValue
				})
				const {
					code,
					data: res,
					message
				} = data
				if (isSuccess(code)) {
					if (type) {
						this.selectCheckList([...this.list, ...res.rows])
					} else {
						this.selectCheckList(res.rows)
					}
					this.pages = {
						pageNum: res.pageNum,
						pageSize: res.pageSize
					}
					this.isloading = false
					this.total = res.total
				} else {
					this.isloading = false
					uni.$showMsg(message)
				}
			},
			search() {
				const searchValue = this.inputValue.trim()
				this.searchValue = searchValue
				this.pages.pageNum = 1
				this.getList(false)
			},
			checkboxChange(e) {
				if (e.value === true) {
					this.checkboxGroupValue.push(e.name)
				} else {
					this.checkboxGroupValue = this.checkboxGroupValue.filter(i => i !== e.name)
				}
			},
			confirm() {
				if (this.mode) {
					this.$emit('success', this.checkboxGroupValue, this.fieldName, this.isClose)
				} else {
					this.$emit('success', [this.radioValue], this.fieldName, this.isClose)
				}
			},
			// 单选 选中当前行
			getRadioItem(item) {
				this.radioValue = item[this.value]
			},
		},
	}
</script>

<style lang="scss">
	.scroll-Y {
		height: 500rpx;
		touch-action: none;
	}
	::v-deep .u-radio-group{
		width: 100%;
	}
	.topTitle {
		display: flex;
		justify-content: space-between;
		height: 44px;
		line-height: 44px;
		padding: 0 20rpx;
	}

	.search {
		padding: 10rpx 20rpx;

		.searchBtn {
			background-color: rgb(41, 121, 255);
			color: #fff;
		}
	}
</style>

2.如何使用 多选

showPickerCheckbox弹层显示 label和value 类似下拉框的label和value一个意思 键和值

mode是控制的单选还是多选 true为多选默认值 其余参数 单选多选一样

fieldValue回显传的值 传的是字符串 数组的话[1,2]转为1,2格式传入

fieldName字段名 确定后会返回该字段名 根据字段名找对应的传入值

searchName搜索的字段名  headName标题名

// 这是动态表单的 多段
v-for='i in list'
<multiple-touch-load :showPickerCheckbox.sync='i.isContractingUnit' 
label='deptName' value='deptName' :mode="false" 

@success='(result,fieldName,closeName)=>getMultipleResult(result,fieldName,closeName,arrIndex)' 
:fieldValue='i.contractingUnit' fieldName='contractingUnit'
 searchName='deptName'
 isClose='isContractingUnit' url='/sysDept/trees'
 headName='承包单位' 
/>

点击确定的函数

		getMultipleResult(result, fieldName, closeName, index) {
				const str = result.join(',')
				this.form.list[index][fieldName] = str
				this.form.list[index][closeName] = false
			},

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值