关于el-form+el-table+表头部分内容和表单都是动态生成(动态绑定v-model)
warning:
这篇文章距离上次修改已过188天,其中的内容可能已经有所变动。
在Vue.js中,可以使用v-for
来动态渲染el-form
和el-table
,并且表单项和表格行都可以使用v-model
进行动态绑定。以下是一个简单的例子:
<template>
<el-form ref="form" :model="formData">
<el-table :data="tableData" style="width: 100%">
<el-table-column v-for="item in formData" :key="item.prop" :prop="item.prop" :label="item.label">
<template slot-scope="scope">
<el-form-item :prop="`${scope.$index}.${item.prop}`" :rules="item.rules">
<el-input v-model="scope.row[item.prop]" placeholder="请输入内容"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: [
{ prop: 'name', label: '姓名', rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }] },
{ prop: 'age', label: '年龄', rules: [{ required: true, message: '请输入年龄', trigger: 'blur' }] },
// 更多表单项...
],
tableData: [
{ name: '', age: '' },
// 更多行数据...
],
};
},
};
</script>
在这个例子中,formData
定义了表单的结构,每个对象代表一个表单项,包括prop
(数据字段名)、label
(表头标题)和rules
(表单验证规则)。tableData
定义了表格的行数据。
在el-table
中,使用v-for
来遍历formData
,为每个表单项创建表头。在el-table-column
的template
slot中,使用el-form-item
和v-model
来动态绑定表格单元格的输入值。
这样,表头和表单项都是动态生成的,并且每个单元格都与一个表单项通过v-model
双向绑定。表单验证规则也会根据formData
中定义的rules
属性自动应用。
评论已关闭