element-ui

hjy1995發表於2024-11-23

官方文件 https://element.eleme.cn/#/zh-CN/component/input-number

安裝和使用

安裝

npm i element-ui -S

引入 Element

在 main.js 中寫入以下內容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

元件

Layout 佈局

Container 佈局容器

用於佈局的容器元件，方便快速搭建頁面的基本結構：

<el-container>：外層容器。當子元素中包含 <el-header> 或 <el-footer> 時，全部子元素會垂直上下排列，否則會水平左右排列。

<el-header>：頂欄容器。

<el-aside>：側邊欄容器。

<el-main>：主要區域容器。

<el-footer>：底欄容器。

以上元件採用了 flex 佈局，使用前請確定目標瀏覽器是否相容。此外，<el-container> 的子元素只能是後四者，後四者的父元素也只能是 <el-container>。

Icon 圖示

直接透過設定類名為 el-icon-iconName 來使用即可

Button 按鈕

使用type、plain、round和circle屬性來定義 Button 的樣式，禁用disable

<el-row>
  <el-button>預設按鈕</el-button>
  <el-button type="primary">主要按鈕</el-button>
  <el-button type="success" disabled>成功按鈕</el-button>
  <el-button type="info">資訊按鈕</el-button>
  <el-button type="warning">警告按鈕</el-button>
  <el-button type="danger">危險按鈕</el-button>
</el-row>

引數	說明	型別	可選值	預設值
size	尺寸	string	medium / small / mini	—
type	型別	string	primary / success / warning / danger / info / text	—
plain	是否樸素按鈕	boolean	—	false
round	是否圓角按鈕	boolean	—	false
circle	是否圓形按鈕	boolean	—	false
loading	是否載入中狀態	boolean	—	false
disabled	是否禁用狀態	boolean	—	false
icon	圖示類名	string	—	—
autofocus	是否預設聚焦	boolean	—	false
native-type	原生 type 屬性	string	button / submit / reset	button

Radio 單選框

要使用 Radio 元件，只需要設定v-model繫結變數，選中意味著變數的值為相應 Radio label屬性的值，label可以是String、Number或Boolean。

<template>
  <el-radio v-model="radio" label="1">備選項</el-radio>
  <el-radio v-model="radio" label="2">備選項</el-radio>
</template>

禁用

在el-radio元素中設定disabled屬性即可，它接受一個Boolean，true為禁用。

Checkbox 多選框

在el-checkbox元素中定義v-model繫結變數，單一的checkbox中，預設繫結變數的值會是Boolean，選中為true。

Input 輸入框

<el-input v-model="input" placeholder="請輸入內容"></el-input>

透過 disabled 屬性指定是否禁用 input 元件

InputNumber 計數器

僅允許輸入標準的數字值，可定義範圍

在el-input-number元素中使用v-model繫結變數即可，變數的初始值即為預設值

Select 選擇器

v-model的值為當前被選中的el-option的 value 屬性值

<template>
  <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>
</template>

可清空單選：包含清空按鈕，可將選擇器清空為初始狀態

為el-select設定clearable屬性，則可將選擇器清空。需要注意的是，clearable屬性僅適用於單選。

Cascader 級聯選擇器

只需為 Cascader 的options屬性指定選項陣列即可渲染出一個級聯選擇器。透過props.expandTrigger可以定義展開子級選單的觸發方式。

<div class="block">
  <span class="demonstration">預設 click 觸發子選單</span>
  <el-cascader
    v-model="value"
    :options="options"></el-cascader>
</div>

Switch 開關

繫結v-model到一個Boolean型別的變數。可以使用active-color屬性與inactive-color屬性來設定開關的背景色。

<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>

TimePicker 時間選擇器

使用 el-time-select 標籤，分別透過start、end和step指定可選的起始時間、結束時間和步長

DatePicker 日期選擇器

基本單位由type屬性指定。快捷選項需配置picker-options物件中的shortcuts，禁用日期透過 disabledDate 設定，傳入函式

  <div class="block">
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="選擇日期">
    </el-date-picker>
  </div>

