elemui开发全景

一、elemui概览

elemui是饿了么团队推出的一款基于Vue2.0的桌面端组件库。elemui提供了丰富的UI组件，包括表单、表格、弹窗、图表等，支持多种主题色和自定义主题的设置，同时还提供了很好的国际化支持。elemui还支持按需引入，使用简单方便，成为了众多开发人员的首选组件库。

二、elemui特点

1、大量丰富的UI组件：包括表格、分页、表单、按钮、弹框、提示、图表等。

2、响应式设计：完美地适应不同屏幕大小的设备。

3、灵活的主题定制：支持多种主题色和自定义主题的设置。

4、良好的国际化支持：支持多语言切换，可以通过自定义语言包进行扩展。

5、按需引入：支持部分组件打包，可以更高效地实现页面的加载。

三、表格组件

表格组件是elemui中最为常用和重要的组件之一。elemui的表格组件采用了虚拟滚动技术，大大减少了大数据量下的页面卡顿和加载时间。

以下是一个简单的elemui表格的示例代码：

<template>
  <el-table :data="tableData" style="width: 100%" :height="alldata.length<13?(alldata.length+1)*50+'px':'650px'" :row-class-name="tableRowClassName" :header-cell-style="{background:'#f5f5f5',color:'#666',fontWeight:'bold',padding:'10px',border:'1px solid #ddd'}">
    <el-table-column prop="date" label="日期" width="120" align="center" :header-cell-style="{background:'#f5f5f5',color:'#666',fontWeight:'bold',padding:'10px',borderRight:'1px solid #ddd'}"></el-table-column>
    <el-table-column prop="name" label="姓名" align="center" :header-cell-style="{background:'#f5f5f5',color:'#666',fontWeight:'bold',padding:'10px'}"></el-table-column>
    <el-table-column prop="address" label="地址" width="360" align="center" :header-cell-style="{background:'#f5f5f5',color:'#666',fontWeight:'bold',padding:'10px',borderRight:'1px solid #ddd'}"></el-table-column>
    <el-table-column prop="tags" label="标签" align="center" :header-cell-style="{background:'#f5f5f5',color:'#666',fontWeight:'bold',padding:'10px'}">
      <template slot-scope="scope">
        <el-tag v-for="(item,index) in scope.row.tags" :key="index" style="margin: 5px" :type="index%2==0?'primary':''">{{ item }}</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  import { getTestData } from "@/api";
  export default {
    name: 'TableDemo',
    data() {
      return {
        tableData: [],
        alldata:[],
      };
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 0) {
          return 'first-row';
        } else if (rowIndex === this.tableData.length - 1) {
          return 'last-row';
        }
        return '';
      }
    },
    created() {
      getTestData().then(res => {
        this.tableData = res.data.list;
        this.alldata=res.data.list;
      })
    },
  };
</script>

四、form表单组件

elemui的表单组件提供了丰富的输入框、选择器、日期选择器等常用表单元素。下面是一个elemui表单的简单示例。

<template>
  <el-form :model="formData" label-width="80px" ref="form" :rules="rules" >
    <el-form-item label="姓名" prop="name">
      <el-input v-model="formData.name" ></el-input>
    </el-form-item>

    <el-form-item label="性别" prop="gender" >
      <el-radio-group v-model="formData.gender" >
        <el-radio label="男" ></el-radio>
        <el-radio label="女" ></el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="出生日期" prop="birth" >
      <el-date-picker v-model="formData.birth" type="date" style="width:100%" ></el-date-picker>
    </el-form-item>

    <el-form-item label="出生地点" prop="birthplace" >
      <el-select v-model="formData.birthplace" placeholder="请选择" >
        <el-option label="北京" value="beijing" ></el-option>
        <el-option label="上海" value="shanghai" ></el-option>
        <el-option label="广州" value="guangzhou" ></el-option>
        <el-option label="深圳" value="shenzhen" ></el-option>
        <el-option label="杭州" value="hangzhou" ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="备注" prop="remark" >
      <el-input v-model="formData.remark" type="textarea" autosize ></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">确认重置

<script>
  export default {
    name: 'FormDemo',
    data() {
      return {
        formData: {
          name: '',
          gender: '',
          birth: '',
          birthplace: '',
          remark: '',
        },
        rules: {
          name: [
            { required: true, message: '姓名不能为空', trigger: 'blur' },
            { pattern: /^[\u4E00-\u9FA5]{2,6}$/, message: '姓名必须为2-6个汉字', trigger: 'blur' }
          ],
          gender: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          birth: [
            { type: 'date', required: true, message: '请选择出生日期', trigger: 'change' }
          ],
          birthplace: [
            { required: true, message: '请选择出生地点', trigger: 'change' }
          ],
          remark: [
            { max: 200, message: '备注不能超过200个字符', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            console.log('submit!');
          } else {
            return false;
          }
        });
      }
    },
  };
</script>

五、弹框组件

elemui的弹框包括了提示框、确认框、对话框、消息提示框等多种类型，可以根据不同需求快速实现弹框功能。以下是一个elemui对话框的简单示例代码。

<template>
  <div>
    <el-button type="primary" @click="visible=true">打开对话框</el-button>
    <el-dialog title="对话框标题" :visible.sync="visible">
      <span>这是一条对话框内容。</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消确 定