吐血整理！Element 常用组件！
1 Button 按钮
Button 按钮常用操作：点击触发某个方法，执行业务操作。
例如：
<el-button @click="changeFlag()">触发方法</el-button>
// 方法
changeFlag(){
}
简写：
<el-button size="small" @click="() =>{ 业务方法}">触发方法</el-button>
1. 修改变量的值
<el-button @click="changeFlag()">取消</el-button>
// 方法
changeFlag(){
this.saveFlag =! this.saveFlag;
}
简写
<el-button @click="saveFlag =! saveFlag">取消</el-button>
2. 返回上一页
<el-button @click="()=>$router.go(-1)">取消</el-button>
2 Select 选择器
Select 选择器常用操作：选择不同的值，触发方法，执行业务操作。
<el-select size="small" placeholder="请选择" v-model="searchForm.displayMode" @change="changeDataMode($event)">
<el-option :value="1" label="方式一"></el-option>
<el-option :value="2" label="方式二"></el-option>
<el-option :value="3" label="方式三"></el-option>
</el-select>
选中值触发方法：
changeDataMode(value) {
this.searchForm.displayMode = value;
},
3 Radio 单选框
Radio 单选框常用操作：选择不同的值，触发方法，执行业务操作。
<el-radio-group size="small" @change="changeRadio($event)" v-model="searchForm.state">
<el-radio-button label="">全部</el-radio-button>
<el-radio-button label="0">编辑中</el-radio-button>
<el-radio-button label="1">已审核</el-radio-button>
<el-radio-button label="2">已发布</el-radio-button>
</el-radio-group>
触发方法：
// 切换tab
changeRadio(value) {
this.searchForm.state = value;
this.getPageList();
},
4 Pagination 分页
<el-pagination
class="pagination"
layout="->,total, sizes, prev, pager, next, jumper"
:page-sizes="[10, 20, 30, 40]"
:current-page="searchForm.current"
:page-size="searchForm.size"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
绑定数据：
total: 0, // 总页数
searchForm: {
current: 1,
size: 10,
name: '',
type: 1,
state: '',
},
相关方法：
// 选择每页展示数据量
handleSizeChange(val) {
this.searchForm.size = val;
this.searchForm.current = 1;
this.getPageList();
},
// 下一页、跳转页面
handleCurrentChange(val) {
this.searchForm.current = val;
this.getPageList();
},
5 Dialog 对话框
Dialog 对话框就是弹出框，默认是隐藏状态，点击按钮触发显示。
触发按钮：
<el-button @click="stepVisiable =! stepVisiable">弹出</el-button>
Dialog 对话框页面：
<el-dialog title="弹出框" :visible.sync="stepVisiable" width="20%" :before-close="finishSign" :close-on-click-modal="false">
// 业务数据
</el-dialog>
6 Drawer 抽屉
Drawer 和 Dialog 很像，只不过展示样式不一样。默认都是隐藏状态，点击按钮触发显示。
触发按钮：
<el-button @click="drawerVisiable =! drawerVisiable">打开抽屉</el-button>
Drawer 抽屉页面代码：
<el-drawer title="询价" :visible.sync="drawerVisiable" size="100%" direction="rtl" :before-close="handleClose">
// 业务代码
</el-drawer>
总结：el-dialog 和 el-drawer 都需要通过 :visible.sync 绑定一个属性。这个属性默认值是 false，点击触发之后改为 true。
-END-
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2022-06-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录