前端开发——ElementUI组件的使用

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>