?翻頁器

<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();
},

監聽、計算、生命周期、方法

export default {data(){return{}},watch: {},computed: {},created() {},mounted() {},methods: {},};

總結

以上是生活随笔為你收集整理的【汇总】ElementUI中高频次使用代码片段的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。