Web前端-Vue el-table el-table-column 每行row添加多个input输入框

页面布局如下

页面代码： 

方法处理

    /** 物料列表行-数量 */
    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

输出如下：

可参考

https://segmentfault.com/q/1010000017300576

el-table里面添加文本框_柳牧之的博客-CSDN博客_el文本框