elmenetui表格二次封装包含查询框和分页

<!--dataList: 表格数据columnList: 表头字段  宽度minWidth使用slotName字段: 需要对列数据进行处理，不写prop字段，使用slotName字段btnText<String>: 按钮字段btnIcon<String>: 按钮的iconbtnEvent: 按钮事件btnType: 按钮类型getHeight<String>: 表格高度pagination: 分页回调方法formItemList: 查询条件List  -----label字段名 type类型(select、input、daterange、cascader)select(selectOptions下拉框数据、defaultSelect下拉框默认选中数据)cascader(options级联选择框数据)   param(用来接收查询参数)search: 查询事件isAddBtn: 是否显示添加按钮
-->
<template><div class="app-container"><el-form:inline="true"ref="ruleForm":model="formInline"class="demo-form-inline"><el-form-itemv-for="(item, index) in formItemList":key="index":label="item.label"><!-- 下拉选择框 --><el-selectv-if="item.type == 'select'"v-model="formInline[item.param]":multiple="item.multiple"placeholder="请选择"size="mini"clearable><el-optionv-for="(item2, index2) in item.selectOptions":key="index2":label="item2.dictLabel":value="item2.dictValue"></el-option></el-select><!-- 下拉选择框end --><!-- 输入框 --><el-inputv-if="item.type == 'input'"v-model="formInline[item.param]"size="mini"placeholder="请输入"clearable></el-input><!-- 输入框 --><!-- 日期范围选择框 --><el-date-pickerv-if="item.type == 'daterange' ||item.type == 'datetimerange' ||item.type == 'date' ||item.type == 'datetime'"v-model="formInline[item.param]":value-format="item.valueFormat || 'yyyy-MM-dd hh:mm:ss'":format="item.format || 'yyyy-MM-dd hh:mm:ss'"clearable:type="item.type || ''":range-separator="item.rangeSeparator || '至'":start-placeholder="item.startPlaceholder":end-placeholder="item.endPlaceholder"placeholder="请选择"size="mini"></el-date-picker><!-- 日期范围选择框end --><!-- 级联选择器 --><el-cascaderv-if="item.type == 'cascader'"v-model="formInline[item.param]"size="mini":options="item.options":props="item.props"clearable></el-cascader><!-- 级联选择器end --></el-form-item><slot name="formItem"></slot><el-form-item style="width:10rem"><el-button type="primary" size="mini" @click="onSubmit">查询</el-button><el-button type="" size="mini" @click="resetForm('ruleForm')">重置</el-button></el-form-item><!-- 可用于显示其他按钮 --><el-form-item style="width:10rem" v-if="isAddBtn"><el-button :type="btnType" :icon="btnIcon" @click="btnEvent">{{ btnText }}</el-button></el-form-item></el-form><el-tableref="table"v-loading="loading":data="dataList":height="getHeight"stripe:header-cell-style="headerCellStyle"><el-table-column label="序号" align="center" width="50" type="index" /><el-table-columnv-for="(item, index) in columnList"ref="table":label="item.label":key="index":prop="item.prop":fixed="item.fixed":min-width="item.minWidth"align="center"><template slot-scope="scope"><slot v-if="item.slotName" :name="item.slotName" :row="scope.row"></slot><div v-else>{{scope.row[item.prop]}}</div></template></el-table-column></el-table><div class="tabListPage"><el-paginationsmallclass="text-center"@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="page.page":page-sizes="pageSizes":page-size="page.limit"layout="total, sizes, prev, pager, next, jumper":total="total"ref="pagination"></el-pagination></div></div>
</template><script>
export default {data(){let formInline = {};for (const obj of this.formItemList) {formInline[obj.param] = obj.defaultSelect || "";}return{formInline,loading:false,headerCellStyle:{background:'#4d5564',textAlign:'center',flexWrap:'wrap',color:'#fff',fontWeight:'600'},pageSizes: [10, 20, 50, 100],page: {page: 1,limit: 10,},}},props:{dataList:{type:Array,},columnList:{type:Array,},btnText:{type:String,default:'增加'},btnIcon:{type:String,default:'el-icon-plus'},getHeight:{type:String,default:'730'},total: {type: Number,}, // 总条数btnType:{type:String,default:'primary'},isAddBtn:{type:Boolean,default: true},formItemList: {type: Array,default() {return [{label: "下拉框",type: "select",selectOptions: [{ text: 111, value: 111 }],param: "company",defaultSelect: "222", // 下拉框默认选中项multiple: false},{label: "输入框",type: "input",param: "name"},];}}},watch: {// emitSearch(newVal, oldVal) {//   // 是否立即触发搜索  用在弹窗中异步请求下拉框后  或者给下拉框赋值默认值后  需要用到这个方法//   if (newVal) {//     console.log("此时触发--立即执行搜索");//     this.$emit("search", this.formInline);//   }// },formItemList: {handler(newVal, oldVal) {for (const obj of this.formItemList) {if (obj.defaultSelect) {this.formInline[obj.param] = obj.defaultSelect;}}},deep: true},total(newdata, olddata) {if (newdata != olddata) {this.$refs.pagination.internalCurrentPage = 1;this.page.limit = 10;}},},methods:{btnEvent(){this.$emit('btnEvent', );},// 每页条数变更handleSizeChange(val) {this.page.limit = val;this.page.page = 1;this.$emit("pageChange", this.page);},// 当前页码变更handleCurrentChange(val) {this.page.page = val;//  this.$refs.pagination.internalCurrentPage = 1;this.$emit("pageChange", this.page);},onSubmit() {this.$emit("search", this.formInline);},resetForm(formName) {this.$refs[formName].resetFields();let formInline = {};for (const obj of this.formItemList) {// formInline[obj.param] = obj.defaultSelect || "";  // 重置时下拉框的默认值如果要保留就选用这个formInline[obj.param] = ""; // 所有筛选条件清空}this.formInline = formInline;this.$emit("search", this.formInline);}}
}
</script><style>
.headerBox{display: flex;justify-content: flex-end;align-items: center;margin-bottom: 10px;
}
.tabListPage{display: flex;justify-content: flex-end;align-items: center;margin-top: 10px;
}
</style>