我使用的是element-ui框架,在项目中遇到一个问题在官网,前端技术群中寻求不到解决办法。
尝试过好多办法,都无法满足需求。
在我点击出发一个模态框后,会根据选择的模态框的节点生成一些input输入框。
<el-table :data=acmodexTreeb style="width: 100%; color: #3a3a3a;"
:header-cell-style="{background:'#f0f8ff'}" align="center" height="630px">
<el-table-column prop="code" label="门店编号" align="center"></el-table-column>
<el-table-column prop="name" label="门店名称" align="center"></el-table-column>
<el-table-column label="销售成本" align="center">
<template inline-template slot-scope="scope">
<el-input
@change="changeed(scope.$index,scope.row,$event)"
placeholder="请输入销售成本">
</el-input>
</template>
</el-table-column>
<el-table-column label="门店价格" align="center">
<template slot-scope="scope">
<el-input
@change="changes(scope.$index,scope.row,$event)"
placeholder="请输入门店价格"></el-input>
</template>
</el-table-column>
<el-table-column label="卡级价格" align="center">
<template slot-scope="scope">
<AddProCard :parentMessage="parentMessage"></AddProCard>
</template>
</el-table-column>
</el-table>
这是效果
点击保存的时候,要让每行内容放进一个对象,再将这些对象放进一个数组请求接口,我目前只能拿最后一次输入的值,怎么解决。
下面是方法
methods: {
//获取输入框的值
changeed(index,row,even){
console.log('-------------');
console.log(index);
console.log(event.target.value);
console.log(row);
console.log(even);
// console.log(even.currentTarget.nextElementSibling);
this.PI_SalePrice = event.target.value;
console.log("----------------")
},
changes(index,row,even){
console.log('-------------');
console.log(index);
console.log(event.target.value);
console.log(row);
console.log(even);
// console.log(even.currentTarget.previousElementSibling);
this.PI_FendianPrice = event.target.value;
console.log("----------------")
},
//添加门店
addFendian(){
var addFendian = [];
var fendian={};
var obj ={};
obj.Pro_GUID = this.AddProject.Pro_GUID;
obj.FendianCode = this.AddFendian.FendianCode;
obj.PI_SalePrice = this.AddFendian.PI_SalePrice;
obj.PI_FendianPrice = this.AddFendian.PI_FendianPrice;
addFendian.push(obj);
obj = {};
fendian.ProductItemFendian = addFendian;
this.$http.post(CarFendian,this.$qs.stringify(fendian)).then(resp=>{
// console.log('xxxxxxxxx');
// console.log(resp.data.data);
// console.log('xxxxxxxxx');
if (resp.data.code === 0) {
this.$notify({
title: '成功',
message: '添加门店信息成功',
type: 'success'
});
}
})
},
谢谢!
路走歪了,用着数据驱动的框架,却用操作dom的思想开发。
建议看看elementUI的官网例子,那里有你要的答案。