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

Posted 2022-01-07 MinggeQingchun

页面布局如下

页面代码： 

<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;
    ,

输出如下：

可参考

https://segmentfault.com/q/1010000017300576

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