前期思路:
使用 watch 进行侦听,当数据改变时做相应的处理。但是在表格中,行的数量可能是不确定的,且很难用 watch 去进行侦听某一个属性,所以放弃使用 watch。
解决办法:
1. 在 data 中用一个变量保存符合标准的旧值;
2. 在输入框的 input 事件处理函数中对值进行处理,若符合标准,则给 data 中的变量赋值,否则则将 data 中的变量的值赋给输入框;
3. 输入框失焦时清除 data 中保存的旧值。
代码:
<el-table>
<el-table-column
v-for="(it, index) in tableData"
:key="index"
:prop="it.key"
:label="it.title"
>
<div slot-scope="scope">
<template v-if="it.key === 'price'">
<el-input
type="number"
v-model="scope.row[it.key]"
@keyup.native="changePrice($event)"
@blur="clearPrice"
placeholder="请输入"
style="width: 140px"
>
<template slot="append">元</template>
</el-input>
</template>
<span v-else> {{scope.row[it.key]}} </span>
</div>
</el-table-column>
</el-table>
export default {
data () {
return {
tableData: [
{
name: "显示器",
price: ""
},
{
name: "主机",
price: ""
}
],
oldPrice: null
}
},
methods: {
changePrice (event) {
// 最多八位整数两位小数
let reg = new RegExp("^[0-9]{1,8}([.][0-9]{1,2})?$");
event.target.value = event.target.value.replace(/[^\d\.]/g,'');
if (reg.test(event.target.value)){
this.replaceValue = event.target.value;
} else {
if (event.target.value) {
// 避免删完数据总是剩余一位
event.target.value = this.replaceValue
}
}
},
clearPrice () {
this.oldPrice = null;
}
}
}