Element UI 表格嵌套表单、输入框、选择框
有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单、输入框和选择框等等的方式,添加保存和修改数据。
直接展示代码
<el-form ref="form" :model="form.item">
<el-table :data="data">
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column label="车辆牌照">
<template slot-scope="scope">
<el-select v-if="editNum == scope.$index" v-model="scope.row.carNumber">
<el-option
v-for="item in carNumbers"
:label="item.label"
:value="item.value"
:key="item.value"
></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="通行费(元)">
<template slot-scope="scope">
<el-input v-if="editNum == scope.$index" v-model="scope.row.toll" clearble/>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="editNum == scope.$index">编辑</el-button>
<el-button @click="delList(scope.row,scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button @click="addList">加一行</el-button>
</el-form>
<script>
export default {
data() {
return {
form: {
name: '',
id: '',
item: [],
removeIdList:[],
}
}
},
methods: {
//加一行
addList(){
this.form.item.push({
carNumber:'',
toll:'',
});
},
//删除数据
delList(item, index) {
this.$confirm('是否确认删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.form.item.splice(index, 1)
if (item.id) {
// 如果是在修改的时候删除其中一个数据,则保存Id,方便后端做删除操作
this.form.removeIdList.put(item.id)
}
this.$message({
type: 'success',
message: '删除成功!'
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}
}
</script>
这是以前做的:点击加一行就会增加一行,点击编辑该行才可以填写修改数据,避免不必要的错误