vue结合ElementUI实现的多选框和输入框分配

效果图.png

 <p style="font-size: 14px;color: #606266;font-weight: 700; margin-left:5px;">可分配客户数<span style="margin-left:12px;color:#2E77E6">1000(人)</span></p>
      <el-form ref="form" :model="form" label-width="100px" style="margin-top:30px">
        <el-form-item  label="分配类型">
          <el-radio-group @change="typeOfAllocation" v-model="radio">
            <el-radio  label="1">平均分配</el-radio>
            <el-radio  label="2">自由分配</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择销售员">
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox   v-for="(items,Index) in cities" :label="items.content" :key="Index">
              {{items.content}}
              <el-input :disabled="items.disabled"  v-model="items.value"></el-input>
              <!-- readonly=" true" -->
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>

      arr:[],
      //分配方式
      radio: "1",
      //多选框选中
      checkedCities: [],
      //多选框列表
      cities:[ {id:0,content:"选项一",disabled:true,value:null},
        {id:1,content:"选项二",disabled:true,value:null},
        {id:2,content:"选项3",disabled:true,value:null},
        {id:3,content:"选项4",disabled:true,value:null},
        {id:4,content:"选项5",disabled:true,value:null},
        {id:5,content:"选项6",disabled:true,value:null},
        {id:6,content:"选项7",disabled:true,value:null},
        {id:7,content:"选项8",disabled:true,value:null},],

//判断分配方式
    typeOfAllocation(val) {
      if(val == 1) {
         var snum = 0;
        for(var i = 0; i<this.cities.length;i++) {
          this.cities[i].disabled = true;//平均分配输入框禁用
          this.cities[i].value = null;//清除缓存
          for(var j = 0; j < this.checkedCities.length;j++) {
            if(this.cities[i].content == this.checkedCities[j]) {
                if( snum < this.arr.length) {
                   this.cities[i].value = this.arr[snum];
                    snum++;
                }
            }
          }
        }
      } else if(val == 2) {
        if(this.checkedCities != []) {
          for(var i = 0;i < this.checkedCities.length;i++) {
            for(var j = 0;j<this.cities.length;j++) {
              if(this.cities[j].content == this.checkedCities[i]) {
                this.cities[j].disabled = false;//自由分配选中解除禁用
              }
            }
          }
        }
      }
    },
      theNumber() {
      let that = this;
      var total = 1000;
      var x = that.checkedCities.length;
      var num = total / x;
      var yushu = total % x;
      var arr  = [];
      for (var k = 0; k < x - yushu; k++) {
       arr.push(Math.floor(num));
      }
      for (var i = 0; i < yushu; i++) {
        arr.push(Math.ceil(num));
      }
      that.arr = arr;
    },
 //选择销售员发生改变时
    handleCheckedCitiesChange() {
      this.theNumber();
      this.typeOfAllocation(this.radio);
      
    },