Web前端-Vue el-table el-table-column 每行row添加多个input输入框
页面布局<el-table v-loading="loading" :data="selectMatList" @selection-change="handleSelectionChange"><el-table-column label="物料编号" align="center" prop="matCode" /><el-table-column label="物
·
页面布局如下
页面代码:
<el-table v-loading="loading" :data="selectMatList" @selection-change="handleSelectionChange">
<el-table-column label="物料编号" align="center" prop="matCode" />
<el-table-column label="物料名称" align="center" prop="matName" />
<el-table-column label="数量" align="center" prop="matNumber" >
<template inline-template slot-scope="scope">
<el-input v-model="scope.row.matNumber"
@change="changedMatNum(scope.$index,scope.row,$event)"
placeholder="请输入数量">
</el-input>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="matRemark" >
<template inline-template slot-scope="scope">
<el-input v-model="scope.row.matRemark"
@change="changedMatRemark(scope.$index,scope.row,$event)"
placeholder="请输入备注">
</el-input>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleMatDelete(scope.row)"
v-hasPermi="['mes:matapply:removemat']"
>移除</el-button>
</template>
</el-table-column>
</el-table>
方法处理
/** 物料列表行-数量 */
changedMatNum(index,row,even){
console.log('-------数量------');
console.log("index:" + index);
console.log("event.target.value:" + event.target.value);
console.log("row:" + row);
console.log("even:" + even);
// console.log(even.currentTarget.nextElementSibling);
console.log("-------数量-------")
//遍历 物料列表,根据index塞值
var matForm = this.selectMatList[index];
matForm.matNumber = event.target.value;
for(let key in matForm){
console.log("当前行mat " + 'key:'+ key + ' value:' + matForm[key]);
}
},
/** 物料列表行-备注 */
changedMatRemark(index,row,even){
console.log('-------备注------');
console.log("index:" + index);
console.log("event.target.value:" + event.target.value);
console.log("row:" + row);
console.log("even:" + even);
console.log("--------备注--------")
//遍历 物料列表,根据index塞值
var matForm = this.selectMatList[index];
matForm.matRemark = event.target.value;
for(let key in matForm){
console.log("当前行mat " + 'key:'+ key + ' value:' + matForm[key]);
}
},
/** 移除选中某一行物料(单行) */
handleMatDelete(row){
const matId = row.matId;
this.$confirm('是否确认移除物料编号为"' + matId + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.removeMat(matId);
}).then(() => {
// this.removeMat(matId);
// this.getList();
// this.msgSuccess("删除成功");
}).catch(() => {});
},
//移除mat
removeMat(matId){
for(var i = 0;i<this.selectMatList.length;i++)
{
if(this.selectMatList[i].matId === matId){
this.selectMatList.splice(i,1)
}
}
return this.selectMatList;
},
输出如下:
可参考
更多推荐
已为社区贡献7条内容
所有评论(0)