zoukankan      html  css  js  c++  java
  • 全部设置为仅查看/可编辑【第三种方法: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的状态

  • 相关阅读:
    Shipconstructor 2005 破解发布
    活动目录(activate directory)
    上海地铁快成了乞丐天堂
    转载:制造业信息化:计划模拟APS软件驱动敏捷制造
    项目管理的测试版发布
    Introdution RemObject SDK
    怎样在osworkflow中使用BeanShell
    Java class 文件反编译工具 FrontEnd 2.0
    Tribon M3 license keygen
    利用osworkflow实现业务流程
  • 原文地址:https://www.cnblogs.com/wuqilang/p/14885714.html
Copyright © 2011-2022 走看看