步骤:
表格中直接插槽法:
<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)
},
//注:由于有输入项合计需求,因此以聚焦失焦来控制复选框状态从而获取最新输入值。
来看效果:
亲测有效,需要的直接贴代码即可。
合计方法之前的文章中有介绍勾选合计某列的值