element-ui实现批量添加

要实现批量添加，可以使用 Element UI 中的表格组件和对话框组件。

首先，在表格中添加一个“添加”按钮，点击后弹出一个对话框，让用户输入要添加的数据。在对话框中，可以使用表单组件，比如输入框和下拉框，让用户输入数据。同时，可以添加一个“添加多个”按钮，点击后可以动态添加多个输入框和下拉框，让用户批量输入数据。

在对话框中，还可以添加一个“确认”按钮和一个“取消”按钮，让用户确认输入的数据或者取消操作。如果用户点击“确认”按钮，可以将输入的数据添加到表格中。

具体实现可以参考 Element UI 官方文档中的表格组件和对话框组件。以下是一个简单的示例代码：

<template>
  <el-table :data="tableData">
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="年龄" prop="age"></el-table-column>
    <el-table-column label="性别" prop="gender"></el-table-column>
    <el-table-column>
      <template slot-scope="scope">
        <el-button type="text" @click="showAddDialog(scope.$index)">添加</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog :visible.sync="addDialogVisible">
    <el-form ref="addForm" :model="addForm" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="addForm.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="addForm.age"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="addForm.gender">
          <el-option label="男" value="male"></el-option>
          <el-option label="女" value="female"></el-option>
        </el-select>
      </el-form-item>
      <template v-for="(item, index) in addForm.items">
        <el-form-item :label="'姓名' + (index + 2)">
          <el-input v-model="item.name"></el-input>
        </el-form-item>
        <el-form-item :label="'年龄' + (index + 2)">
          <el-input v-model="item.age"></el-input>
        </el-form-item>
        <el-form-item :label="'性别' + (index + 2)">
          <el-select v-model="item.gender">
            <el-option label="男" value="male"></el-option>
            <el-option label="女" value="female"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </el-form>
    <div slot="footer">
      <el-button @click="addDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="addData">确认</el-button>
      <el-button type="text" @click="addMore">添加多个</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: 'male' },
        { name: '李四', age: 25, gender: 'female' },
        { name: '王五', age: 30, gender: 'male' }
      ],
      addDialogVisible: false,
      addForm: {
        name: '',
        age: '',
        gender: '',
        items: []
      }
    }
  },
  methods: {
    showAddDialog(index) {
      this.addForm = { name: '', age: '', gender: '', items: [] }
      if (index !== undefined) {
        this.addForm.items.push({})
      }
      this.addDialogVisible = true
    },
    addMore() {
      this.addForm.items.push({})
    },
    addData() {
      const form = this.$refs.addForm
      form.validate(valid => {
        if (valid) {
          const data = {
            name: this.addForm.name,
            age: this.addForm.age,
            gender: this.addForm.gender
          }
          this.addForm.items.forEach(item => {
            data.name += ',' + item.name
            data.age += ',' + item.age
            data.gender += ',' + item.gender
          })
          this.tableData.push(data)
          this.addDialogVisible = false
        }
      })
    }
  }
}
</script>

在上面的代码中，表格中的每一行都有一个“添加”按钮，点击后会弹出对话框。在对话框中，有一个基本信息的表单和一个“添加多个”按钮。点击“添加多个”按钮会动态添加多个输入框和下拉框。点击“确认”按钮会将输入的数据添加到表格中。

需要注意的是，这里使用了 Element UI 中的表单验证功能，需要在表单组件中添加 `ref` 属性，并在确认按钮的点击事件中调用 `validate` 方法进行验证。同时，为了支持添加多个数据，需要在表单中添加一个数组类型的字段，存储多个输入框和下拉框的数据。在确认按钮的点击事件中，需要将这些数据拼接成一个字符串，并添加到表格中。