一、效果图
说明:点击修改按钮,可以修改当前行的屠宰数量,并且实时更新
二、主要代码
<el-table border ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
<el-table-column prop="tuzai" width="80" label="屠宰数量" align="center"></el-table-column>
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button type="text" @click="modifynum(scope.row, scope.$index)">修改屠宰数量</el-button>
<!-- @click="checkDetail(scope.row)" -->
</template>
</el-table-column>
</el-table>
实现实时更新的代码:this.$set(this.tableData, indexs, val);
this.tableData为表格的数据源、indexs是当前行,val是当前行修改后的数据。
methods: {
modifynum(val, indexs) {
this.$prompt('修改屠宰数量', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
})
.then(({ value }) => {
this.$message({
type: 'success',
message: '修改成功!'
});
val.tuzai = value;
// console.log('修改为',value,'行',indexs);
this.tableData[indexs].tuzai = JSON.parse(value);
val.tuzai = JSON.parse(value);
this.$set(this.tableData, indexs, val);
})
.catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
}
}