全部设置为仅查看/可编辑【第一种方法：watch】

Green

效果图：

需求：
1、根据接口数据渲染list中每条数据，operationType===1则【仅查看】高亮，operationType===2则【可编辑】高亮
2、如果list中的所有数据都是【仅查看】，那么底部的【全部设置为仅查看】高亮，反之【全部设置为可编辑】高亮。如果既有【仅查看】又有【可编辑】，那么这连个按钮都不亮
3、点击【全部设置为仅查看】则将list中所有数据都设置为【仅查看】高亮，点击【全部设置为可编辑】则将list中所有数据都设置为【可编辑】高亮
实现思路：watch监听

<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>
  <van-radio-group class="set-all" v-model="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>
  </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'
    }
    ],
    operationType: null
  }
  },
  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.operationType = 1
    } else if (allEditable) {
      this.operationType = 2
    } else {
      this.operationType = null
    }
    },
    deep: true,
    immediate: true
  },
  operationType: {
    handler(newVal) {
    if (newVal !== 1 && newVal !== 2) return
    this.list.forEach((item) => {
      item.operationType = newVal
    })
    }
  }
  }
}
</script>

css：

<style lang="less" scoped>
.my-radio {
  padding: 20px;
  ul {
  li {
    width: 100%;
    box-sizing: border-box;
    height: 52px;
    background-color: #f3f6f9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px;
    margin-top: 10px;
    .name {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    word-break: break-all;
    position: relative;
    > span {
      font-weight: bold;
      color: #4d5c82;
    }
    > i {
      width: 16px;
      height: 16px;
      background-color: #fc5e5e;
      border-radius: 50%;
      position: absolute;
      top: 10px;
      right: -20px;
      text-align: center;
      line-height: 16px;
      color: #fff;
      font-size: 12px;
    }
    }
    @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
    .name {
      width: 35%;
    }
    }
    .van-radio-group {
    margin-right: 15px;
    .van-radio:last-child {
      margin-right: 0;
    }
    }
  }
  }
  .set-all {
  display: flex;
  justify-content: space-between;
  margin-top: 35px;
  .van-checkbox {
    .van-checkbox__icon {
    font-size: 18px;
    }
    .van-checkbox__label {
    font-size: 14px;
    color: #4d5c82;
    line-height: 1;
    }
  }
  .van-radio:last-child {
    margin-right: 0;
  }
  }
  // 选中和未选中样式-start
  .activeIcon {
  width: 18px;
  height: 18px;
  border: 2px solid #198cff;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  > span {
    display: block;
    width: 10px;
    height: 10px;
    background: #198cff;
    border-radius: 50%;
  }
  }
  .inactiveIcon {
  width: 18px;
  height: 18px;
  border: 2px solid #e0e5f5;
  border-radius: 50%;
  box-sizing: border-box;
  }
  // 选中和未选中样式-end
}

View Code