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

Myth丶恋晨 2023-10-03 14:22 8阅读 0赞

页面布局如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbmdnZVFpbmdjaHVu_size_16_color_FFFFFF_t_70][]

页面代码：

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

输出如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbmdnZVFpbmdjaHVu_size_16_color_FFFFFF_t_70 1][]

可参考

[https://segmentfault.com/q/1010000017300576][https_segmentfault.com_q_1010000017300576]

[el-table里面添加文本框\_柳牧之的博客-CSDN博客\_el文本框][el-table_-CSDN_el]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbmdnZVFpbmdjaHVu_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210823131125213.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbmdnZVFpbmdjaHVu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbmdnZVFpbmdjaHVu_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210823131147750.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbmdnZVFpbmdjaHVu,size_16,color_FFFFFF,t_70
[https_segmentfault.com_q_1010000017300576]: https://segmentfault.com/q/1010000017300576
[el-table_-CSDN_el]: https://blog.csdn.net/u012976879/article/details/96109458