DateTimePicker 日期時間選擇器

透過設定type屬性為datetime，即可在同一個選擇器裡同時進行日期和時間的選擇。快捷選項的使用方法與 Date Picker 相同。

  <div class="block">
    <el-date-picker
      v-model="value1"
      type="datetime"
      placeholder="選擇日期時間">
    </el-date-picker>
  </div>

Upload 上傳

透過 slot 你可以傳入自定義的上傳按鈕型別和文字提示。可透過設定limit和on-exceed來限制上傳檔案的個數和定義超出限制時的行為。可透過設定before-remove來阻止檔案移除操作。

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">點選上傳</el-button>
  <div slot="tip" class="el-upload__tip">只能上傳jpg/png檔案，且不超過500kb</div>
</el-upload>

Form 表單

在 Form 元件中，每一個表單域由一個 Form-Item 元件構成，表單域中可以放置各種型別的表單控制元件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活動名稱">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
</el-form>

行內表單：

當垂直方向空間受限且表單較簡單時，可以在一行內放置表單。設定 inline 屬性可以讓表單域變為行內的表單域

表單驗證：

Form 元件提供了表單驗證的功能，只需要透過 rules 屬性傳入約定的驗證規則，並將 Form-Item 的 prop 屬性設定為需校驗的欄位名即可。校驗規則參見 async-validator

Table 表格

當el-table元素中注入data物件陣列後，在el-table-column中用prop屬性來對應物件中的鍵名即可填入資料，用label屬性來定義表格的列名。可以使用width屬性來定義列寬。

<el-table :data="tableData" style="width: 100%">
  <el-table-column
    prop="date"
    label="日期"
    width="180">
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名"
    width="180">
  </el-table-column>
</el-table>

預設情況下，Table 元件是不具有豎直方向的邊框的，如果需要，可以使用border屬性，它接受一個Boolean，設定為true即可啟用。

獲取當前行資料

表格中的資料是已經顯示過的，要想拿到當前表格中指定行數的資料時，則需要在template標籤中新增這個屬性即可

slot-scope=“scope” 同時寫出一個點選事件的方法例如上述的編輯按鈕，其中 scope.row就是拿到當前行的所有資料，如果要想拿到制定資料，則需要指定你當前行指定需要的資料的欄位就好，如：scope.row.musicId

<el-table-column label="操作" align="center" min-width="100">
    <template slot-scope="scope">
        <el-button type="primary" @click="edit(scope.row)">編輯</el-button>
    </template>
</el-table-column>

formatter

用來格式化內容。預設引數 Function(row, column, cellValue, index)，案例：後端返回1、0，前端顯示為是、否

Pagination 分頁

設定layout，表示需要顯示的內容，用逗號分隔，佈局元素會依次顯示。prev表示上一頁，next為下一頁，pager表示頁碼列表，除此以外還提供了jumper和total，sizes和特殊的佈局符號->，->後的元素會靠右顯示，jumper表示跳頁元素，total表示總條目數，sizes用於設定每頁顯示的頁碼數量

當前頁碼切換事件（current-change）：@current-change='xx' currentPage 改變時會觸發，事件傳入當前頁碼，可以根據當前頁碼向後臺獲取當前頁碼的資料。

單獨使用current-change屬性要實現雙向繫結，可以使用 .sync 修飾符 :current-change.sync='currentPage'
每頁顯示條數變更事件（size-change）：@size-change='xx' pageSize 改變時會觸發，事件傳入的引數是當前每頁顯示的條數，可以根據當前每頁顯示的條數向後臺獲取當前頁碼的資料。

單獨使用page-size屬性要實現雙向繫結，可以使用 .sync 修飾符 :page-size.sync='pageSize'

<div class="block">
  <el-pagination
    layout="prev, pager, next"
    :total="1000">
  </el-pagination>
</div>

Empty 空狀態

空狀態時的佔位提示。

<el-empty description="描述文字"></el-empty>

Descriptions 描述列表

