全部设置为仅查看/可编辑【第三种方法：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的状态