element表单插槽里做循环渲染数组里的对象属性元素
时间: 2024-05-14 17:12:55 浏览: 74
element 中 el-menu 组件的无限极循环思路代码详解
你可以使用Vue.js的v-for指令来在element表单插槽中循环渲染数组里的对象属性元素。以下是一个简单的示例:
```html
<el-form :model="form">
<template v-for="(item, index) in items">
<el-form-item :label="item.label" :key="item.key">
<el-input v-model="form[item.key]" :placeholder="item.placeholder"></el-input>
</el-form-item>
</template>
</el-form>
```
在上面的示例中,我们使用了v-for指令来循环渲染items数组中的每个对象。对于每个对象,我们渲染一个el-form-item元素,并将其label属性设置为对象的label属性值。我们还使用对象的key属性值作为el-input元素的v-model指令的绑定值,以便将用户输入的值绑定到表单数据中。最后,我们还设置了el-input元素的placeholder属性,以便在表单中显示占位符文本。
请注意,我们在template标记上使用了v-for指令,而不是在el-form元素上使用它。这是因为我们想要循环渲染每个el-form-item元素,而不是将整个表单视为一个循环体。
阅读全文