列表形式展示多個欄位。

<el-descriptions title="使用者資訊">
    <el-descriptions-item label="使用者名稱">kooriookami</el-descriptions-item>
    <el-descriptions-item label="手機號">18100000000</el-descriptions-item>
    <el-descriptions-item label="居住地">蘇州市</el-descriptions-item>
    <el-descriptions-item label="備註">
      <el-tag size="small">學校</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="聯絡地址">江蘇省蘇州市吳中區吳中大道 1188 號</el-descriptions-item>
</el-descriptions>

Statistic 統計數值

<el-statistic group-separator="," :precision="2" :value="12333" :title="統計"></el-statistic>

Message 訊息提示

Message 在配置上與 Notification 非常類似，所以部分 options 在此不做詳盡解釋，文末有 options 列表，可以結合 Notification 的文件理解它們。Element 註冊了一個$message方法用於呼叫，Message 可以接收一個字串或一個 VNode 作為引數，它會被顯示為正文內容。

<template>
  <el-button :plain="true" @click="open">開啟訊息提示</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$message('這是一條訊息提示');
      },
</script>

Notification 通知

懸浮出現在頁面角落，顯示全域性的通知提醒訊息。

Notification 元件提供通知功能，Element 註冊了$notify方法，接收一個options字面量引數，在最簡單的情況下，你可以設定title欄位和message欄位，用於設定通知的標題和正文。預設情況下，經過一段時間後 Notification 元件會自動關閉，但是透過設定duration，可以控制關閉的時間間隔，特別的是，如果設定為0，則不會自動關閉。注意：duration接收一個Number，單位為毫秒，預設為4500。

顯示當前頁面的路徑，快速返回之前的任意頁面。

在el-breadcrumb中使用el-breadcrumb-item標籤表示從首頁開始的每一級。Element 提供了一個separator屬性，在el-breadcrumb標籤中設定它來決定分隔符，它只能是字串，預設為斜槓/

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">活動管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活動列表</el-breadcrumb-item>
  <el-breadcrumb-item>活動詳情</el-breadcrumb-item>
</el-breadcrumb>

將動作或選單摺疊到下拉選單中。

透過元件slot來設定下拉觸發的元素以及需要透過具名slot為dropdown 來設定下拉選單。預設情況下，下拉按鈕只要hover即可，無需點選也會顯示下拉選單。

<el-dropdown>
  <span class="el-dropdown-link">
    下拉選單<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>黃金糕</el-dropdown-item>
    <el-dropdown-item>獅子頭</el-dropdown-item>
    <el-dropdown-item>螺螄粉</el-dropdown-item>
    <el-dropdown-item disabled>雙皮奶</el-dropdown-item>
    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

Dialog 對話方塊

Dialog 彈出一個對話方塊，適合需要定製性更大的場景。

需要設定visible屬性，它接收Boolean，當為true時顯示 Dialog。Dialog 分為兩個部分：body和footer，footer需要具名為footer的slot。title屬性用於定義標題，它是可選的，預設值為空。最後，本例還展示了before-close的用法。

before-close 僅當使用者透過點選關閉圖示或遮罩關閉 Dialog 時起效。如果你在 footer 具名 slot 裡新增了用於關閉 Dialog 的按鈕，那麼可以在按鈕的點選回撥函式里加入 before-close 的相關邏輯。

Dialog 元件的內容可以是任意的，甚至可以是表格或表單

