elementui高级

高级用法：自定义主题

Element UI 支持通过 SCSS 变量覆盖实现主题定制。在项目中创建 element-variables.scss 文件，修改变量后引入到入口文件：

$--color-primary: #ff4500; // 修改主题色
@import "~element-ui/packages/theme-chalk/src/index";

需配合 sass-loader 编译，并在 vue.config.js 中配置 loaderOptions 传递变量。

动态表单与校验

结合 el-form 的 rules 和动态 prop 实现复杂校验：

<el-form :model="form" :rules="rules">
  <el-form-item 
    v-for="(item, index) in dynamicFields" 
    :key="index" 
    :prop="`items.${index}.value`" 
    :rules="rules.dynamicItem"
  >
    <el-input v-model="form.items[index].value" />
  </el-form-item>
</el-form>

校验规则需使用嵌套路径，如 'items.0.value'。

组件二次封装

通过 v-bind="$attrs" 和 v-on="$listeners" 实现透传：

<template>
  <el-select 
    v-bind="$attrs" 
    v-on="$listeners"
    :remote-method="handleSearch"
  >
    <slot />
  </el-select>
</template>
<script>
export default {
  methods: {
    handleSearch(query) {
      this.$emit('search', query);
    }
  }
}
</script>

性能优化：按需加载

使用 babel-plugin-component 按需引入组件：

1. 安装插件：

   npm install babel-plugin-component -D

2. 配置 babel.config.js：

   module.exports = {
   plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
   ]
   };

表格高级功能

树形表格与懒加载：

<el-table
  :data="treeData"
  row-key="id"
  lazy
  :load="loadNode"
  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
  <el-table-column prop="name" label="节点名称" />
</el-table>

loadNode 方法需返回 Promise 或直接赋值子节点数据。

跨表格拖拽排序：
通过 row-key 和 @row-dragend 事件实现，配合 sortable.js 库处理复杂交互。

与 Vue 3 兼容方案

使用 element-plus（Element UI 的 Vue 3 版本），并通过 unplugin-element-plus 实现自动导入：

npm install element-plus @unplugin-element-plus

配置 vite.config.js：

import ElementPlus from 'unplugin-element-plus/vite';
export default {
  plugins: [ElementPlus()]
};