vue新增占比选项以及填写比例

现在需要实现一个功能：新增/删除某个施工人员，并填写它占有总工程的比例，不能超过100%。

功能1：限制单个人员的比例，输入框不能填写数字以外的内容，不能填写负数，也不能超过100%。可以使用oninput进行限制：  

οninput="value=value.replace(/[^\d]/g,'')>100?100:value.replace(/[^\d]/g,'')"

通过value.replace方法将所有非数字替换成空，然后判断它是否超过100%。如果超过，则将其替换成100%。

功能2：添加新增/删除操作，用于增加施工人员以及对应的施工占比，其中vue部分如下：

<el-col :span="1">
  <el-button type="danger" @click="deleteMan(item,index)">删除</el-button>
</el-col>
<el-col :span="1">
  <el-button type="primary" @click="add" 
        v-if="index == arrayData.length - 1">新增</el-button>
</el-col>

其中arrayData为当前施工信息，这里数组不能为空。dataNum为当前计数：

arrayData:[{
  id:0,
  realName:'',
  userId:'',
  userName:'',
  orgId:'',
  workRate:''
}],
dataNum:0,

添加与删除部分代码，限制至少有一位人员参与：

deleteMan(item,index){
  if(this.arrayData.length<=1){//如果只有一个输入框则不可以删除
    this.$message.error('无法删除最后一名人员')
    return false
  }
  this.$confirm(`确定移除${item.realName}施工占比？`,'提示',{
    confirmButtonText: '确定',
    cancleButtonText: '取消',
    type: 'danger'
  }).then(() => {
    this.arrayData.splice(index,1)//删除了数组中对应的数据也就将这个位置的输入框删除
    this.dataNum--
  })
},
add(item){
  if(this.arrayData[this.dataNum].realName === ''){
    this.$message.warning('请先填写上一位人员')
    return false
  }
  this.arrayData.push(//增加就push进数组一个新值
    {
      id:++this.dataNum,
      realName:'',
      userId:'',  //id
      userName:'',  //账号
      orgId:'',
      workRate:''
    }
  )
},

功能3：限制所有施工人员的施工占比总和不能大于100%，首先是vue部分，通过函数进行计算：

<el-form-item
  label="施工占比">
  <el-input v-model="item.workRate"
    οninput="value=value.replace(/[^\d]/g,'')>100?100:value.replace(/[^\d]/g,'')"
    @change="calculateWorkRate(item.id)">
    <template slot="append">%</template>
  </el-input>
</el-form-item>

限制施工占比的方法部分js代码，通过监控当前id内容的变化来计算是否超出100%：

calculateWorkRate(id){
  let rate = 0;
  let over = 0;
  this.arrayData.forEach(item => {
    rate += item.workRate == '' ? 0 : parseInt(item.workRate)
    if(rate > 100) over = 100 - rate
    else over = 0
  })
  this.arrayData[id].workRate = parseInt(this.arrayData[id].workRate) + over
},

最后是完整的vue部分，其中handleBtnAdd方法是选择对应施工人员：

<el-row v-for="(item,index) in arrayData" :key="item.id">
  <el-col :span="10">
    <el-form-item
      label="施工人员" >
      <el-input v-model="item.realName" :readonly="true">
        <template slot="append"
        ><el-button type="primary" @click="handleBtnAdd">{{
            "选择"
          }}</el-button></template>
      </el-input>
    </el-form-item>
  </el-col>
  <el-col :span="10">
    <el-form-item
      label="施工占比">
      <el-input v-model="item.workRate"
        οninput="value=value.replace(/[^\d]/g,'')>100?100:value.replace(/[^\d]/g,'')"
        @change="calculateWorkRate(item.id)">
        <template slot="append">%</template>
      </el-input>
    </el-form-item>
  </el-col>
  <el-col :span="1" style="margin-left: 10px">
    <el-button type="danger" @click="deleteMan(item,index)">删除</el-button>
  </el-col>
  <el-col :span="1" style="margin-left: 30px">
    <el-button type="primary" @click="add" v-if="index == arrayData.length - 1">新增</el-button>
  </el-col>
</el-row>