翻页器

<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: {

},