elementUI的table组件实现动态增删可输入的表格_element-ui table表格动态添加表单

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

实现效果

解决方案

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

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)
  },
}
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

总结

实现此效果主要是数据处理和数据传参，增加和删除是对数组进行添加项和删除项，删除的时候需要精确的拿到传参下来的指定行的index值

以上是个人经验，希望对大家有所帮助！

动态表格中的数据要做相互关联的请参考另外一篇文章：
elementUI的table组件实现动态增删数据联动的可输入的表格