vue3 el-form中使用循环li li中包含el-select下拉框
时间: 2024-05-16 08:17:01 浏览: 117
Vue中el-form标签中的自定义el-select下拉框标签功能
可以使用`v-for`指令循环生成`<el-form-item>`组件,然后在每个`<el-form-item>`中包含一个`<el-select>`下拉框组件即可。示例如下:
```
<el-form>
<el-form-item v-for="(item, index) in options" :key="index" :label="item.label">
<el-select v-model="item.value" placeholder="请选择">
<el-option v-for="(option, optionIndex) in item.options" :key="optionIndex" :label="option.label" :value="option.value"></el-option>
</el-select>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
options: [
{
label: '选项一',
value: '',
options: [
{
label: '选项一-1',
value: '1-1'
},
{
label: '选项一-2',
value: '1-2'
}
]
},
{
label: '选项二',
value: '',
options: [
{
label: '选项二-1',
value: '2-1'
},
{
label: '选项二-2',
value: '2-2'
}
]
}
]
}
}
}
</script>
```
在上述代码中,`options`数组包含了需要生成下拉框的数据,使用`v-for`指令循环生成`<el-form-item>`组件,并在每个组件中使用`<el-select>`下拉框组件,通过`v-model`指令绑定选中的值,使用`<el-option>`组件循环生成下拉框的选项。
阅读全文