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

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

你可能感兴趣的:(笔记,elementui,前端,javascript)