关于el-form+el-table+表头部分内容和表单都是动态生成(动态绑定v-model)
warning:
这篇文章距离上次修改已过449天,其中的内容可能已经有所变动。
在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属性自动应用。
评论已关闭