<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的狀態