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

最新推荐文章于 2024-05-26 17:01:32 发布

GXEXAX

最新推荐文章于 2024-05-26 17:01:32 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/GXEXAX/article/details/122919169

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个施工管理系统中如何实现施工人员的新增与删除功能，并确保单个人员施工占比不超过100%。通过oninput事件限制输入框只接受数字且不超过100%，使用Vue.js实现添加和删除施工人员的操作，同时确保所有人员的施工占比总和不超过100%。在删除操作中，检查是否至少存在一位施工人员，新增操作则需先填写上一位人员信息。此外，还提供了计算并调整施工占比的函数以保持总和在合理范围内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

oninput="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"
    oninput="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"
        oninput="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>