el-table动态添加行（包含input输入框）

<el-form size="small" :disabled="isdisabled"><el-form-item prop="servin"><template><div style="font-weight:bold;text-align:center;font-size:20px">申请状态</div><el-table r

小菜鸟码住

5821人浏览 · 2022-03-11 17:02:29

小菜鸟码住 · 2022-03-11 17:02:29 发布

data部分

   return {
      applayList: [],
      tableData1: [], //表单属性
      isdisabled:false,
      bcbtn:true,
      infoId:"",
      xh1:'',
    };

<el-form size="small" :disabled="isdisabled">
      <el-form-item prop="servin">
        <template>
           <div style="font-weight:bold;text-align:center;font-size:20px">申请状态</div>
          <el-table ref="table" border :data="applayList" style="width: 100%"  :row-class-name="rowClassName">
            <el-table-column label="序号" align="center" width="55" prop="xh" type="index"  >
            </el-table-column>
             <el-table-column prop="zdcpmc" label="主导产品名称">
              <template slot-scope="scope">
                <el-input v-model="scope.row.zdcpmc" :disabled='isdisabled' ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="sjzlmc" label="涉及专利名称">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sjzlmc" :disabled='isdisabled' ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="sqh" label="申请或授权号">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sqh" :disabled='isdisabled' ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="sqrq" label="申请或授权日期">
              <template slot-scope="scope">
                <el-date-picker :disabled='isdisabled' v-model="scope.row.sqrq" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"  placeholder="选择日期时间"> </el-date-picker>
              </template>
            </el-table-column>
              <el-table-column prop="sqfs" label="授权方式">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sqfs" :disabled='isdisabled' ></el-input>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="applaydeleteRow(scope.$index, applayList)"
                  :disabled='isdisabled' 
                  size="small"
                >
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
            <el-row style="border:0;">
             <el-col style="text-align:center;" ><el-button :disabled='isdisabled' style="border-top:none;width:100px; position: relative;bottom:2px"  @click="applayaddRow(applayList)" >+</el-button></el-col>
          </el-row>
        </template>
      </el-form-item>
    </el-form>

    //添加表格里的行(申请状态)
    applayaddRow(tableData1) {
      tableData1.push({
        zdcpmc: "",
        sqh: "",
        sqrq: "",
        sqfs: "",
        sjzlmc:'',
        xh:this.xh1,
        infoId:this.infoId
      });
       
    },
    //删除表格里的行(申请状态)
    applaydeleteRow(index, rows) {
      rows.splice(index, 1);
    },