当前位置：首页 > 前端教程

elementui嵌套

2026-03-05 21:46:53前端教程

ElementUI 嵌套组件实现方法

ElementUI 是一个基于 Vue.js 的组件库，嵌套使用其组件可以构建复杂的界面结构。以下是常见的嵌套场景和实现方式：

表单嵌套表格

在表单中嵌套表格时，可以使用 el-form 包裹 el-table，实现表单提交时同时获取表格数据：

<el-form :model="formData" ref="formRef">
  <el-form-item label="基本信息">
    <el-input v-model="formData.name"></el-input>
  </el-form-item>

  <el-table :data="formData.tableData">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</el-form>

对话框嵌套表单

在对话框内嵌套表单是常见模式，注意管理对话框状态和表单验证：

<el-dialog title="编辑" :visible.sync="dialogVisible">
  <el-form :model="editForm" :rules="rules">
    <el-form-item label="名称" prop="name">
      <el-input v-model="editForm.name"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="submitForm">确认</el-button>
  </div>
</el-dialog>

菜单嵌套子菜单

实现多级菜单结构时，使用 el-submenu 进行嵌套：

<el-menu>
  <el-submenu index="1">
    <template slot="title">一级菜单</template>
    <el-menu-item index="1-1">子菜单1</el-menu-item>
    <el-submenu index="1-2">
      <template slot="title">二级菜单</template>
      <el-menu-item index="1-2-1">子菜单2</el-menu-item>
    </el-submenu>
  </el-submenu>
</el-menu>

表格嵌套行

通过 expand 插槽实现表格行嵌套展示详细信息：

<el-table :data="tableData">
  <el-table-column type="expand">
    <template slot-scope="props">
      <el-form label-position="left">
        <el-form-item label="详细信息">
          <span>{{ props.row.detail }}</span>
        </el-form-item>
      </el-form>
    </template>
  </el-table-column>
  <el-table-column prop="date" label="日期"></el-table-column>
</el-table>

嵌套布局管理

使用 el-container 系列组件实现页面整体布局嵌套：

elementui嵌套

<el-container>
  <el-header>头部</el-header>
  <el-container>
    <el-aside width="200px">侧边栏</el-aside>
    <el-main>
      <el-card>主要内容区</el-card>
    </el-main>
  </el-container>
</el-container>