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

效果图：

需求：

　　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
}