vue新手求助,table中动态加载多个input框,这些input框分为两个字段,我怎么将他们每行输入框的值放进一个对象

新手上路,请多包涵

我使用的是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>

这是效果
clipboard.png
点击保存的时候,要让每行内容放进一个对象,再将这些对象放进一个数组请求接口,我目前只能拿最后一次输入的值,怎么解决。
下面是方法

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'
            });
          }
        })
    },
    

谢谢!

阅读 6.4k
1 个回答

路走歪了,用着数据驱动的框架,却用操作dom的思想开发。
建议看看elementUI的官网例子,那里有你要的答案。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