element ui 里滴 步骤条 el-step中间可以加入 输入框 什么的吗
想基于这个步骤的外观,做一个定制旅游路线的表单
使用插槽
<div id="app">
<div style="height: 300px;">
<el-steps direction="vertical" :active="1">
<el-step title="步骤 1">
<template v-slot:description>
<span>
<el-input />
</span>
</template>
</el-step>
<el-step title="步骤 2">8888888</el-step>
<el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
</el-steps>
</div>
</div>
在 Element UI 的 el-step 组件中,中间不能直接添加输入框或其他表单元素,因为 el-step 组件只是一个用于展示步骤的 UI 组件,并不是一个表单组件。
但是,你可以在每个步骤的内容中使用其他的 Element UI 表单组件,如 el-form、el-input、el-select 等来实现你的需求。可以在 el-step 的 description 描述中使用 el-form 来展示你需要的表单元素。示例代码如下:
<el-steps :active="1">
<el-step title="步骤一" description="填写信息">
<el-form>
<el-form-item label="姓名">
<el-input v-model="name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="age"></el-input>
</el-form-item>
</el-form>
</el-step>
<el-step title="步骤二" description="确认信息">
<el-form>
<el-form-item label="姓名">
<span>{{name}}</span>
</el-form-item>
<el-form-item label="年龄">
<span>{{age}}</span>
</el-form-item>
</el-form>
</el-step>
<el-step title="步骤三" description="完成">
</el-step>
</el-steps>
这里我们在每个步骤的 description 中都添加了一个 el-form,然后在 el-form 中添加了两个 el-form-item,每个 el-form-item 中都包含了一个 el-input 或者一个 span 标签来展示或收集数据。你可以根据需要自行添加其他表单元素。
使用插槽啊 你没解决的话 明天艾特我一下 我有现成的代码,或者 直接搜Step Slot,去看这个