大家好，歡迎回到我們的Vue教學系列博客！在前十六篇博客中，我們學習了Vue.js的基礎知識、安裝Node.js與npm、使用Vue Devtools進行調試、Vue實例與生命周期鉤子、數(shù)據(jù)綁定（單向與雙向）、計算屬性與偵聽器、條件渲染和列表渲染、事件處理、組件之間的傳值（props和$emit）、動態(tài)組件和異步組件、組件間的通信（provide/inject，event bus），以及探索并嘗試安裝一個基于Vue.js的UI框架——Element UI。今天，我們將深入探討并學習如何使用Element UI的基礎組件，以打造美觀實用的Vue應用。無論你是Vue新手小白，還是有一定基礎的開發(fā)者，掌握Element UI的基礎組件都將大大提高你的開發(fā)效率。

一、Element UI基礎組件概覽

Element UI提供了豐富的組件，包括按鈕、輸入框、表格、彈窗、分頁等。這些組件可以幫助我們快速搭建界面，提高開發(fā)效率。接下來，我們將學習一些常用的Element UI基礎組件。

二、按鈕組件（ElButton）

按鈕組件（ElButton）是Element UI中非常基礎且重要的組件之一，它用于觸發(fā)各種操作或事件。按鈕組件支持多種類型，包括主要按鈕、成功按鈕、信息按鈕、警告按鈕和危險按鈕等，每種類型的按鈕都有其特定的樣式和用途。

1.?按鈕類型

按鈕的類型決定了按鈕的外觀和默認行為。以下是一些常用的按鈕類型：

• 主要按鈕（Primary）：默認樣式，通常用于主要操作。
• 成功按鈕（Success）：表示成功的操作，如“保存”或“提交”。
• 信息按鈕（Info）：表示提供信息或狀態(tài)，如“詳情”或“幫助”。
• 警告按鈕（Warning）：表示可能會有副作用的操作，如“刪除”或“取消”。
• 危險按鈕（Danger）：表示危險或破壞性操作，如“刪除”或“重置”。

<template>
  <div>
    <el-button type="primary">主要按鈕</el-button>
    <el-button type="success">成功按鈕</el-button>
    <el-button type="info">信息按鈕</el-button>
    <el-button type="warning">警告按鈕</el-button>
    <el-button type="danger">危險按鈕</el-button>
  </div>
</template>

在這個例子中，我們使用了不同類型的按鈕，包括主要按鈕、成功按鈕、信息按鈕、警告按鈕和危險按鈕。

2. 禁用狀態(tài)

<template>
  <div>
    <el-button type="primary" :disabled="true">禁用按鈕</el-button>
  </div>
</template>

在這個例子中，我們通過:disabled="true"屬性禁用了一個按鈕。

3. 圓角按鈕

<template>
  <div>
    <el-button type="primary" round>圓角按鈕</el-button>
  </div>
</template>

在這個例子中，我們通過round屬性創(chuàng)建了一個圓角按鈕。

4.?加載狀態(tài)

按鈕還可以顯示加載狀態(tài)，這通常用于表示后臺操作正在進行中。

<el-button type="primary" :loading="loading">加載按鈕</el-button>

在這個例子中，按鈕的加載狀態(tài)通過:loading="loading"綁定了一個布爾值。

5. 按鈕尺寸

按鈕有多種尺寸，包括大號按鈕、小號按鈕和默認尺寸。

<el-button type="primary" size="large">大號按鈕</el-button>
<el-button type="primary" size="small">小號按鈕</el-button>
<el-button type="primary" size="default">默認按鈕</el-button>

在這個例子中，按鈕有三種不同的尺寸，通過size屬性進行設置。

6. 圖標按鈕

按鈕可以包含圖標，常用于需要視覺提示但不需要文字說明的情況。

<el-button type="primary" icon="el-icon-search">搜索按鈕</el-button>

在這個例子中，按鈕包含了一個搜索圖標。

7. 按鈕組

當需要放置多個相關按鈕時，可以使用按鈕組（Button Group）。

<el-button-group>
  <el-button type="primary">上一頁</el-button>
  <el-button type="primary">下一頁</el-button>
</el-button-group>

在這個例子中，兩個按鈕被放置在一個按鈕組中，通常用于實現(xiàn)導航或切換功能。

