评论

收藏

[JavaScript] 全部设置为仅查看/可编辑【第二种方法:watch+methods】

开发技术 开发技术 发布于:2021-07-14 10:13 | 阅读数:545 | 评论:0

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


关注下面的标签,发现更多相似文章