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