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

遍历elementui

2026-03-05 20:46:17前端教程

遍历 ElementUI 组件的方法

在 Vue 项目中使用 ElementUI 时，遍历组件通常涉及动态渲染、数据绑定和循环结构。以下是几种常见场景的实现方式。

遍历表格数据

使用 el-table 组件时，通过 v-for 动态渲染列或行数据。

<el-table :data="tableData">
  <el-table-column
    v-for="(column, index) in columns"
    :key="index"
    :prop="column.prop"
    :label="column.label">
  </el-table-column>
</el-table>

data() {
  return {
    tableData: [
      { name: '张三', age: 20 },
      { name: '李四', age: 25 }
    ],
    columns: [
      { prop: 'name', label: '姓名' },
      { prop: 'age', label: '年龄' }
    ]
  }
}

遍历表单元素

动态生成 el-form-item 时，结合 v-for 和表单数据模型。

<el-form :model="form">
  <el-form-item
    v-for="(item, index) in formItems"
    :key="index"
    :label="item.label"
    :prop="item.prop">
    <el-input v-model="form[item.prop]"></el-input>
  </el-form-item>
</el-form>

data() {
  return {
    form: { username: '', password: '' },
    formItems: [
      { prop: 'username', label: '用户名' },
      { prop: 'password', label: '密码' }
    ]
  }
}

遍历下拉选项

动态渲染 el-select 的选项列表。

<el-select v-model="selectedValue">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

data() {
  return {
    selectedValue: '',
    options: [
      { value: '1', label: '选项1' },
      { value: '2', label: '选项2' }
    ]
  }
}

遍历树形控件

动态生成 el-tree 的节点数据。

<el-tree
  :data="treeData"
  :props="defaultProps"
  @node-click="handleNodeClick">
</el-tree>

data() {
  return {
    treeData: [{
      label: '一级节点',
      children: [{
        label: '二级节点'
      }]
    }],
    defaultProps: {
      children: 'children',
      label: 'label'
    }
  }
}

遍历菜单项

动态渲染导航菜单时使用 el-menu 和 el-submenu。

<el-menu>
  <el-submenu
    v-for="(menu, index) in menus"
    :key="index"
    :index="menu.index">
    <template slot="title">{{ menu.title }}</template>
    <el-menu-item
      v-for="(item, i) in menu.items"
      :key="i"
      :index="item.index">
      {{ item.title }}
    </el-menu-item>
  </el-submenu>
</el-menu>

data() {
  return {
    menus: [
      {
        index: '1',
        title: '菜单1',
        items: [
          { index: '1-1', title: '子菜单1' },
          { index: '1-2', title: '子菜单2' }
        ]
      }
    ]
  }
}