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