element ui 里滴 步骤条 el-step中间可以加入 输入框 什么的吗想基于这个步骤的外观,做一个定制旅游路线的表单

element ui 里滴 步骤条 el-step中间可以加入 输入框 什么的吗
想基于这个步骤的外观,做一个定制旅游路线的表单

img

使用插槽

<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,去看这个