三、輸入組件（ElInput）

輸入組件（ElInput）是Element UI中用于創(chuàng)建輸入框的組件，它常用于收集用戶數(shù)據(jù)，如文本、密碼、數(shù)字等。ElInput組件支持多種類型，包括普通文本輸入、密碼輸入、數(shù)字輸入等，并且可以通過v-model指令實現(xiàn)雙向數(shù)據(jù)綁定。

1. 基礎用法

ElInput的基礎用法非常簡單，只需要在模板中添加<el-input>標簽，并使用v-model指令綁定數(shù)據(jù)即可。

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

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

在這個例子中，我們創(chuàng)建了一個簡單的文本輸入框，用戶可以在其中輸入內容，輸入框的內容會實時更新到inputValue數(shù)據(jù)屬性中。

2. 類型

ElInput支持多種類型，包括：

• text：普通文本輸入。
• password：密碼輸入，顯示為點。
• number：數(shù)字輸入，支持數(shù)字鍵盤。
• email：電子郵件輸入，會自動校驗郵箱格式。
• url：URL輸入，會自動校驗URL格式。

<template>
  <div>
    <el-input v-model="inputValue" placeholder="請輸入內容" type="text"></el-input>
    <el-input v-model="passwordValue" placeholder="請輸入密碼" type="password"></el-input>
    <el-input v-model="numberValue" placeholder="請輸入數(shù)字" type="number"></el-input>
    <el-input v-model="emailValue" placeholder="請輸入郵箱" type="email"></el-input>
    <el-input v-model="urlValue" placeholder="請輸入網(wǎng)址" type="url"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      passwordValue: '',
      numberValue: '',
      emailValue: '',
      urlValue: ''
    };
  }
};
</script>

3.?禁用狀態(tài)

輸入組件也可以被禁用，禁用后的輸入框將不可編輯。

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

在這個例子中，輸入框被設置為禁用狀態(tài)，通過:disabled="true"綁定了一個布爾值。

4.?自動完成

ElInput支持自動完成功能，可以用于提示用戶輸入。

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

在這個例子中，通過autocomplete="off"屬性禁用了瀏覽器的自動完成功能。

5.?自動聚焦

輸入組件可以自動聚焦，以便用戶直接開始輸入。

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

在這個例子中，通過autofocus屬性使輸入框在頁面加載時自動聚焦。

6. 文本area

對于多行文本輸入，可以使用textarea類型。

<el-input v-model="textareaValue" placeholder="請輸入多行文本" type="textarea"></el-input>

在這個例子中，我們創(chuàng)建了一個多行文本輸入框。

四、表格組件（ElTable）

表格組件（ElTable）是Element UI中用于顯示和操作表格數(shù)據(jù)的組件，它提供了豐富的功能，如排序、篩選、分頁等，非常適合展示復雜的數(shù)據(jù)列表。

1. 基礎用法

<template>
  <div>
    <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-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1516 弄'
        }
      ]
    };
  }
};
</script>

在這個例子中，我們使用el-table和el-table-column組件創(chuàng)建了一個簡單的表格，并使用:data="tableData"屬性綁定了表格數(shù)據(jù)。

2.?表格操作

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // ... 省略數(shù)據(jù)部分
      ],
      multipleSelection: []
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

在這個例子中，我們添加了一個多選列，并定義了一個handleSelectionChange方法，用于處理表格行的選中狀態(tài)變化。

3.?表格屬性

ElTable支持多種屬性，用于控制表格的行為和樣式：

• :data="tableData"：綁定表格的數(shù)據(jù)源。
• style="width: 100%"：設置表格的寬度。
• max-height="200px"：設置表格的最大高度。
• border：是否顯示表格邊框。

4.?列屬性

ElTableColumn支持多種屬性，用于控制列的行為和樣式：

• prop：列對應的數(shù)據(jù)字段。
• label：列的標題。
• width：列的寬度。
• sortable：是否啟用列的排序功能。
• filters：列的篩選條件。
• show-overflow-tooltip：是否顯示溢出內容的工具提示。

5.?排序

要啟用表格的排序功能，只需要在<el-table-column>中設置sortable屬性為true。

<el-table-column prop="date" label="日期" width="180" sortable></el-table-column>

