elementUI的table组件实现动态增删可输入的表格

本文介绍: vue+elementUI的table 组件实现动态增加、删除可输入的表格

elementUI的table组件实现 动态增加、删除可输入的表格

实现 效果

在这里插入图片描述

解决方案

总体的解决思路是利用 table组件的自定义列模板通过Sc op e d slot 获取到 row, column, $index，拿到每一行的数据，再在动态赋给每行的input和select的v–model值中，直接上代码
template 部分

&lt;el-form-item label="添加信息" prop="remark"&gt;
  &lt;!-- 添加按钮 --&gt;
  &lt;el-button type="primary" size="mini" @click="handleAdd"&gt;添加&lt;/el-button&gt;
  &lt;el-table
    :data="dataList"
    size="mini"
  &gt;
    <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 部分

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