表格嵌套el-input,实现输入一个数后自动填充另一个input

需求:如图,要在表格中输入间距,根据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() 改写。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值