在這個例子中，日期列被設置為可排序的。

6. 篩選

表格的篩選功能通過filters屬性實現(xiàn)，它是一個對象數(shù)組，每個對象定義了一個篩選條件。

<el-table-column prop="date" label="日期" width="180">
  <template slot-scope="scope">
    {{ scope.row.date }}
  </template>
</el-table-column>

在這個例子中，我們創(chuàng)建了一個簡單的篩選模板，用于顯示日期列的值。

7. 分頁

要實現(xiàn)表格的分頁功能，可以使用<el-pagination>組件，并通過:current-page="currentPage"和:page-size="pageSize"屬性綁定當前頁和每頁條數(shù)。

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <!-- ... 省略其他列定義 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="100">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 100    
    };
  },
  methods: {
    handleSizeChange(newSize) {
      console.log(`每頁 ${newSize} 條`);
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      console.log(`當前頁: ${newPage}`);
    }
  }
};
</script>

在這個例子中，我們結合了表格和分頁組件，以實現(xiàn)數(shù)據(jù)的分頁顯示。

五、彈窗組件（ElDialog）

彈窗組件（ElDialog）是Element UI中用于創(chuàng)建模態(tài)對話框的組件，它允許我們在應用的頂層覆蓋一個新頁面，顯示特定的信息或表單，直到用戶與之交互。彈窗組件在處理用戶輸入、顯示詳細信息或確認操作時非常有用。

1. 基礎用法

ElDialog的基礎用法包括創(chuàng)建對話框和定義其內容。首先，你需要使用<el-dialog>標簽包裹對話框，并使用title屬性設置對話框的標題。

<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">打開對話框</el-button>
    <el-dialog :visible.sync="dialogVisible" title="歡迎對話框">
      <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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  }
};
</script>

在這個例子中，我們使用el-dialog組件創(chuàng)建了一個簡單的模態(tài)對話框，并通過:visible.sync="dialogVisible"屬性控制對話框的顯示和隱藏。

2.?屬性

ElDialog支持多種屬性，用于控制對話框的行為和樣式：

• :visible.sync="dialogVisible"：控制對話框的顯示和隱藏，通常與Vue數(shù)據(jù)屬性綁定。
• title="歡迎對話框"：設置對話框的標題。
• width="30%"：設置對話框的寬度。
• before-close：設置對話框關閉前的鉤子函數(shù)。
• close-on-click-modal：點擊模態(tài)背景是否關閉對話框。
• show-close：是否顯示關閉按鈕。

3. 插槽

ElDialog支持插槽，允許你在對話框內部自定義內容。除了默認的插槽外，還可以使用以下插槽：

• title：自定義對話框的標題區(qū)域。
• footer：自定義對話框的底部操作區(qū)域。

<el-dialog :visible.sync="dialogVisible" title="自定義對話框">
  <span>自定義內容</span>
  <template v-slot:title>
    <h2>自定義標題</h2>
  </template>
  <template v-slot:footer>
    <el-button @click="dialogVisible = false">自定義按鈕</el-button>
  </template>
</el-dialog>

在這個例子中，我們自定義了對話框的標題和底部操作按鈕。

4. 方法

ElDialog還提供了一些方法，用于控制對話框的行為：

• open()：打開對話框。
• close()：關閉對話框。

六、總結

通過本博客的學習，我們深入了解了Element UI的基礎組件，包括按鈕、輸入框、表格、彈窗和分頁等。這些組件是構建美觀實用Vue應用的關鍵，它們不僅提供了豐富的功能，還支持樣式定制，使得我們可以輕松打造符合需求的界面。

掌握Element UI的基礎組件對于提高Vue.js應用的開發(fā)效率非常重要。它們不僅可以幫助我們節(jié)省時間，還能確保我們的應用擁有高質量的UI。希望這篇博客能幫助你深入理解Element UI的基礎組件，并在實際項目中靈活運用。

如有任何疑問，歡迎在評論區(qū)留言討論。讓我們一起學習，共同進步！

往期教學請前往作者VUE專欄下查看文章來源地址http://www.zghlxwxcb.cn/news/detail-851000.html

到了這里，關于Vue教學17：Element UI基礎組件上手，打造美觀實用的Vue應用的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！