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

通过computed的get方法可以监听到list的变化,修改底部两个按钮的状态

通过set方法可以根据底部按钮的状态,修改list的状态

 

posted @   吴小明-  阅读(106)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
点击右上角即可分享
微信分享提示