遍历elementui

遍历 Element UI 组件

Element UI 是一个基于 Vue.js 的组件库，遍历其组件通常指动态渲染组件或处理组件数据。以下是几种常见的遍历场景和方法。

动态渲染表单组件

使用 v-for 动态生成表单项，结合 Element UI 的表单组件（如 el-input、el-select）。

<template>
  <el-form :model="form">
    <el-form-item
      v-for="(item, index) in formItems"
      :key="index"
      :label="item.label"
      :prop="item.prop"
    >
      <el-input
        v-if="item.type === 'input'"
        v-model="form[item.prop]"
      />
      <el-select
        v-if="item.type === 'select'"
        v-model="form[item.prop]"
      >
        <el-option
          v-for="opt in item.options"
          :key="opt.value"
          :label="opt.label"
          :value="opt.value"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: { name: '', gender: '' },
      formItems: [
        { label: '姓名', prop: 'name', type: 'input' },
        { label: '性别', prop: 'gender', type: 'select', options: [
          { label: '男', value: 'male' },
          { label: '女', value: 'female' }
        ]}
      ]
    };
  }
};
</script>

遍历表格数据

Element UI 的 el-table 组件通过 data 属性绑定数据，自动渲染行和列。

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="col in tableColumns"
      :key="col.prop"
      :prop="col.prop"
      :label="col.label"
    />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 22 }
      ],
      tableColumns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' }
      ]
    };
  }
};
</script>

遍历菜单项

动态生成侧边栏菜单，结合 el-menu 和递归组件。

<template>
  <el-menu :default-active="activeMenu">
    <menu-item
      v-for="item in menuItems"
      :key="item.path"
      :item="item"
    />
  </el-menu>
</template>

<script>
import MenuItem from './MenuItem.vue';

export default {
  components: { MenuItem },
  data() {
    return {
      activeMenu: '/dashboard',
      menuItems: [
        { path: '/dashboard', title: '首页' },
        { 
          path: '/system', 
          title: '系统管理',
          children: [
            { path: '/system/user', title: '用户管理' }
          ]
        }
      ]
    };
  }
};
</script>

递归组件实现

若菜单包含嵌套结构，需使用递归组件处理层级关系。

<!-- MenuItem.vue -->
<template>
  <el-submenu v-if="item.children" :index="item.path">
    <template #title>{{ item.title }}</template>
    <menu-item
      v-for="child in item.children"
      :key="child.path"
      :item="child"
    />
  </el-submenu>
  <el-menu-item v-else :index="item.path">
    {{ item.title }}
  </el-menu-item>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    item: { type: Object, required: true }
  }
};
</script>

动态加载组件

通过 Vue 的 component 标签动态渲染 Element UI 组件。

<template>
  <component
    :is="currentComponent"
    v-bind="componentProps"
  />
</template>

<script>
import { ElButton, ElInput } from 'element-ui';

export default {
  data() {
    return {
      currentComponent: 'ElButton',
      componentProps: { type: 'primary' }
    };
  },
  components: { ElButton, ElInput }
};
</script>

以上方法覆盖了 Element UI 中常见的遍历需求，包括动态表单、表格、菜单及组件渲染。根据实际场景选择合适的方式即可。