<el-button type="text" @click="dialogVisible = true">點選開啟 Dialog</el-button>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>這是一段資訊</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('確認關閉？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

Dialog 的內容是懶渲染的，即在第一次被開啟之前，傳入的預設 slot 不會被渲染到 DOM 上。因此，如果需要執行 DOM 操作，或透過 ref 獲取相應元件，請在 open 事件回撥中進行。

如果 visible 屬性繫結的變數位於 Vuex 的 store 內，那麼 .sync 不會正常工作。此時需要去除 .sync 修飾符，同時監聽 Dialog 的 open 和 close 事件，在事件回撥中執行 Vuex 中對應的 mutation 更新 visible 屬性繫結的變數的值。

常用於展示滑鼠 hover 時的提示資訊。

使用content屬性來決定hover時的提示資訊。由placement屬性決定展示效果：placement屬性值為：方向-對齊位置；四個方向：top、left、right、bottom；三種對齊位置：start, end，預設為空。如placement="left-end"，則提示資訊出現在目標元素的左側，且提示資訊的底部與目標元素的底部對齊。

Popconfirm 氣泡確認框

點選元素，彈出氣泡確認框

在 Popconfirm 中，只有 title 屬性可用，content 屬性不會被展示

Carousel 走馬燈

在有限空間內，迴圈播放同一型別的圖片、文字等內容

結合使用el-carousel和el-carousel-item標籤就得到了一個走馬燈。幻燈片的內容是任意的，需要放在el-carousel-item標籤中。預設情況下，在滑鼠 hover 底部的指示器時就會觸發切換。透過設定trigger屬性為click，可以達到點選觸發的效果。

Collapse 摺疊皮膚

透過摺疊皮膚收納內容區域

Divider 分割線

區隔內容的分割線。

Drawer 抽屜

有些時候, Dialog 元件並不滿足我們的需求, 比如你的表單很長, 亦或是你需要臨時展示一些文件, Drawer 擁有和 Dialog 幾乎相同的 API, 在 UI 上帶來不一樣的體驗.

vue引入element-ui
2019-11-11
VueUI
element-ui基本使用
2020-12-22
UI
element-ui坑點
2020-10-15
UI
element-ui匯出表格
2019-03-23
UI
vue中使用element-UI
2019-01-27
VueUI
element-ui 匯出excel
2018-11-28
UIExcel
vue中Element-ui引入
2018-02-09
VueUI
vue 之 element-ui 示例
2017-07-05
VueUI
spring boot + vue + element-ui全棧開發入門——整合element-ui
2018-02-09
Spring BootVueUI全棧
element-ui配合vue分頁
2019-02-16
UIVue
element-ui滾動條元件
2018-09-13
UI元件
electron-vue 部署 (element-ui)
2022-09-26
VueUI
Element-UI個人使用總結
2018-04-28
UI
從element-ui按需引入去探索
2020-07-26
UI
Element-UI 框架 el-scrollbar 元件
2019-03-09
UI框架元件
element-ui修改樣式不生效
2019-06-06
UI
Element-ui之導航選單
2019-04-29
UI
element-ui table 行內編輯
2019-02-16
UI
多選單選混合 element-ui
2020-12-03
UI
element-ui 版本升級對比
2018-04-13
UI
Element-UI / dom.js 的學習
2020-04-05
UIJS
手寫（radio）element-ui元件
2019-03-03
UI元件
element-ui中上傳檔案upload
2019-04-02
UI
Element-ui el-scrollbar 原始碼解析
2019-05-01
UI原始碼
vue + element-ui的分頁問題
2018-12-16
VueUI
Element-Ui元件（三十九）Tooltip 文字提示
2018-03-06
UI元件
Element-Ui元件（四十一）Card 卡片
2018-03-06
UI元件
vue2.0專案引入element-ui
2018-04-11
VueUI
VUE - 區域性引用Element-UI元件
2024-09-11
VueUI元件
vue打包 element-ui不生效怎麼辦
2020-03-16
VueUI
Element-ui,Vue表格匯出生成Excel表
2020-02-26
UIVueExcel
element-UI庫Table表格匯出Excel表格
2020-02-19
UIExcel
Vue 中使用element-ui樣式無效
2020-05-07
VueUI
element-ui中row-class-name的用法
2020-07-15
UI
修改Element-ui元件的樣式無效？
2019-12-20
UI元件
element-ui - 原始碼學習 - 自定義事件
2018-07-31
UI原始碼事件
多個element-ui 計數器的坑
2018-03-07
UI
Element-Ui元件（四十）Popover 彈出框
2018-03-06
UI元件