如何用elementUI实现描述列表Description嵌套el-input使得描述列表可以输入内容
时间: 2023-11-28 18:04:16 浏览: 401
您可以使用 ElementUI 中的 `el-form` 和 `el-form-item` 组件来实现描述列表嵌套 `el-input` 的效果。具体步骤如下:
1. 首先,在 `el-form` 中使用 `v-for` 循环遍历描述列表的数据,生成多个 `el-form-item`。
2. 在每个 `el-form-item` 中,使用 `label` 属性设置描述列表的标题,使用 `prop` 属性绑定数据的属性名称。
3. 在每个 `el-form-item` 中,使用 `el-input` 组件作为表单控件,使用 `v-model` 指令绑定数据的属性值。
示例代码如下:
```
<template>
<el-form :model="form" label-position="top">
<el-form-item v-for="(item, index) in form.list" :key="index" :label="item.title" :prop="'list.' + index + '.content'">
<el-input v-model="item.content"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
list: [
{ title: '标题1', content: '' },
{ title: '标题2', content: '' },
{ title: '标题3', content: '' },
]
}
};
}
};
</script>
```
在上面的示例代码中,我们使用 `v-for` 循环遍历 `form.list` 数组,生成三个 `el-form-item`。在每个 `el-form-item` 中,使用 `label` 属性设置标题,并使用 `prop` 属性绑定数据的属性名称。然后使用 `el-input` 组件作为表单控件,并使用 `v-model` 指令绑定数据的属性值。这样就可以实现描述列表嵌套 `el-input` 的效果了。
阅读全文