<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中的状态
|