elment-ui 表格进行实时百分比计算

最新推荐文章于 2023-08-09 10:38:29 发布

兔子R/T坦克

最新推荐文章于 2023-08-09 10:38:29 发布

阅读量1.3k

点赞数

分类专栏：需求功能文章标签： es6 vue.js 前端

本文链接：https://blog.csdn.net/weixin_49050598/article/details/113725042

版权

这篇博客介绍了如何在使用Element-UI时实现表格内的实时百分比计算，通过监听@input事件来处理输入框的变化。在遇到数据为空的情况时，需要注意返回值应为0，以避免出现NAN%的错误。作者期待与读者交流更优的实现方式。

摘要由CSDN通过智能技术生成

表格进行实时百分比计算

开发中的需求和样式图
在这里插入图片描述
因为要实时渲染，所以调用了@input事件，实时触发input框变化事件
html代码

<el-table-column prop="dosage" show-overflow-tooltip>
   <template slot="header">
    用量（kg）
   <i class="imported">*</i>
   </template>
   <template slot-scope="scope">
   <el-input
    v-model="scope.row.dosage" 
    @input="calculation(scope.row.dosage, scope.$index)"