标签：load 片段 loading ElementUI value label init currentPage 高频

 翻页器

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。