全部设置为仅查看/可编辑【第一种方法:watch】
效果图:
![](https://img2020.cnblogs.com/blog/1742906/202106/1742906-20210615151348616-2049380644.png)
需求:
1、根据接口数据渲染list中每条数据,operationType===1则【仅查看】高亮,operationType===2则【可编辑】高亮
2、如果list中的所有数据都是【仅查看】,那么底部的【全部设置为仅查看】高亮,反之【全部设置为可编辑】高亮。如果既有【仅查看】又有【可编辑】,那么这连个按钮都不亮
3、点击【全部设置为仅查看】则将list中所有数据都设置为【仅查看】高亮,点击【全部设置为可编辑】则将list中所有数据都设置为【可编辑】高亮
实现思路:watch监听
<template> <div class="my-radio"> <ul> <li v-for="item in list" :key='item.id'> <div class="name"> <span>{{item.userName}}</span> </div> <van-radio-group v-model="item.operationType" direction="horizontal"> <van-radio :name="1">仅查看 <template #icon="props"> <div :class="props.checked ? 'activeIcon' : 'inactiveIcon'"><span></span></div> </template> </van-radio> <van-radio :name="2">可编辑 <template #icon="props"> <div :class="props.checked ? 'activeIcon' : 'inactiveIcon'"><span></span></div> </template> </van-radio> </van-radio-group> </li> </ul> <van-radio-group class="set-all" v-model="operationType" direction="horizontal"> <van-radio :name="1">全部设置为仅查看 <template #icon="props"> <div :class="props.checked ? 'activeIcon' : 'inactiveIcon'"><span></span></div> </template> </van-radio> <van-radio :name="2">全部设置为可编辑 <template #icon="props"> <div :class="props.checked ? 'activeIcon' : 'inactiveIcon'"><span></span></div> </template> </van-radio> </van-radio-group> </div> </template> <script> export default { data() { return { list: [ { id: 266, operationType: 2, userName: 'brandotest3' }, { id: 267, operationType: 1, userName: 'brandotest4' }, { id: 268, operationType: 2, userName: 'brandotest5' }, { id: 269, operationType: 2, userName: 'brandotest6' } ], operationType: null } }, watch: { list: { handler(newList) { const arr = newList.map((item) => item.operationType) const allReadonly = arr.every((item) => item === 1) const allEditable = arr.every((item) => item === 2) if (allReadonly) { this.operationType = 1 } else if (allEditable) { this.operationType = 2 } else { this.operationType = null } }, deep: true, immediate: true }, operationType: { handler(newVal) { if (newVal !== 1 && newVal !== 2) return this.list.forEach((item) => { item.operationType = newVal }) } } } } </script>
css:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style lang="less" scoped> .my-radio { padding: 20px; ul { li { width: 100%; box-sizing: border-box; height: 52px; background-color: #f3f6f9; border-radius: 6px; display: flex; align-items: center; justify-content: space-between; padding-left: 15px; margin-top: 10px; .name { width: 40%; height: 100%; display: flex; align-items: center; word-break: break-all; position: relative; > span { font-weight: bold; color: #4d5c82; } > i { width: 16px; height: 16px; background-color: #fc5e5e; border-radius: 50%; position: absolute; top: 10px; right: -20px; text-align: center; line-height: 16px; color: #fff; font-size: 12px; } } @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) { .name { width: 35%; } } .van-radio-group { margin-right: 15px; .van-radio:last-child { margin-right: 0; } } } } .set-all { display: flex; justify-content: space-between; margin-top: 35px; .van-checkbox { .van-checkbox__icon { font-size: 18px; } .van-checkbox__label { font-size: 14px; color: #4d5c82; line-height: 1; } } .van-radio:last-child { margin-right: 0; } } // 选中和未选中样式-start .activeIcon { width: 18px; height: 18px; border: 2px solid #198cff; border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; > span { display: block; width: 10px; height: 10px; background: #198cff; border-radius: 50%; } } .inactiveIcon { width: 18px; height: 18px; border: 2px solid #e0e5f5; border-radius: 50%; box-sizing: border-box; } // 选中和未选中样式-end }