el-table动态添加行(包含input输入框)

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);
    },
  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值