vue中table表格中,点击一个按钮,可以新增一整行的数据,并且在谷歌浏览器中使用百分数用toFixed()保留位数的使用介绍
谷歌浏览器使用百分比中保留位数toFixed(2),当输入的数字非常大的时候,保留后的小数,就会出现错误,下面就会介绍。vue中的el-table表格中,点击按钮,就会新增一整行的数据<template><div><el-table :data="formTable.prjMeasureItemPos" border class="jk-table"><e
·
谷歌浏览器使用百分比中保留位数toFixed(2),当输入的数字非常大的时候,保留后的小数,就会出现错误,下面就会介绍。
vue中的el-table表格中,点击按钮,就会新增一整行的数据
<template>
<div>
<el-table :data="formTable.prjMeasureItemPos" border class="jk-table">
<el-table-column align="center" width="140px" label="检查项" prop="checkId">
<template #default="{$index,row}">
<el-select v-model="row.checkId" placeholder="请选择">
<el-option
v-for="(item,index) in checkOptions"
:key="index"
:label="item.label"
:value="item.id"
:disabled="OptionIsDisable(index)"
></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="测量点数" width="100px" align="center" prop="pointNum">
<template slot-scope="scope">
<el-input
v-model="scope.row.pointNum"
@change="formatpointNum(scope.$index,true)"
placeholder="请输入内容"
oninput="value=value.replace(/[^\d.]/g,'')"
></el-input>
</template>
</el-table-column>
<el-table-column label="合格点数" width="100px" align="center" prop="pointQualityNum">
<template slot-scope="scope">
<el-input
v-model="scope.row.pointQualityNum"
@change="formatpointNum(scope.$index,false)"
placeholder="请输入内容"
oninput="value=value.replace(/[^\d.]/g,'')"
></el-input>
</template>
</el-table-column>
<el-table-column prop="itemDescribe" align="center" label="合格率">
<template slot-scope="scope">
<span>{{scope.row.pointQualityNum>0&&scope.row.pointNum>0?(parseFloat( (scope.row.pointQualityNum/scope.row.pointNum)*100).toFixed(2))+'%':null}}</span>
</template>
</el-table-column>
<el-table-column width="80px" align="center">
<template #header="{$index,row}">
<span style="position:absolute;top:8px;left:10px">操作</span>
<el-button
style="float:right;"
type="text"
@click="addDetail(row)"
v-if="formTable.prjMeasureItemPos.length<=checkOptions.length"
>
<img src="../components/assets/jia.png" />
</el-button>
</template>
<template #default="{$index,row}">
<el-button size="mini" type="text" @click="DeleteDetail($index,row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getDicListSelect } from "./src/services";
export default {
data(){
return{
formTable:{
prjMeasureItemPos: []
},
checkOptions:[],//检查项
}
},
watch:{
"formTable.prjMeasureItemPos":{
immediate: true,
handler(value){
if (this.formTable.prjMeasureItemPos.length === 0) {
this.formTable.prjMeasureItemPos.push({
checkId:'',
checkName:'',
pointNum:null,
pointQualityNum:null
})
}
}
}
},
methods:{
//根据输入的数字,进行判断,如果合格点数大于测量点数就会提示
formatpointNum(index,operation){
if (parseInt(this.formTable.prjMeasureItemPos[index].pointNum)<parseInt(this.formTable.prjMeasureItemPos[index].pointQualityNum)) {
this.$message({
showClose:true,
message: "测量点数要大于等于合格点数",
type:'error'
})
}
},
//获取检查项
getInspection(val){
const params = {
dicCode:'SCSL_CHECK',
pid:val
};
getDicListSelect(params).then(({data})=>{
const f = data.map(item =>{
return {
id : item.id,
label: item.cnName
}
});
this.checkOptions = f;
for (let i in this.formTable.prjMeasureItemPos) {
this.formTable.prjMeasureItemPos[i].checkId = "";
}
});
},
OptionIsDisable(index){
for (let i in this.formTable.prjMeasureItemPos) {
if (this.formTable.prjMeasureItemPos[i].checkId === this.checkOptions[index].id) {
return true;
}
}
return false
},
//点击按钮增加一行数据
addDetail(){
this.formTable.prjMeasureItemPos.push({
checkId:'',
checkName:'',
pointNum:null,
pointQualityNum:null
});
},
//删除新增的一行数据
DeleteDetail(index){
this.formTable.prjMeasureItemPos.splice(index,1)
}
}
}
</script>
效果图如下所示:
更多推荐
已为社区贡献9条内容
所有评论(0)