当前位置：首页 > VUE

vue el 实现

2026-01-12 21:14:28VUE

Vue 中使用 Element UI (el) 实现常见功能

Element UI 是基于 Vue 的组件库，提供丰富的 UI 组件。以下介绍常见功能的实现方法。

表单验证

在表单中使用 el-form 并绑定验证规则：

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

定义验证规则和数据：

data() {
  return {
    form: { username: '' },
    rules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      ]
    }
  }
},
methods: {
  submitForm() {
    this.$refs.formRef.validate(valid => {
      if (valid) {
        // 验证通过
      }
    })
  }
}

表格展示数据

使用 el-table 展示数据：

<el-table :data="tableData" border>
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

定义表格数据：

data() {
  return {
    tableData: [
      { date: '2023-01-01', name: '张三', address: '北京市' },
      { date: '2023-01-02', name: '李四', address: '上海市' }
    ]
  }
}

弹窗对话框

使用 el-dialog 实现弹窗：

<el-button @click="dialogVisible = true">打开弹窗</el-button>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
  <span>这是一条消息</span>
  <span slot="footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确定</el-button>
  </span>
</el-dialog>

控制弹窗显示：

data() {
  return {
    dialogVisible: false
  }
}

下拉选择器

使用 el-select 实现下拉选择：

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

定义选项数据：

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

日期选择器

使用 el-date-picker 选择日期：

<el-date-picker
  v-model="date"
  type="date"
  placeholder="选择日期">
</el-date-picker>

绑定日期数据：

data() {
  return {
    date: ''
  }
}

分页组件

使用 el-pagination 实现分页：

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 30, 40]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total">
</el-pagination>

处理分页事件：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    total: 100
  }
},
methods: {
  handleSizeChange(val) {
    this.pageSize = val
    this.fetchData()
  },
  handleCurrentChange(val) {
    this.currentPage = val
    this.fetchData()
  },
  fetchData() {
    // 获取数据
  }
}

消息提示

使用 this.$message 显示提示消息：

this.$message('这是一条普通消息')
this.$message.success('成功消息')
this.$message.warning('警告消息')
this.$message.error('错误消息')

加载状态

使用 v-loading 指令显示加载状态：

<el-button
  type="primary"
  @click="showLoading"
  v-loading.fullscreen.lock="loading">
  显示全屏加载
</el-button>

控制加载状态：

vue el 实现

data() {
  return {
    loading: false
  }
},
methods: {
  showLoading() {
    this.loading = true
    setTimeout(() => {
      this.loading = false
    }, 2000)
  }
}