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>


  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;
      })
    },
  };

四、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')">確認重置


  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;
          }
        });
      }
    },
  };

五、彈框組件

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">取 消確 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


  export default {
    name: 'DialogDemo',
    data() {
      return {
        visible: false
      };
    },
  };

六、總結

在開發過程中，藉助elemui可以快速實現一個完整的頁面功能，避免了自己手寫大量代碼，進而提高了開發效率。elemui還在不斷地更新和迭代，擴展了更多功能和組件，為廣大開發者提供更好的使用體驗，可以說是一個非常優秀的桌面端Vue組件庫。