标签：info uniApp preCheckList 多选 为例 label item let id

WXML:
<view class="form-item left-class" @click="hanleOpenWeek">
　　<view class="label">周时间</view>
　　<view class="mid-block">{{ info.weekTime | filterWeekTime }}</view>
　　<uni-icons class="icon" type="arrowright" color="#999999" size="20" />
</view>

// 模态框modal

<uni-popup ref="weekModal" type="bottom">
　　<view class="modal-content">
　　　　<view class="modal-head">选择时间</view>
　　　　<view class="modal-body">
　　　　　　<block v-for="(item, index) in weekOptions" :key="item.id">
　　　　　　　　<view class="text-block">
　　　　　　　　　　<view class="title">
　　　　　　　　　　　　<view class="label" :class="{ 'label-active': preCheckList.includes(item.id) }">{{ item.label }}</view>
　　　　　　　　　　</view>
　　　　　　　　　　<uni-icons
　　　　　　　　　　　　class="icon"
　　　　　　　　　　　　size="32"
　　　　　　　　　　　　:type="preCheckList.includes(item.id) ? 'checkbox-filled' : 'circle'"
　　　　　　　　　　　　:color="preCheckList.includes(item.id) ? '#3B79FF' : '#BFBFBF'"
　　　　　　　　　　　　@click="handleWeekClick(item)"
　　　　　　　　　　/>
　　　　　　　　</view>
　　　　　　</block>
　　　　</view>
　　　　<view class="modal-foot">
　　　　　　<button class="uni-default-button btn" @click.stop="handleWeekConfirm">确定</button>
　　　　</view>
　　</view>
</uni-popup>

JS:

　　const weekOptions = [
　　　　{
　　　　　　id: '1',
　　　　　　label: '周一'
　　　　},
　　　　{
　　　　　　id: '2',
　　　　　　label: '周二'
　　　　},
　　　　{
　　　　　　id: '3',
　　　　　　label: '周三'
　　　　},
　　　　{
　　　　　　id: '4',
　　　　　　label: '周四'
　　　　},
　　　　{
　　　　　　id: '5',
　　　　　　label: '周五'
　　　　},
　　　　{
　　　　　　id: '6',
　　　　　　label: '周六'
　　　　},
　　　　{
　　　　　　id: '7',
　　　　　　label: '周日'
　　　　}
　　]

　　data () {
　　　　return {
　　　　　　info: {
　　　　　　　　weekOptions,
　　　　　　　　preCheckList: [],
　　　　　　　　weekTime: ['1', '3']
　　　　　　}
　　　　}
　　},

　　// 时间的过滤器---拿到的是['1','3','5','6']数组，需将其转化成中文显示
　　filters: {
　　　　filterWeekTime (arr) {
　　　　　　let result = []
　　　　　　weekOptions.forEach(item => {
　　　　　　　　if (arr.includes(item.id)) {
　　　　　　　　　　result.push(item.label)
　　　　　　　　}
　　　　　　})
　　　　　　return result.join('，') || '选择周时间'
　　　　}
　　},

　　methods: {
　　　　// 打开modal
　　　　hanleOpenWeek () {
　　　　　　let { info } = this
　　　　　　//打开的时候选中状态---此处必须为深拷贝
　　　　　　this.preCheckList = _.cloneDeep(info.weekTime)
　　　　　　this.$refs['weekModal'].open()
　　　　},

　　　　// modal的选中
　　　　handleWeekClick (item) {
　　　　　　let { preCheckList } = this
　　　　　　// 选择中的时候如果有这个id，就删除这一条，木有就添加
　　　　　　let idx = preCheckList.indexOf(item.id)
　　　　　　if (idx > -1) {
　　　　　　　　this.preCheckList.splice(idx, 1)
　　　　　　} else {
　　　　　　　　this.preCheckList.push(item.id)
　　　　　　}
　　　　},

　　　　// modal的确认
　　　　handleWeekConfirm () {
　　　　　　// 确认的时候需要进行排序
　　　　　　this.info.weekTime = this.preCheckList.sort()
　　　　　　this.$refs['weekModal'].close()
　　　　}
　　}

标签：info,uniApp,preCheckList,多选,为例,label,item,let,id
来源： https://www.cnblogs.com/qianxiaoniantianxin/p/14416542.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。