当前位置：首页 > VUE

vue el 实现

2026-03-07 04:20:18VUE

在 Vue 项目中结合 Element UI（el）实现功能时，通常涉及组件使用、表单验证、表格操作等场景。以下是常见需求的实现方法：

表单验证

Element UI 提供 el-form 组件实现表单验证。需在 el-form 上绑定 rules 规则，并在表单项 el-form-item 中设置 prop 属性匹配规则字段。

<el-form :model="formData" :rules="rules" ref="formRef">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="formData.username"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

data() {
  return {
    formData: { username: '' },
    rules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ]
    }
  }
},
methods: {
  submitForm() {
    this.$refs.formRef.validate(valid => {
      if (valid) {
        // 验证通过逻辑
      }
    })
  }
}

表格渲染与操作

el-table 组件可实现数据表格展示，配合 el-table-column 定义列。支持排序、筛选、分页等功能。

vue el 实现

<el-table :data="tableData" border>
  <el-table-column prop="date" label="日期" sortable></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column label="操作">
    <template #default="scope">
      <el-button @click="handleEdit(scope.row)">编辑</el-button>
    </template>
  </el-table-column>
</el-table>
<el-pagination
  @current-change="handlePageChange"
  :current-page="currentPage"
  :page-size="10"
  layout="total, prev, pager, next"
  :total="total">
</el-pagination>

弹窗控制

使用 el-dialog 实现弹窗交互，通过 visible.sync 控制显示/隐藏。

<el-button @click="dialogVisible = true">打开弹窗</el-button>
<el-dialog title提示" :visible.sync="dialogVisible" width="30%">
  <span>弹窗内容</span>
  <template #footer>
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确认</el-button>
  </template>
</el-dialog>

自定义主题

通过修改 Element UI 的 SCSS 变量实现主题定制。在项目中创建样式文件覆盖默认变量：

vue el 实现

/* element-variables.scss */
$--color-primary: #ff4500;
@import "~element-ui/packages/theme-chalk/src/index";

在入口文件引入该样式文件：

import './element-variables.scss'

按需引入组件

使用 babel-plugin-component 实现按需加载，减少打包体积：

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

以上实现方式均基于 Vue 2.x 和 Element UI 2.x 版本。对于 Vue 3 项目，需使用 Element Plus 并参考其对应文档。