1. Tabs標簽頁

<template><el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane><el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane><el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane><el-tab-pane label="定時任務補償" name="fourth">定時任務補償</el-tab-pane></el-tabs>
</template>
<script>export default {data() {return {activeName: 'first'};},methods: {handleClick(tab, event) {console.log(tab, event);}}};
</script>

v-model="activeName"

• 具體來說，v-model 指令將 <el-tabs> 組件的當前激活狀態（即當前顯示的 <el-tab-pane>）與 Vue 實例中的一個數據屬性（在這個例子中是 activeName）進行了綁定。
• 用戶通過點擊或其他交互方式改變 <el-tabs> 的激活狀態時，activeName 的值會自動更新為相應標簽頁的 name 屬性值。
• 反過來，如果 Vue 實例中的 activeName 數據屬性的值通過某種方式（如方法調用或計算屬性更新）發生了變化，<el-tabs> 組件的激活狀態也會相應地更新，以顯示與新的 activeName* 值對應的標簽頁。

2. 單選框 el-radio

<template><el-radio-group v-model="radio"><el-radio :label="3">備選項</el-radio><el-radio :label="6">備選項</el-radio><el-radio :label="9">備選項</el-radio></el-radio-group>
</template><script>export default {data () {return {radio: 3};}}
</script>

v-model="radio"

當用戶點擊其中一個**<el-radio>** 按鈕時，v-model 會確保 radio 數據屬性的值更新為所選按鈕的 label 值。如果用戶選擇了 label 為 ‘2’ 的按鈕，radio 的值將變為 ‘2’，反之亦然。這種雙向綁定確保了 Vue 實例的數據和 DOM 狀態始終保持同步。

3. 復選框 el-checkbox

<template><el-checkbox-group v-model="checkList"><el-checkbox label="復選框 A"></el-checkbox><el-checkbox label="復選框 B"></el-checkbox><el-checkbox label="復選框 C"></el-checkbox><el-checkbox label="禁用" disabled></el-checkbox><el-checkbox label="選中且禁用" disabled></el-checkbox></el-checkbox-group>
</template><script>export default {data () {return {checkList: ['選中且禁用','復選框 A']};}};
</script>

4. 下拉框 el-select

<template><el-select v-model="value" placeholder="請選擇"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>export default {data() {return {options: [{value: '選項1',label: '黃金糕'}, {value: '選項2',label: '雙皮奶'}, {value: '選項3',label: '蚵仔煎'}, {value: '選項4',label: '龍須面'}, {value: '選項5',label: '北京烤鴨'}],value: ''}}}
</script>

v-model="value"

當用戶從下拉選擇框中選擇一個選項時，data 的值將更新為所選項的 value。同樣地，如果你在 Vue 實例中改變 data 的值，下拉選擇框的選中項也會相應地更新。

5. 表格 el-table

<template><el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><script>export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1516 弄'}]}}}
</script>

6. 對話框 el-dialog

<el-button type="text" @click="dialogVisible = true">點擊打開 Dialog</el-button><el-dialogtitle="提示":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>

7. 文字提示 el-tooltip

<el-tooltip placement="top"><div slot="content">提示信息</div><el-button>Top center</el-button>
</el-tooltip>

8. 抽屜 el-drawer

<el-button type="text" @click="table = true">打開嵌套表格的 Drawer</el-button>
<el-button type="text" @click="dialog = true">打開嵌套 Form 的 Drawer</el-button>
<el-drawertitle="我嵌套了表格!":visible.sync="table"direction="rtl"size="50%"><el-table :data="gridData"><el-table-column property="date" label="日期" width="150"></el-table-column><el-table-column property="name" label="姓名" width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table>
</el-drawer><el-drawertitle="我嵌套了 Form !":before-close="handleClose":visible.sync="dialog"direction="ltr"custom-class="demo-drawer"ref="drawer"><div class="demo-drawer__content"><el-form :model="form"><el-form-item label="活動名稱" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活動區域" :label-width="formLabelWidth"><el-select v-model="form.region" placeholder="請選擇活動區域"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item></el-form><div class="demo-drawer__footer"><el-button @click="cancelForm">取 消</el-button><el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '確 定' }}</el-button></div></div>
</el-drawer><script>
export default {data() {return {table: false,dialog: false,loading: false,gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}],form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},formLabelWidth: '80px',timer: null,};},methods: {handleClose(done) {if (this.loading) {return;}this.$confirm('確定要提交表單嗎？').then(_ => {this.loading = true;this.timer = setTimeout(() => {done();// 動畫關閉需要一定的時間setTimeout(() => {this.loading = false;}, 400);}, 2000);}).catch(_ => {});},cancelForm() {this.loading = false;this.dialog = false;clearTimeout(this.timer);}}
}
</script>