如何使用?
时间: 2023-07-20 14:10:03 浏览: 46
对于 `el-table` 和 `el-form` 的嵌套使用,主要有以下几个步骤:
1. 在 `el-form` 中添加表单项,包括表单元素的类型、绑定的 `v-model` 和校验规则等。
```html
<el-form ref="form" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="formData.age"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="formData.gender">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
</el-form>
```
2. 在 `el-table` 中添加列,绑定对应的 `prop` 值,使其对应到表单项中对应的 `prop`。
```html
<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>
```
3. 监听 `el-table` 的 `row-click` 事件,在事件处理函数中将选中的行数据赋值到表单的 `formData` 中。
```html
<el-table :data="tableData" style="width: 100%" @row-click="rowClick">
<!-- ... -->
</el-table>
<script>
export default {
data() {
return {
formData: {
name: '',
age: '',
gender: ''
},
rules: {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
gender: [{ required: true, message: '请选择性别', trigger: 'blur' }]
},
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 22, gender: '女' },
// ...
]
}
},
methods: {
rowClick(row) {
this.formData = Object.assign({}, row)
}
}
}
</script>
```
这样,就可以实现 `el-table` 和 `el-form` 的嵌套使用。同时,也可以在 `el-form` 中添加一些表单校验规则,来验证用户在表格中输入的数据的合法性。