Element-UI 常用組件和屬性總結(jié)
Button 按鈕
Button 組件是 Element-UI 中最基礎(chǔ)的組件之一拷邢。它可以用于觸發(fā)事件或者進(jìn)行頁(yè)面跳轉(zhuǎn)允趟。常用屬性包括：
- type：按鈕類型，可選值有 primary码倦、success企孩、warning、danger袁稽、info勿璃。
- size：按鈕大小，可選值有 medium推汽、small补疑、mini。
- plain：是否為樸素按鈕歹撒，即是否有邊框和背景色莲组。
- round：是否為圓角按鈕。
- loading：是否為加載狀態(tài)暖夭。
- disabled：是否禁用按鈕锹杈。
示例代碼:
<template>
<div>
<el-button type="primary">主要按鈕</el-button>
<el-button type="success">成功按鈕</el-button>
<el-button type="warning">警告按鈕</el-button>
<el-button type="danger">危險(xiǎn)按鈕</el-button>
<el-button type="info">信息按鈕</el-button>
<el-button>默認(rèn)按鈕</el-button>
<br />
<el-button size="medium">中等按鈕</el-button>
<el-button size="small">小型按鈕</el-button>
<el-button size="mini">超小按鈕</el-button>
<br />
<el-button plain>樸素按鈕</el-button>
<el-button round>圓角按鈕</el-button>
<el-button loading>加載按鈕</el-button>
<el-button disabled>禁用按鈕</el-button>
</div>
</template>
Input 輸入框
Input 組件是 Element-UI 中常用的表單組件之一。它可以用于用戶輸入文本鳞尔、數(shù)字嬉橙、密碼等內(nèi)容。常用屬性包括：
- type：輸入框類型寥假，可選值有 text市框、textarea、password糕韧、email枫振、number喻圃、date、datetime 等粪滤。
- placeholder：輸入框的提示文本斧拍。
- clearable：是否顯示清空按鈕。
- disabled：是否禁用輸入框杖小。
- readonly：是否只讀肆汹。
- v-model：綁定輸入框的值。
示例代碼：
<template>
<div>
<el-input v-model="inputValue" placeholder="請(qǐng)輸入內(nèi)容"></el-input>
<br />
<el-input v-model="inputValue" placeholder="請(qǐng)輸入密碼" type="password"></el-input>
<br />
<el-input v-model="inputValue" placeholder="請(qǐng)輸入數(shù)字" type="number"></el-input>
<br />
<el-input v-model="inputValue" placeholder="請(qǐng)輸入日期" type="date"></el-input>
<br />
<el-input v-model="inputValue" placeholder="請(qǐng)輸入多行文本" type="textarea"></el-input>
<br />
<el-input v-model="inputValue" placeholder="只讀輸入框" readonly></el-input>
<el-input v-model="inputValue" placeholder="禁用輸入框" disabled></el-input>
<el-input v-model="inputValue" placeholder="帶清空按鈕" clearable></el-input>
</div>
</template>
Select 選擇器
Select 組件是 Element-UI 中常用的表單組件之一予权。它提供了多種下拉選項(xiàng)昂勉，可以進(jìn)行單選、多選等操作扫腺。常用屬性包括：
- multiple：是否多選岗照，默認(rèn)為 false。
- placeholder：選擇器占位符笆环。
- clearable：是否可清空攒至，默認(rèn)為 false。
- disabled：是否禁用選擇器躁劣，默認(rèn)為 false迫吐。
- size：選擇器尺寸，可選值有 medium账忘、small渠抹、mini，默認(rèn)為medium闪萄。
- filterable：是否可搜索選項(xiàng)，默認(rèn)為 false奇颠。
- remote：是否使用遠(yuǎn)程搜索败去，默認(rèn)為 false。
- remote-method：遠(yuǎn)程搜索函數(shù)烈拒。
- loading：是否加載中圆裕。
示例代碼：
<el-select v-model="value" placeholder="請(qǐng)選擇">
<el-option label="選項(xiàng)1" value="1"></el-option>
<el-option label="選項(xiàng)2" value="2"></el-option>
<el-option label="選項(xiàng)3" value="3"></el-option>
</el-select>
<el-select v-model="value" multiple placeholder="請(qǐng)選擇">
<el-option label="選項(xiàng)1" value="1"></el-option>
<el-option label="選項(xiàng)2" value="2"></el-option>
<el-option label="選項(xiàng)3" value="3"></el-option>
</el-select>
<el-select v-model="value" filterable remote :remote-method="querySearchAsync"></el-select>
Table 表格
Table 組件是 Element-UI 中常用的數(shù)據(jù)展示組件之一。它提供了多種功能荆几，包括排序吓妆、篩選、分頁(yè)等吨铸。常用屬性包括：
- data：表格數(shù)據(jù)行拢。
- columns：表格列的配置。
- height：表格高度诞吱。
- border：是否顯示表格邊框舟奠，默認(rèn)為 false竭缝。
- stripe：是否顯示間隔斑馬紋，默認(rèn)為 false沼瘫。
- size：表格尺寸抬纸，可選值有 medium、small耿戚、mini湿故，默認(rèn)為 medium。
- fit：是否自適應(yīng)父元素寬度膜蛔，默認(rèn)為 true坛猪。
- empty-text：表格為空時(shí)的提示文本。
示例代碼：
<el-table :data="tableData" :height="250" border>
<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>
Form 表單
Form 組件是 Element-UI 中常用的表單組件之一飞几。它提供了表單的基本功能砚哆，包括表單驗(yàn)證、表單重置等屑墨。常用屬性包括：
- model：表單數(shù)據(jù)模型躁锁。
- rules：表單驗(yàn)證規(guī)則。
- inline：是否為行內(nèi)表單卵史，默認(rèn)為 false战转。
- label-position：表單域標(biāo)簽的位置，可選值有 right以躯、left槐秧、top，默認(rèn)為 right忧设。
- label-width：表單域標(biāo)簽的寬度刁标，如 "50px"，默認(rèn)為自動(dòng)計(jì)算寬度址晕。
- size：表單尺寸膀懈，可選值有 medium、small谨垃、mini启搂，默認(rèn)為 medium。
示例代碼：
<el-form :model="form" :rules="rules" ref="form" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年齡" prop="age">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item label="性別" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
Dialog 對(duì)話框
Dialog 組件是 Element-UI 中常用的彈窗組件之一刘陶。它提供了彈窗的基本功能胳赌，包括彈窗內(nèi)容、彈窗標(biāo)題匙隔、彈窗按鈕等疑苫。常用屬性包括：
- title：彈窗標(biāo)題。
- visible：彈窗是否可見。
- width：彈窗寬度缀匕，默認(rèn)為 50%纳决。
- center：彈窗是否居中顯示，默認(rèn)為 false乡小。
- modal：是否顯示遮罩層阔加，默認(rèn)為 true。
- show-close：是否顯示關(guān)閉按鈕满钟，默認(rèn)為 true胜榔。
- before-close：彈窗關(guān)閉前的回調(diào)函數(shù)。
示例代碼：
<template>
<div>
<el-button type="primary" @click="dialogVisible = true">打開彈窗</el-button>
<el-dialog
title="提示"
:visible="dialogVisible"
:before-close="handleBeforeClose"
:close-on-click-modal="false"
width="30%"
>
<p>這是一段內(nèi)容湃番。</p>
<p>這是一段內(nèi)容夭织。</p>
<p>這是一段內(nèi)容。</p>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">確 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
};
},
methods: {
handleBeforeClose(done) {
this.$confirm("確定關(guān)閉吠撮？")
.then(() => {
done();
})
.catch(() => {});
},
},
};
</script>
