zoukankan      html  css  js  c++  java
  • 全部设置为仅查看/可编辑【第二种方法:watch+methods】

    <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' @click="handleAllReadonly">全部设置为仅查看
            <template #icon="props">
              <div :class="props.checked ? 'activeIcon' : 'inactiveIcon'"><span></span></div>
            </template>
          </van-checkbox>
          <van-checkbox v-model='allEditable' @click="handleAllEditable">全部设置为可编辑
            <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'
            }
          ],
          allReadonly: false,
          allEditable: false
        }
      },
      methods: {
        handleAllReadonly() {
          this.list.forEach((item) => {
            this.$set(item, 'operationType', 1)
          })
          this.allReadonly = true
          this.allEditable = false
        },
        handleAllEditable() {
          this.list.forEach((item) => {
            this.$set(item, 'operationType', 2)
          })
          this.allReadonly = false
          this.allEditable = true
        }
      },
      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.allReadonly = true
            } else if (allEditable) {
              this.allEditable = true
            } else {
              this.allReadonly = false
              this.allEditable = false
            }
          },
          deep: true,
          immediate: true
        }
      }
    }
    </script>

    没有使用van-radio-group,将v-model直接绑定到van-checkbox,通过watch可以监听到list的变化从而改变底部两个按钮的状态。

    但是底部两个按钮的状态需要添加点击事件去改变list中的状态

  • 相关阅读:
    用数据泵技术实现逻辑备份Oracle 11g R2 数据泵技术详解(expdp impdp)
    用mysql实现类似于oracle dblink的功能
    统计1的个数
    转置字符串,其中单词内的字符需要正常
    经典排序之归并排序
    公共子序列与公共子串问题
    placement new (转)
    数组排序组合最小数字
    实现两个数相加不用四则运算
    操作系统中作业、线程、进程、内存管理、垃圾回收以及缓存等概念
  • 原文地址:https://www.cnblogs.com/wuqilang/p/14885686.html
Copyright © 2011-2022 走看看