好的，
element-ui提供了许多组件可以用于
表单和
表格的实现。以下是一个简
单的例子，展示了如何使用
element-ui实现
表单和
表格的增删改查功能：
```
<template>
<div>
<el-form :model="form" :rules="rules" ref="form" label-width="100px" style="margin-bottom: 20px;">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">
提交</el-button>
<el-button @click="resetForm('form')">
重置</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-
dialog :visible.sync="
dialogVisible" title="编辑" :before-close="handleClose">
<el-form :model="
dialogForm" :rules="rules" ref="
dialogForm" label-width="100px">
<el-form-item label="姓名" prop="name">
<el-input v-model="
dialogForm.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="
dialogForm.age"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="
dialogForm.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="
dialogVisible = false">取消</el-button>
<el-button type="primary" @click="updateItem">确定</el-button>
</div>
</el-
dialog>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: '',
gender: ''
},
rules: {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
gender: [{ required: true, message: '请选择性别', trigger: 'change' }]
},
tableData: [
{ name: '张三', age: 18, gender: 'male' },
{ name: '李四', age: 20, gender: 'female' },
{ name: '王五', age: 22, gender: 'male' }
],
dialogVisible: false,
dialogForm: {
name: '',
age: '',
gender: ''
},
currentItemIndex: -1
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.tableData.push(this.form)
this.$message.success('
提交成功')
this.resetForm(formName)
} else {
this.$message.error('
提交失败')
return false
}
})
},
resetForm(formName) {
this.$refs[formName].resetFields()
},
handleEdit(index, row) {
this.currentItemIndex = index
this.
dialogForm = Object.assign({}, row)
this.
dialogVisible = true
},
handleClose(done) {
this.$confirm('确定
关闭吗？')
.then(_ => {
done()
})
.catch(_ => {})
},
updateItem() {
this.tableData.splice(this.currentItemIndex, 1, this.
dialogForm)
this.
dialogVisible = false
this.$message.success('更新成功')
},
handleDelete(index, row) {
this.tableData.splice(index, 1)
this.$message.success('删除成功')
}
}
}
</script>
```
在这个例子中，我们使用了 `el-form` 和 `el-table` 组件来实现
表单和
表格。在
表单中，我们使用了 `el-input` 和 `el-radio-group` 组件来获取用户输入。在
表格中，我们使用了 `el-table-column` 组件来定义
表格列，使用了 `slot-scope` 来获取每行的数据。同时，我们使用了 `el-
dialog` 组件来实现编辑操作。
在这个例子中，我们可以添加新的数据，编辑已有的数据，删除数据，同时也进行了
表单验证。希望这个例子能够帮助到您。
最低0.47元/天 解锁文章
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
