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中的状态

  • 相关阅读:
    C语言寒假大作战03
    C语言寒假大作战02
    C语言寒假大作战01
    助教学期总结
    第十六周助教总结
    C语言I博客作业11
    第十五周助教总结
    C语言I博客作业10
    第十四周助教总结
    C语言寒假大作战03
  • 原文地址:https://www.cnblogs.com/wuqilang/p/14885686.html
Copyright © 2011-2022 走看看