问题:在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
},