页面布局如下

页面代码: 

<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文本框

Logo

前往低代码交流专区

更多推荐