el-table-column中渲染的操作里面放表单
时间: 2023-10-24 19:36:29 浏览: 79
el-table,el-form在vue中封装组件化,含操作按钮和插槽.pdf
5星 · 资源好评率100%
如果你要在 `el-table-column` 中渲染一个表单,可以使用 `scoped slot`,将表单作为子组件传递给 `scoped slot` 进行渲染。
以下是示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column label="Form">
<template slot-scope="scope">
<el-form :model="scope.row.form" label-width="80px">
<el-form-item label="Gender">
<el-radio v-model="scope.row.form.gender" label="male">Male</el-radio>
<el-radio v-model="scope.row.form.gender" label="female">Female</el-radio>
</el-form-item>
<el-form-item label="Email">
<el-input v-model="scope.row.form.email"></el-input>
</el-form-item>
</el-form>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: 'John',
age: 30,
form: {
gender: 'male',
email: 'john@example.com'
}
},
{
name: 'Mary',
age: 25,
form: {
gender: 'female',
email: 'mary@example.com'
}
}
]
}
}
}
</script>
```
在这个示例中,我们在第三列中使用 `scoped slot` 渲染了一个表单,同时在 `slot-scope` 中可以访问到当前行的数据 `scope.row`,进而可以获取到该行数据的表单数据,并将其传递给子组件 `el-form` 进行渲染。
阅读全文