网站建设前期策划,网站搭建技术有哪些,wordpress改网址,鄂州市住房和城乡建设部网站!--dataList: 表格数据columnList: 表头字段 宽度minWidth使用slotName字段: 需要对列数据进行处理#xff0c;不写prop字段#xff0c;使用slotName字段btnTextString: 按钮字段btnIconString: 按钮的iconbtnEvent: 按钮事件btnType: 按钮类型getHeigh…!--dataList: 表格数据columnList: 表头字段 宽度minWidth使用slotName字段: 需要对列数据进行处理不写prop字段使用slotName字段btnTextString: 按钮字段btnIconString: 按钮的iconbtnEvent: 按钮事件btnType: 按钮类型getHeightString: 表格高度pagination: 分页回调方法formItemList: 查询条件List -----label字段名 type类型(select、input、daterange、cascader)select(selectOptions下拉框数据、defaultSelect下拉框默认选中数据)cascader(options级联选择框数据) param(用来接收查询参数)search: 查询事件isAddBtn: 是否显示添加按钮
--
templatediv classapp-containerel-form:inlinetruerefruleForm:modelformInlineclassdemo-form-inlineel-form-itemv-for(item, index) in formItemList:keyindex:labelitem.label!-- 下拉选择框 --el-selectv-ifitem.type selectv-modelformInline[item.param]:multipleitem.multipleplaceholder请选择sizeminiclearableel-optionv-for(item2, index2) in item.selectOptions:keyindex2:labelitem2.dictLabel:valueitem2.dictValue/el-option/el-select!-- 下拉选择框end --!-- 输入框 --el-inputv-ifitem.type inputv-modelformInline[item.param]sizeminiplaceholder请输入clearable/el-input!-- 输入框 --!-- 日期范围选择框 --el-date-pickerv-ifitem.type daterange ||item.type datetimerange ||item.type date ||item.type datetimev-modelformInline[item.param]:value-formatitem.valueFormat || yyyy-MM-dd hh:mm:ss:formatitem.format || yyyy-MM-dd hh:mm:ssclearable:typeitem.type || :range-separatoritem.rangeSeparator || 至:start-placeholderitem.startPlaceholder:end-placeholderitem.endPlaceholderplaceholder请选择sizemini/el-date-picker!-- 日期范围选择框end --!-- 级联选择器 --el-cascaderv-ifitem.type cascaderv-modelformInline[item.param]sizemini:optionsitem.options:propsitem.propsclearable/el-cascader!-- 级联选择器end --/el-form-itemslot nameformItem/slotel-form-item stylewidth:10remel-button typeprimary sizemini clickonSubmit查询/el-buttonel-button type sizemini clickresetForm(ruleForm)重置/el-button/el-form-item!-- 可用于显示其他按钮 --el-form-item stylewidth:10rem v-ifisAddBtnel-button :typebtnType :iconbtnIcon clickbtnEvent{{ btnText }}/el-button/el-form-item/el-formel-tablereftablev-loadingloading:datadataList:heightgetHeightstripe:header-cell-styleheaderCellStyleel-table-column label序号 aligncenter width50 typeindex /el-table-columnv-for(item, index) in columnListreftable:labelitem.label:keyindex:propitem.prop:fixeditem.fixed:min-widthitem.minWidthaligncentertemplate slot-scopescopeslot v-ifitem.slotName :nameitem.slotName :rowscope.row/slotdiv v-else{{scope.row[item.prop]}}/div/template/el-table-column/el-tablediv classtabListPageel-paginationsmallclasstext-centersize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagepage.page:page-sizespageSizes:page-sizepage.limitlayouttotal, sizes, prev, pager, next, jumper:totaltotalrefpagination/el-pagination/div/div
/templatescript
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);}}
}
/scriptstyle
.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
