步骤:
表格中直接插槽法:
<el-table-column :show-overflow-tooltip="true" prop="number" label="发货数量">
<template slot-scope="scope">
<el-input v-model.number="scope.row.number" @focus="onfoucs(scope)" @blur="blurUsername(scope)" />
</template>
</el-table-column>
input中聚焦和失焦事件控制复选框状态:
// 输入框聚焦事件
onfoucs(val) {
const selected = false //聚焦取消勾选
this.$refs.multipleTable.toggleRowSelection(val.row, selected) //ref定义在el-table中
},
// 输入框失焦事件
blurUsername(val) {
const selected = true //失焦勾选
this.$refs.multipleTable.toggleRowSelection(val.row, selected)
},
//注:由于有输入项合计需求,因此以聚焦失焦来控制复选框状态从而获取最新输入值。
来看效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/a7eb430d92e744b690880759d1f81352.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6LWr5YW5L0hlcnp6,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
亲测有效,需要的直接贴代码即可。
合计方法之前的文章中有介绍勾选合计某列的值