要实现批量添加，可以使用
Element UI 中的表格组件和对话框组件。
首先，在表格
中添加一个“添加”按钮，点击后弹出一个对话框，让用户输入要添加的数据。在对话框
中，可以使用表单组件，比如输入框和下拉框，让用户输入数据。同时，可以添加一个“添加多个”按钮，点击后可以动态添加多个输入框和下拉框，让用户批量输入数据。
在对话框
中，还可以添加一个“确认”按钮和一个“取消”按钮，让用户确认输入的数据或者取消操作。如果用户点击“确认”按钮，可以将输入的数据添加到表格
中。
具体实现可以参考
Element UI 官方文档
中的表格组件和对话框组件。以下是一个简单的示例代码：
```html
<
templa
te>
<
el-table :data="tableData">
<
el-table-column lab
el="姓名" prop="name"></
el-table-column>
<
el-table-column lab
el="年龄" prop="age"></
el-table-column>
<
el-table-column lab
el="性别" prop="gender"></
el-table-column>
<
el-table-column>
<
templa
te slot-scope="scope">
<
el-button type="
text" @click="showAddDialog(scope.$index)">添加</
el-button>
</
templa
te>
</
el-table-column>
</
el-table>
<
el-dialog :visible.sync="addDialogVisible">
<
el-
form ref="add
Form" :mod
el="add
Form" lab
el-width="80px">
<
el-
form-i
tem lab
el="姓名">
<
el-input v-mod
el="add
Form.name"></
el-input>
</
el-
form-i
tem>
<
el-
form-i
tem lab
el="年龄">
<
el-input v-mod
el="add
Form.age"></
el-input>
</
el-
form-i
tem>
<
el-
form-i
tem lab
el="性别">
<
el-s
elect v-mod
el="add
Form.gender">
<
el-option lab
el="男"
value="male"></
el-option>
<
el-option lab
el="女"
value="female"></
el-option>
</
el-s
elect>
</
el-
form-i
tem>
<
templa
te v-for="(i
tem, index) in add
Form.i
tems">
<
el-
form-i
tem :lab
el="'姓名' + (index + 2)">
<
el-input v-mod
el="i
tem.name"></
el-input>
</
el-
form-i
tem>
<
el-
form-i
tem :lab
el="'年龄' + (index + 2)">
<
el-input v-mod
el="i
tem.age"></
el-input>
</
el-
form-i
tem>
<
el-
form-i
tem :lab
el="'性别' + (index + 2)">
<
el-s
elect v-mod
el="i
tem.gender">
<
el-option lab
el="男"
value="male"></
el-option>
<
el-option lab
el="女"
value="female"></
el-option>
</
el-s
elect>
</
el-
form-i
tem>
</
templa
te>
</
el-
form>
<div slot="foo
ter">
<
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>
</
templa
te>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, gender: 'male' },
{ name: '李四', age: 25, gender: 'female' },
{ name: '王五', age: 30, gender: 'male' }
],
addDialogVisible: false,
add
Form: {
name: '',
age: '',
gender: '',
i
tems: []
}
}
},
methods: {
showAddDialog(index) {
this.add
Form = { name: '', age: '', gender: '', i
tems: [] }
if (index !==
undefined) {
this.add
Form.i
tems.push({})
}
this.addDialogVisible = true
},
addMore() {
this.add
Form.i
tems.push({})
},
addData() {
const
form = this.$refs.add
Form
form.
valida
te(
valid => {
if (
valid) {
const data = {
name: this.add
Form.name,
age: this.add
Form.age,
gender: this.add
Form.gender
}
this.add
Form.i
tems.forEach(i
tem => {
data.name += ',' + i
tem.name
data.age += ',' + i
tem.age
data.gender += ',' + i
tem.gender
})
this.tableData.push(data)
this.addDialogVisible = false
}
})
}
}
}
</script>
```
在上面的代码
中，表格
中的每一行都有一个“添加”按钮，点击后会弹出对话框。在对话框
中，有一个基本信息的表单和一个“添加多个”按钮。点击“添加多个”按钮会动态添加多个输入框和下拉框。点击“确认”按钮会将输入的数据添加到表格
中。
需要注意的是，这里使用了
Element UI 中的表单
验证功能，需要在表单组件
中添加 `ref` 属性，并在确认按钮的点击事件
中调用 `
valida
te` 方法进行
验证。同时，为了支持添加多个数据，需要在表单
中添加一个数组类型的字段，存储多个输入框和下拉框的数据。在确认按钮的点击事件
中，需要将这些数据拼接成一个字符串，并添加到表格
中。
扫一扫
3122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
