The table component of elementUI implements dynamic addition and deletion of input tables

The table component of elementUI implements dynamically adding and deleting inputtable tables

achieve effect

solution

The overall solution is to use the custom column template of the table component to obtain row, column, $index through Scoped slot, obtain the data of each row, and then dynamically assign the v-model value of input and select to each row, Go directly to the code
template part

<el-form-item label="添加信息" prop="remark">
  <!-- 添加按钮 -->
  <el-button type="primary" size="mini" @click="handleAdd">添加</el-button>
  <el-table
    :data="dataList"
    size="mini"
  >
    <el-table-column type="index" label="序号" width="50"></el-table-column>
    <el-table-column prop="companyName" label="公司名称" :show-overflow-tooltip="true" min-width="200">
      <template slot-scope="scope">
        <el-input
          v-model.trim="scope.row.companyName"
          placeholder="请输入公司名称"
          clearable
        >
        </el-input>
      </template>
    </el-table-column>
    <el-table-column prop="contractName" label="合同名称" :show-overflow-tooltip="true" min-width="200">
      <template slot-scope="scope">
        <el-select
          v-model="scope.row.contractName"
          placeholder="请选择合同"
          style="width: 100%"
        >
          <el-option
            v-for="item in contractList"
            :key="item.dicId"
            :label="item.dicItemName"
            :value="item.dicId"
          ></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="type" label="发票类型" :show-overflow-tooltip="true" min-width="100">
      <template slot-scope="scope">
        <el-select
          v-model="scope.row.type"
          placeholder="请选择发票类型"
          style="width: 100%"
        >
          <el-option
            v-for="item in typeList"
            :key="item.dicId"
            :label="item.dicItemName"
            :value="item.dicId"
          ></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="licenseBeginTime" label="开通时间" :show-overflow-tooltip="true" min-width="180">
      <el-date-picker
        v-model="form.licenseBeginTime"
        type="date"
        placeholder="选择开通时间"
        style="width: 100%"
      ></el-date-picker>
    </el-table-column>
    <el-table-column width="80" label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button
          type="text"
          icon="el-icon-delete"
          @click="handleDelete(scope.$index, scope.row)"
        ></el-button>
      </template>
    </el-table-column>
  </el-table>
</el-form-item>

script part

data() {
    
    
  return {
    
    
	dataList: [],
	contractList: [],
	typeList: []
  }
},
methods: {
    
    
  // 添加行
  handleAdd() {
    
    
    var _this = this

    let list = {
    
    
      companyName: '',
      contractName: '',
      type: '',
      licenseBeginTime: '',
    }

    _this.dataList.push(list)
  },
  // 删除行
  handleDelete(index, row) {
    
    
    var _this = this

    _this.dataList.splice(index, 1)
  },
}
  

Summarize

Achieving this effect mainly involves data processing and data parameter passing. Adding and deleting are adding and deleting items to the array. When deleting, you need to accurately get the index value of the specified row passed the parameter.

The above is personal experience, I hope it will be helpful to everyone!

To make the data in the dynamic table related to each other, please refer to another article:
The table component of elementUI implements an inputtable table with dynamic addition and deletion of data linkage.