老街一角
2021-11-12 14:05
采纳率: 68.8%
浏览 71
已结题

选中过的框怎么可以禁用

img

<template>
  <div style="margin: 50px;">
    <div v-for="(v,i) in arrList" :key="i">
      <el-checkbox-group v-model="arrList[i].label" >
        <el-checkbox v-for="(item, index) in data" :key="index" :label="item.label" @change="changeCheck($event,item.label,i)">
          <div style="margin-bottom: 10px;">{{ item.label }}</div>
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <el-button @click="add">添加</el-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        arrList:[
          {
            label:['不限']
          }
        ],
        data: [
          {label: '不限'},
          {label: '一级'},
          {label: '二级'}, 
          {label: '三级',}
        ],
      }
    },
    methods: {
      changeCheck(e,val,ind) {
        if(e) {
          if(val === '不限') {
            this.arrList[ind].label = ['不限'];
          }else {
            const index = this.arrList[ind].label.findIndex(item => item === '不限');
            if(index > -1) {
              this.arrList[ind].label.splice(index,1);
            }
          }
          if(this.arrList[ind].label.length>1) {
          this.arrList[ind].label.shift()
        }
        }
      },
      add(){
        let obj = {label:[ '不限']}
        this.arrList.push(obj)
      }
    }
  }
</script> 


  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

3条回答 默认 最新

相关推荐 更多相似问题