elementplus 表格里面包一个动态表单怎么实现

您可以使用 Element Plus 的 el-form 组件和 el-table 组件来实现在表格中包含动态表单的功能。具体实现方法如下：

1. 在 el-table 组件中，使用 scoped slot 的方式来自定义表格的每一行内容，同时在每一行中添加一个按钮或者链接，用于触发动态表单的显示。

2. 在点击按钮或链接时，通过事件的方式来触发显示动态表单的 el-dialog 组件，同时将当前行的数据传递给动态表单组件。

3. 在动态表单组件中，根据传递过来的数据来动态生成表单的字段和校验规则，同时在表单提交时将数据传递回父组件，以便进行后续的处理。

下面是一个简单的示例代码：

<template>
<div>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<<el-table-column>
<template slot-scope="scope">
<el-button @click="showForm(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="formVisible">
<el-form :model="formData" :rules="formRules">
<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="formData.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>

<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
],
formVisible: false,
formData: {},
formRules: {}
}
},
methods: {
showForm(row) {
this.formData = Object.assign({}, row)
this.formVisible = true
this.formRules = {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
age: [{ required: true, message: '请输入年龄', trigger: 'blur' }]
}
},
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 提交表单数据
// ...
this.formVisible = false
}
})
}
}
}
</script>