效果图：
需求：
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：
<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
}
