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

elementui动态

2026-03-05 20:52:26前端教程

动态表单实现方法

使用Element UI实现动态表单可以通过v-for循环动态生成表单项，结合数据绑定实现灵活的表单结构。以下为具体实现方式：

<template>
  <el-form :model="dynamicForm" ref="dynamicForm">
    <el-form-item
      v-for="(item, index) in dynamicForm.items"
      :key="index"
      :label="'字段' + (index + 1)"
      :prop="'items.' + index + '.value'"
      :rules="{ required: true, message: '不能为空', trigger: 'blur' }"
    >
      <el-input v-model="item.value"></el-input>
      <el-button @click="removeField(index)">删除</el-button>
    </el-form-item>
    <el-button @click="addField">添加字段</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      dynamicForm: {
        items: [{ value: '' }]
      }
    }
  },
  methods: {
    addField() {
      this.dynamicForm.items.push({ value: '' })
    },
    removeField(index) {
      this.dynamicForm.items.splice(index, 1)
    }
  }
}
</script>

动态表格实现方案

Element UI的表格组件支持动态列和行数据绑定，可通过计算属性或动态数据源实现：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
    ></el-table-column>
  </el-table>
  <el-button @click="addColumn">添加列</el-button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 }
      ],
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' }
      ]
    }
  },
  methods: {
    addColumn() {
      const newProp = 'column' + (this.columns.length + 1)
      this.columns.push({ prop: newProp, label: '新列' })
      this.tableData.forEach(item => {
        item[newProp] = Math.floor(Math.random() * 100)
      })
    }
  }
}
</script>

动态菜单实现技巧

结合路由配置动态生成侧边栏菜单，适用于权限管理系统：

// 路由配置示例
const routes = [
  {
    path: '/dashboard',
    component: Layout,
    children: [
      {
        path: '',
        component: () => import('@/views/dashboard'),
        meta: { title: 'Dashboard', icon: 'dashboard' }
      }
    ]
  }
]

// 菜单组件
<template>
  <el-menu :default-active="activeMenu">
    <sidebar-item
      v-for="route in permission_routes"
      :key="route.path"
      :item="route"
      :base-path="route.path"
    />
  </el-menu>
</template>

动态主题切换方案

通过修改CSS变量实现Element UI主题色动态切换：

// 修改主题色
document.documentElement.style.setProperty('--el-color-primary', newColor)

// 保存到本地存储
localStorage.setItem('theme-color', newColor)

// 初始化时读取
const savedColor = localStorage.getItem('theme-color') || '#409EFF'
document.documentElement.style.setProperty('--el-color-primary', savedColor)

动态组件加载方式

使用Vue的<component>配合Element UI组件实现动态渲染：

elementui动态

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

<script>
import { ElButton, ElInput, ElSelect } from 'element-plus'

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