全部设置为仅查看/可编辑【第二种方法:watch+methods】
<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> <div class="set-all"> <van-checkbox v-model='allReadonly' @click="handleAllReadonly">全部设置为仅查看 <template #icon="props"> <div :class="props.checked ? 'activeIcon' : 'inactiveIcon'"><span></span></div> </template> </van-checkbox> <van-checkbox v-model='allEditable' @click="handleAllEditable">全部设置为可编辑 <template #icon="props"> <div :class="props.checked ? 'activeIcon' : 'inactiveIcon'"><span></span></div> </template> </van-checkbox> </div> </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' } ], allReadonly: false, allEditable: false } }, methods: { handleAllReadonly() { this.list.forEach((item) => { this.$set(item, 'operationType', 1) }) this.allReadonly = true this.allEditable = false }, handleAllEditable() { this.list.forEach((item) => { this.$set(item, 'operationType', 2) }) this.allReadonly = false this.allEditable = true } }, 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.allReadonly = true } else if (allEditable) { this.allEditable = true } else { this.allReadonly = false this.allEditable = false } }, deep: true, immediate: true } } } </script>
没有使用van-radio-group,将v-model直接绑定到van-checkbox,通过watch可以监听到list的变化从而改变底部两个按钮的状态。
但是底部两个按钮的状态需要添加点击事件去改变list中的状态