The table component and the paging component come from iview, where I have once again encapsulated according to the company business, using slots for content distribution, you can place input input boxes and button buttons at will, and then use props to pass parameters to subcomponents. Use the emit property to pass events to the parent component, as follows
Sub-component<template><div style= "" ><div class= "Search-bar run-search-bar" style= "Background:none;" ><div><!--align= "right" style= "margin:5px"--><slot name= "Handle-bar" ></slot></div ><div><slot name= "Search-bar" ></slot></div></div><div class= " Single-table-con "><div class=" Table-bar "><slot name=" Table-bar "></slot></div>< Table size= "small" ref= "table": loading= "Loading" @on-current-change= "Oncurrentchange": highlight-row= "Highlightrow ":d ata=" tabledata ": columns=" Tablecolumns "@on-selection-change=" SelectionChange "@on-sort-change=" SortHandle "@ on-row-click= "Rowclickhandle" Stripe></table><div style= "Margin:10px;overflow:hidden" v-if= "IsPage" ><div style= "float:right;" ><page:p lacement= "placement": Total= "Total": show-total= "showtotal":p age-size-opts= "pagesizeopts": Show-sizer= "Showsizer":p age-size= "param.page.pageSize": current= "Param.page.currentPage" @on-changE= "Changepage" size= "small" @on-page-size-change= "Changepagesize" ></page></div></div></ Div></div></template><script>export Default {name: "Easyvuetable", components: {},props: { Resource: {Type:array,default () {return [];}},usecatch: {Type:boolean,default ()} {return False;}},catchparams: {type: Object,default () {return {};}},highlightrow: {Type:boolean,default () {return false;}},action: {Type:string,default () {return "";}},params: {Type:object,default () {return {};}},server: {Type:object,default () {return {};}},columns}: {type : Array,default () {return [];}},COLUMNSFN: {type:function},initparam: {Type:object,default () {return {};}}, Loadcallback: {Type:function,default () {return Function (data) {};}},autofirst: {Type:boolean,default () {return true;}} , PageSize: {Type:number,default () {return 10;}},showtotal: {Type:boolean,default () {return True;}},showsizer: {type: Boolean,default () {return true;}},pagesizeopts: {Type:array,default () {REturn [Ten, +, 100];}},ispage: {Type:boolean,default () {return True;}},onselectionchange: {type:function}, Rowclickhandle: {type:function}},data () {return {tabledata: [],tablecolumns: [],total:0,currentpage:1,selection: [], Loading:false,param: {page: {currentpage:1,//pagenum:0,pagesize:this.pagesize},params:this.params,sortdto: { FieldName: "", by-and-by: ""}},messagejob:undefined,isselectionchange:false,currentrow:undefined};},computed: { Placement () {Let pagetotal = 0;if (this.total% this.pagesize = 0) {pagetotal = This.total/this.pagesize;} else {PageTo Tal = This.total/this.pagesize + 1;} Pagetotal = parseint (pagetotal); return this.total% this.pagesize < 3 && this.currentpage = pagetotal? "Bottom": "Top";},lang () {return $store. State.lang;}},created:function () {if (!! This.action && This.autofirst) {this.load (this.initparam);} else if (!this.action) {this.loadlocal ();} For (let C of This.columns) {if (!~ "Selection". IndexOf (C.type)) {c.ellipsis = tRue;}} This.getcolumns ();},beforemount:function () {},mounted:function () {},beforedestroy:function () {},destroyed: function () {},methods: {oncurrentchange (CurrentRow, oldcurrentrow) {This.currentrow = Object.assign ({}, CurrentRow);} , Gethighlightrow () {return this.currentrow;},getcolumns () {if (typeof THIS.COLUMNSFN = = "function") {This.tablecolumns = [].concat (THIS.COLUMNSFN ());} else {this.tablecolumns = [].concat (this.columns);}},refresh () {this.param.page.currentPage = 1;this. $nextTick (() = > {this.load ();});},load (param = {}, page) {this.selection = [];for (let P in param) {this.param.params[p] = param[p];} this.loading = True;if (!! Page && typeof page = = "number") {this.param.page.currentPage = page;} This.param.page.recordCount = this.total;!! This.action? This.loadajax (): This.loadlocal ();},loadlocal () {this.loadcallback (This.resource); if (!this.ispage) {this.$ Nexttick (() = {This.tabledata = [].concat (this.resource); this.loading = false;}); return;} This.total = This. Resource.length;let start = (this.param.page.currentpage-1) * This.param.page.pagesize;let end = start + This.param.pag E.pagesize;end = this.resource.length > End? End:this.resource.length;this.tabledata = [];for (Let i = start; i < end; i++) {This.tableData.push (This.resource[i]) ;} this. $nextTick (() = {this.loading = false;});},loadajax () {if (This.server[this.action]) {this.server[this.action ] (This.param). Then (res-= {this.loading = false;if (!res) return;this.currentpage = Res.data.pagenum;this.total = Res.data.total;this.tabledata = [];let _list = [];this.loadcallback (res.data.list); for (let item of res.data.list) {This . Tabledata.push (item);}});} else {$store. Dispatch (This.action, This.param). Then (res = = {this.loading = false;if (!res) Return;this.currentpage = Res.data.pagenum;this.total = Res.data.total;this.tabledata = [];let _list = [];this.loadcallback]; for ( Let item of Res.data.list) {This.tableData.push (item);}});}},changepage (page) {THIS.PAram.page.currentPage = Page;this.load ();},changepagesize (page) {this.param.page.pageSize = Page;this.load ();}, SelectionChange (selection) {This.isselectionchange = True;this.selection = Selection;if (typeof This.onselectionchange = = "function") {This.onselectionchange (selection);} this. $emit ("On-selection-change", selection);},getselectioned () {return this.isselectionchange? This.selection: Undefined;},sorthandle (obj) {this.param.sortDTO.fieldName = Obj.key;this.param.sortdto.orderby = Obj.order;if ( This.param.sortDTO.orderBy = = "normal") {This.param.sortDTO = {fieldName: "", By: "};} This.refresh ();},getsortdata () {return this.param.sortdto;},gettableobj () {return this. $refs ["Table"];}},watch: { Lang () {this.getcolumns ();},
Resource (newval, oldval) {this.resource = newval;}}, directives: {}};</script><style lang= "less" scoped>
</style> Use the following: (If in doubt, contact the blogger at any time) parent component <template><div class= "Run-mod-box" ><easyvuetable: params= "Searchform" ref= "bankinfotable": server= "Server" action= "querybanks": columns= "columns": initparams= " Searchform ": highlight-row=" true "@on-selection-change=" Onselectionchange "><form:model=" SearchForm "ref=" Searchform "slot=" Search-bar "label-position=" Top "class=" Ivu-form-no-margin-bottom "Inline><form-item prop=" VendorName "label=" supplier name "><input type=" text "v-model=" Searchform.vendorname "size=" small "></Input> </form-item><form-item prop= "Bankname" label= "opening bank" ><input type= "text" v-model= "SearchForm.bankName" Size= "small" ></input></form-item></form><div slot= "Handle-bar" ><Button size= "small "@click. Native=" Search "type=" warning "icon=" search "> </button><button size=" Small "@click. native=" Reset "type=" info "icon=" Loop > Reset </button></div></easyvuetable></div></template>
Vue.js Table Component Encapsulation
