【汇总】ElementUI中高频次使用代码片段
作者：互联网
翻页器
<el-pagination :hidden="total <= 10" @size-change="initList" @current-change="initList" :total="total" :page-sizes="[10, 20, 50]" :page-size.sync="pageSize" :current-page.sync="currentPage" layout="total, sizes, prev, pager, next, jumper" ></el-pagination>
currentPage: 1, pageSize: 10, total: 0,按钮
<div class="btns"> <el-button size="small" type="primary" plain @click="reset" >重置</el-button > <el-button size="small" type="primary" @click="search()" >查询</el-button > </div>输入框
<el-input placeholder="请输入关键词搜索" suffix-icon="el-icon-search" v-model="input_value" > </el-input>下拉框
<el-select size="small" v-model="value" placeholder="请选择" @change="changeSelect(value)" > <el-option v-for="(a,$i) in options" :key="$i" :key="$i" :value="a.value" :label="a.label" > </el-option> </el-select>
options: [{value: '1', label: '选项1'}, {value: '2', label: '选项2'}, {value: '3', label: '选项3'},], value: '',
changeSelect(value){console.log(value)},空状态
<!-- 空状态 --> <el-empty v-else style="text-align: center; width: 100%" :image-size="200" description="暂无数据" ></el-empty>加载
v-loading="loading"
loading:true,
this.loading=false;
showLoad() { this.load = this.$loading({ text: "加载中…" }); },
hideLoad() { this.load && this.load.close(); },
const loading=this.$loading({lock: true,text: "加载中…",spinner: "el-icon-loading",background: "rgba(0,0,0,0.7)"});setTimeout(()=> {loading.close();},2000);
https://loading.io初始化
//初始化
init(){
},
搜索
//搜索
search() {
this.currentPage = 1;
this.init();
},
重置
//重置
reset(){
//相关参数归零
this.currentPage = 1;
this.init();
},
监听、计算、生命周期、方法
watch: {
},
computed: {
},
created() {
},
mounted() {
},
methods: {
},
标签：load,片段,loading,ElementUI,value,label,init,currentPage,高频 来源： https://blog.csdn.net/qq_37860634/article/details/120634406