全部设置为仅查看/可编辑【第三种方法：computed】
<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'>全部设置为仅查看
<template #icon="props">
<div :class="props.checked ? 'activeIcon' : 'inactiveIcon'"><span></span></div>
</template>
</van-checkbox>
<van-checkbox v-model='allEditable'>全部设置为可编辑
<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'
}
]
}
},
computed: {
allReadonly: {
get() {
return (
this.list.length &&
this.list.every((item) => item.operationType === 1)
)
},
set(val) {
this.list.forEach((item) => {
this.$set(item, 'operationType', val ? 1 : '')
})
}
},
allEditable: {
get() {
return (
this.list.length &&
this.list.every((item) => item.operationType === 2)
)
},
set(val) {
this.list.forEach((item) => {
this.$set(item, 'operationType', val ? 2 : '')
})
}
}
}
}
</script>通过computed的get方法可以监听到list的变化，修改底部两个按钮的状态
通过set方法可以根据底部按钮的状态，修改list的状态
文档来源：51CTO技术博客https://blog.51cto.com/u_15301829/3068195
页:
[1]