需求:如图,要在表格中输入间距,根据1200/间距 = 数量公式,自动填充数量,同理通过输入数量,自动填充间距
话不多说,直接贴代码
结构部分:
<el-table :data="channelInfo" border class="tpit-table" v-if="projecType === 'channel'">
<el-table-column prop="direction" width="70">
</el-table-column>
<el-table-column prop="space" label="网格间距">
<template slot-scope="scope">
<el-input v-model="scope.row.space" type="text" @input="e => (scope.row.space = inputChange(e))" @change="getNum(scope.row,scope.row.space)">1
</el-input>
</template>
</el-table-column>
<el-table-column prop="num" label="网格数量">
<template slot-scope="scope">
<el-input v-model="scope.row.num" type="number" onkeyup="value=value.replace(/[^\d]/g,'')" @change="getSpace(scope.row,scope.row.num)">
</el-input>
</template>
</el-table-column>
</el-table>
table绑定的值:
export default {
data() {
return {
channelInfo:[
{
direction:"X方向",
},
{
direction:"Y方向",
},
],
}
},
逻辑部分:
getNum(row,space) {
//由于数量不能为小数,这里做了向下取整
let number = Math.floor(1200/space)
this.$set(row,"num",number)
},
getSpace(row,num) {
let space = Number((1200/num).toFixed(8))
this.$set(row,"space",space)
},
划重点:表格绑定的数据中由于没有明确间距和数量的值,在赋值时如果直接使row.space/row.num会报错,要使用$set() 改写。