x-data-grid/docs/js/index.f3c7a8e5.js

Vue表格组件,支持搜索、排序、分页、固定列、调整列宽

(function(e){function t(t){for(var i,a,s=t[0],l=t[1],c=t[2],d=0,p=[];d<s.length;d++)a=s[d],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(i in l)Object.prototype.hasOwnProperty.call(l,i)&&(e[i]=l[i]);u&&u(t);while(p.length)p.shift()();return r.push.apply(r,c||[]),n()}function n(){for(var e,t=0;t<r.length;t++){for(var n=r[t],i=!0,s=1;s<n.length;s++){var l=n[s];0!==o[l]&&(i=!1)}i&&(r.splice(t--,1),e=a(a.s=n[0]))}return e}var i={},o={index:0},r=[];function a(t){if(i[t])return i[t].exports;var n=i[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=e,a.c=i,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)a.d(n,i,function(t){return e[t]}.bind(null,i));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/x-data-grid/";var s=window["webpackJsonp"]=window["webpackJsonp"]||[],l=s.push.bind(s);s.push=t,s=s.slice();for(var c=0;c<s.length;c++)t(s[c]);var u=l;r.push([0,"chunk-vendors"]),n()})({0:function(e,t,n){e.exports=n("a1ec")},"883e":function(e,t,n){},a1ec:function(e,t,n){"use strict";n.r(t);var i=n("2b0e"),o=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{attrs:{id:"app"}},[n("x-data-grid",{ref:"grid",attrs:{height:"calc(100vh - 200px)",editable:!0,source:e.data,columns:e.columns,"page-size":50,"page-index":0},on:{selectChanged:e.showId},scopedSlots:e._u([{key:"operation",fn:function(t,i){return[n("button",{on:{click:function(t){return e.deleteRow(i)}}},[e._v(" 删除 ")])]}},{key:"expandedRowRender",fn:function(t,i){return n("p",{},[e._v(" 展开行数据下标为: "+e._s(i)+" ")])}}])},[n("template",{slot:"_action"},[e._v(" 导出 ")])],2)],1)},r=[],a={name:"App",data(){return{columns:[{type:"_check",width:40,align:"center",fixed:"left"},{title:"名称",key:"name",type:"text",adjustable:!0,width:100,ellipsis:!0,sortable:!0,customAttrs:function(e,t,n,i){if(n>0&&i[n].name===i[n-1].name)return{rowspan:0};let o=1;const r=i[n].name;let a=n+1;while(a<i.length&&i[a].name===r)a++,o++;return{rowspan:o}}},{title:"数量",key:"num",sortable:!0,sortFn:null,adjustable:!0,filterable:!0,type:"number",align:"center"},{title:"单价",adjustable:!0,key:"unitPrice.value",filterable:!0,width:800},{title:"操作",key:"none",width:100,adjustable:!0,scopedSlots:"operation"}],data:[]}},created(){const e=[];for(let n=0;n<20;n++)e.push({name:"真果切换绑阿萨德群无多无群定强无敌无抢班夺权我觉得千万 ",num:2*n+.2131213,unitPrice:{value:59.9},id:3*n},{name:["苏泊力锅","dadqw"],num:3*n,unitPrice:{value:0x7932b535bdf5e},id:3*n+1},{name:{name:"乐薯片"},num:4*n,unitPrice:{value:66},id:3*n+2});this.data=e;const t=this;setTimeout(()=>{t.data[0]._checked=!0,t.data.push()},5e3)},methods:{showId(e){},deleteRow(e){},slice10(){this.$refs.grid.filterData(e=>e.slice(0,10))}}},s=a,l=(n("dfa1"),n("2877")),c=Object(l["a"])(s,o,r,!1,null,null,null),u=c.exports,d=(n("13d5"),n("1276"),n("ac1f"),n("fb6a"),n("a9e3"),n("159b"),n("c7cd"),n("caad"),n("2532"),n("d3b7"),n("25f0"),n("ca21"),n("e260"),n("ddb0"),n("99af"),n("498a"),n("d81d"),n("841c"),n("4de4"),n("5530")),p=n("b85c"),h=n("6062"),f=n("b012"),y=n("6612"),g=n.n(y),x=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("svg",{attrs:{viewBox:"0 0 120 30",xmlns:"http://www.w3.org/2000/svg",fill:e.color,width:e.width,height:e.height}},[n("circle",{attrs:{cx:"15",cy:"15",r:"15"}},[n("animate",{attrs:{attributeName:"r",from:"15",to:"15",begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}}),n("animate",{attrs:{attributeName:"fill-opacity",from:"1",to:"1",begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"}})]),n("circle",{attrs:{cx:"60",cy:"15",r:"9","fill-opacity":"0.3"}},[n("animate",{attrs:{attributeName:"r",from:"9",to:"9",begin:"0s",dur:"0.8s",values:"9;15;9",calcMode:"linear",repeatCount:"indefinite"}}),n("animate",{attrs:{attributeName:"fill-opacity",from:"0.5",to:"0.5",begin:"0s",dur:"0.8s",values:".5;1;.5",calcMode:"linear",repeatCount:"indefinite"}})]),n("circle",{attrs:{cx:"105",cy:"15",r:"15"}},[n("animate",{attrs:{attributeName:"r",from:"15",to:"15",begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}}),n("animate",{attrs:{attributeName:"fill-opacity",from:"1",to:"1",begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"}})])])},m=[],b={name:"Dots",props:{color:{type:String,default:"#000"},height:{type:Number,default:240},width:{type:Number,default:60}}},v=b,w=Object(l["a"])(v,x,m,!1,null,null,null),k=w.exports,S=function(e,t){return e<t?-1:e>t?1:0};function _(e,t){return e?e[t]:null}function C(e,t){return t in e||(e[t]={}),e[t]}var A=function(e,t){return t?t.split(".").reduce(_,e):e},T=function(e,t,n){var i=t.split(".");if(i.length>1){var o=i.slice(0,-1).reduce(C,e);o[i[i.length-1]]=n}else e[t]=n},K="0,0[.]00",j={name:"x-data-grid",props:{columns:{type:Array,default:function(){return[]}},source:{type:Array,default:function(){return[]}},pageSize:{type:Number,default:0},editable:{type:Boolean,default:!1},height:{type:String,default:""},rowKey:{type:String,default:"_index"},hiddenSearch:{type:Boolean,default:!1},hiddenFooter:{type:Boolean,default:!1},noDataText:{type:String,default:"没有数据"},overwriteSearch:{type:Boolean,default:!1},hiddenInfo:{type:Boolean,default:!1},clickExpand:{type:Boolean,default:!1},enableExpand:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},enableActiveRow:{type:Boolean,default:!0},zebra:{type:Boolean,default:!0}},data:function(){return{pageX:0,inResize:!1,colWidth:0,col:null,nextCol:null,nextColWidth:0,editCell:[1,1],pageIndex:0,options:{useExtendedSearch:!0,keys:["."],prefix:"'"},filterSource:[],activeRowKey:-1,sortFn:S,sortType:"normal",sortKey:null,searchSchema:"",checkedKeys:[]}},computed:{fuse:function(){return new h["a"](this.sourceLocal,this.options)}},render:function(e){var t=this,n=[],i=[],o=[],r=0,a=0,s=0;this.columns.forEach((function(e){"right"===e.fixed&&(r+=e.width)})),s=r,this.columns.forEach((function(o,r){"_check"===o.type?i.push(e("col",{style:{width:(o.width||20)+"px"}})):o.width?i.push(e("col",{style:{width:o.width+"px"}})):o.minWidth?i.push(e("col",{style:{width:o.minWidth+"px"}})):i.push(e("col"));var c=[o.title];"_check"===o.type?c=[e("input",{attrs:{type:"checkbox",checked:!1},on:{change:function(e){var n,i=e.target.checked,o=[],r=Object(p["a"])(l);try{for(r.s();!(n=r.n()).done;){var a=n.value;t.$set(a,"_checked",i),i&&o.push(a[t.rowKey])}}catch(s){r.e(s)}finally{r.f()}t.checkedKeys=o,t.filterSource.push(),t.$emit("selectChanged",o)}}})]:o.sortable&&("asc"===o._sortType?c[0]+="↑":"desc"===o._sortType?c[0]+="↓":c[0]+="↑↓");var u={};o.sortable&&(u.click=function(e){if("normal"===o._sortType?t.sortType="asc":"asc"===o._sortType?t.sortType="desc":t.sortType="normal",t.sortFn=o.sortFn||S,t.sortKey=o.key,t.columns.forEach((function(e,n){e._sortType=n===r?t.sortType:"normal"})),"normal"!==t.sortType){var n="asc"===t.sortType?1:-1;t.filterSource.sort((function(e,i){return t.sortFn(e[t.sortKey],i[t.sortKey])*n}))}else t.filterSource.sort((function(e,t){return S(e._index,t._index)}));t.columns.push()}),"left"===o.fixed?(n.push(e("th",{style:{userSelect:"none",position:"sticky",left:a+"px",textAlign:o.align||"left",zIndex:10},on:u},c)),a+=o.width):"right"===o.fixed?(s-=o.width,n.push(e("th",{style:{userSelect:"none",position:"sticky",right:s+"px",borderLeft:"1px solid #D8DADC",textAlign:o.align||"left",zIndex:10},on:u},c))):o.adjustable?n.push(e("th",{style:{userSelect:"none",textAlign:o.align||"left"},on:u},[e("span",{style:{display:"inline-block",width:"100%",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},c),e("div",{style:{top:0,right:r===t.columns.length-1?0:"-4px",width:r===t.columns.length-1?"4px":"8px",position:"absolute",cursor:"col-resize",height:"100%",touchAction:"none"},on:{mousedown:function(e){e.stopPropagation(),t.pageX=e.pageX;var n=e.target.parentElement,i=n.nextElementSibling;t.colWidth=n.offsetWidth,t.inResize=!0,t.col=o,t.nextCol=t.columns[r+1],i&&(t.nextColWidth=i.offsetWidth)},click:function(e){e.stopPropagation()}}})])):n.push(e("th",{style:{userSelect:"none",textAlign:o.align||"left"},on:u},c))}));var l=this.filterSource;this.loading?o.push(e("tr",[e("td",{attrs:{colspan:this.columns.length},style:{textAlign:"center",lineHeight:"100px",borderBottom:0,borderRight:0,opacity:.8,letterSpacing:"5px",background:"transparent"}},[e(k)])])):(this.pageSize>0&&(l=l.slice(this.pageSize*this.pageIndex,this.pageSize*this.pageIndex+this.pageSize)),l.forEach((function(n,i){var c=[];a=0,s=r,t.columns.forEach((function(o){var r=o.ellipsis?{textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}:{},u=A(n,o.key),h=u,f={};if(o.customAttrs){if(f=o.customAttrs(h,n,i,l),0===f.rowspan)return;if(0===f.colspan)return}"number"===o.type?u=g()(u).format(o.format):"text"===o.type&&u instanceof Object&&(u=JSON.stringify(u));var y=t.editable;"_check"===o.type?u=[e("input",{attrs:{type:"checkbox"},domProps:{checked:n._checked},on:{change:function(e){var i=e.target.checked;t.$set(n,"_checked",i);var o,r=[],a=Object(p["a"])(l);try{for(a.s();!(o=a.n()).done;){var s=o.value;s._checked&&r.push(s[t.rowKey])}}catch(c){a.e(c)}finally{a.f()}t.checkedKeys=r,t.$emit("selectChanged",r)},click:function(e){e.stopPropagation()}}})]:o.scopedSlots&&(y=!1,u=t.$scopedSlots[o.scopedSlots](h,n,n._index)),"left"===o.fixed?(r.position="sticky",r.left=a+"px",r.zIndex=9,a+=o.width):"right"===o.fixed&&(s-=o.width,r.position="sticky",r.right=s+"px",r.zIndex=9,r.borderLeft="1px solid #D8DADC"),!0===o.editable?y=!0:!1===o.editable&&(y=!1),y?t.editCell[0]===n._index&&t.editCell[1]===o.key?c.push(e("td",{attrs:f,style:{padding:0}},[e("input",{style:{width:"100%",margin:0,padding:"5px 0px",border:"none",outlineStyle:"none",fontSize:"16px"},attrs:{value:A(n,o.key)},ref:"editCell",on:{blur:function(){t.$set(t,"editCell",[-1,-1])},keyup:function(e){"Enter"!==e.key&&13!==e.keyCode||(t.editCell[1].includes(".")?T(t.sourceLocal[t.editCell[0]],t.editCell[1],e.target.value):t.$set(t.sourceLocal[t.editCell[0]],t.editCell[1],e.target.value),t.$set(t,"editCell",[-1,-1]),t.$emit("editCell",n))}}})])):c.push(e("td",{attrs:f,style:Object(d["a"])({wordBreak:"break-all",textAlign:o.align||"left"},r),on:{dblclick:function(e){if("_check"===o.type)return!1;t.editCell=[n._index,o.key],setTimeout((function(){t.$refs.editCell.focus(),t.$refs.editCell.selectionStart=t.$refs.editCell.selectionEnd=A(n,o.key).toString().length}),200)}}},u)):c.push(e("td",{attrs:f,style:Object(d["a"])({wordBreak:"break-all",textAlign:o.align||"left"},r)},u))})),o.push(e("tr",{class:{"zebra-pattern":i%2===1&&t.zebra,active:n[t.rowKey]===t.activeRowKey&&t.enableActiveRow},on:{click:function(){t.clickExpand&&(t.$set(n,"_expanded",!n._expanded),t.filterSource.push()),t.activeRowKey!==n[t.rowKey]&&(t.activeRowKey=n[t.rowKey],t.$emit("activeRowChanged",n))}}},c)),t.enableExpand&&n._expanded&&o.push(e("tr",[e("td",{attrs:{colspan:t.columns.length}},t.$scopedSlots.expandedRowRender(n,i))]))})),0===l.length&&o.push(e("tr",[e("td",{attrs:{colspan:this.columns.length},style:{textAlign:"center",lineHeight:"100px",borderBottom:0,borderRight:0,fontSize:"20px",opacity:.8,letterSpacing:"5px",background:"transparent"}},this.noDataText)])));var c=[];if(this.pageSize>0){var u=Math.ceil(this.filterSource.length/this.pageSize);c.push(e("span",{style:{marginRight:"5px"}},"跳转到")),c.push(e("input",{class:"x-page-number",attrs:{type:"number",min:1,max:u},domProps:{value:t.pageIndex+1},style:{width:8*Math.floor(Math.log10(u))+30+"px",outlineStyle:"none",border:"1px solid #ccc",fontSize:"15px",height:"20px"},on:{change:function(e){var n=parseInt(e.target.value);t.pageIndex=n<1?0:n>u?u-1:n-1}}})),c.push(e("span",{style:{margin:"0 5px"}},"页")),c.push(e("button",{class:"x-nav-bt",domProps:{disabled:0===t.pageIndex},on:{click:function(e){t.pageIndex-=1}}},"<")),c.push(e("span",{style:{color:"#708DF4"}},this.pageIndex+1+"/"+u)),c.push(e("button",{class:"x-nav-bt",domProps:{disabled:t.pageIndex===u-1},on:{click:function(e){t.pageIndex+=1}}},">"))}var h,y=e("span",{style:{float:"right"}},c),x=[],m=[],b=Object(p["a"])(this.columns);try{for(b.s();!(h=b.n()).done;){var v=h.value;v.filterable&&(x.push(e("option",{attrs:{value:v.key}},v.title)),m.push(v.key))}}catch(z){b.e(z)}finally{b.f()}var w=null;if(!this.hiddenInfo){var _="共".concat(this.sourceLocal.length,"条数据");x.length>0&&this.filterSource.length!==this.sourceLocal.length&&(_+="，筛选结果".concat(this.filterSource.length,"条")),this.checkedKeys.length>0&&(_+="，已选".concat(this.checkedKeys.length,"条")),w=e("span",_)}var C=e("div",{style:{textAlign:"left",background:"#F8F8F9",padding:"10px 10px",fontSize:"14px",minHeight:"20px",borderTop:"1px solid #D8DADC"}},[w,y]),K=[];this.overwriteSearch?K.push(e("span",this.$slots._search)):x.length>0&&(1===x.length?(K.push(x[0].children[0].text+" /"),t.options.keys=m[0]):K.push(e("select",{style:{backgroundColor:"#FAFAFA",border:"1px solid #d9d9d9",borderRadius:"4px 0 0 4px",margin:"0",padding:"0px 8px",appearance:"none"},on:{change:function(e){t.options.keys=[e.target.value]}}},[e("option",{attrs:{value:"."}},"任意字段")].concat(x))),K.push(e("select",{style:{backgroundColor:"#FAFAFA",border:"1px solid #d9d9d9",margin:"0 -1px",padding:"0px 8px",appearance:"none"},on:{change:function(e){t.options.prefix=e.target.value}}},[e("option",{attrs:{value:"'"}},"包含"),e("option",{attrs:{value:"!"}},"不包含"),e("option",{attrs:{value:"^"}},"开头为"),e("option",{attrs:{value:"="}},"等于")])),K.push(e("input",{domProps:{value:t.searchSchema},style:{backgroundColor:"white",border:"1px solid #d9d9d9",borderRadius:"0 4px 4px 0",margin:"0",height:"24px",lineHeight:"24px"},on:{input:Object(f["debounce"])((function(e){t.options.keys.includes(".")&&(t.options.keys=m);var n=e.target.value.trim();t.searchSchema=n,0===n.length?t.filterSource=t.sourceLocal:t.filterSource=t.fuse.search(t.options.prefix+n).map((function(e){return e.item})),t.pageIndex=0}),300),keyup:function(e){if("Enter"===e.key||13===e.keyCode){t.options.keys.includes(".")&&(t.options.keys=m);var n=e.target.value.trim();t.searchSchema=n,0===n.length?t.filterSource=t.sourceLocal:t.filterSource=t.fuse.search(t.options.prefix+n).map((function(e){return e.item})),t.pageIndex=0}}}}))),K.push(e("div",{style:{margin:"0 auto"}})),K.push(e("span",{},t.$slots._action));var j=this.hiddenSearch?[]:[e("div",{class:"x-table-title",style:{textAlign:"left",display:"flex"}},K)];return j.push(e("div",{style:{width:"100%",height:this.height,padding:"0 0 0 0",overflowY:"auto",overflowX:"auto"}},[e("table",{style:{margin:0,width:"100%"}},[e("colgroup",i),e("thead",[e("tr",n)]),e("tbody",o)])])),this.hiddenFooter||j.push(C),e("div",{class:"x-data-grid"},j)},watch:{source:function(){var e=this.checkedKeys,t=this.rowKey;if(this.sourceLocal=this.source.map((function(n,i){return n._index=i,n._expanded=n._expanded||!1,void 0===n._checked&&(n._checked=e.includes(n[t])),n})),this.checkedKeys=this.sourceLocal.filter((function(e){return e._checked})).map((function(e){return e[t]})),""===this.searchSchema.trim()?this.filterSource=this.sourceLocal:this.filterSource=this.fuse.search(this.options.prefix+this.searchSchema).map((function(e){return e.item})),"normal"!==this.sortType){var n="asc"===this.sortType?1:-1,i=this;this.filterSource.sort((function(e,t){return i.sortFn(e[i.sortKey],t[i.sortKey])*n}))}}},created:function(){var e=this;if(this.columns.map((function(t,n){return t._sortType=t._sortType||"normal",t._index=n,"number"!==t.type||t.format||(t.format=K),"normal"!==t._sortType&&(e.sortFn=t.sortFn||S,e.sortKey=t.key,e.sortType=t._sortType),t})),this.sourceLocal=this.source.map((function(e,t){return e._index=t,e._expanded=e._expanded||!1,e._checked=e._checked||!1,e})),this.filterSource=this.sourceLocal,"normal"!==this.sortType){var t="asc"===this.sortType?1:-1;this.filterSource.sort((function(n,i){return e.sortFn(n[e.sortKey],i[e.sortKey])*t}))}document.addEventListener("mousemove",(function(t){if(e.inResize){var n=t.pageX-e.pageX;e.$set(e.col,"width",Math.max(e.col.minWidth||10,e.colWidth+n)),e.nextCol&&!e.nextCol.fixed&&e.$set(e.nextCol,"width",Math.max(e.nextCol.minWidth||10,e.nextColWidth-n))}})),document.addEventListener("mouseup",(function(t){e.inResize=!1,e.pageX=void 0})),this.filterData=Object(f["debounce"])(this.filterData,300)},methods:{filterData:function(e){"function"===typeof e&&(this.filterSource=e(this.sourceLocal))}}};n("883e");i["a"].component("x-data-grid",j),new i["a"]({render:e=>e(u)}).$mount("#app")},dfa1:function(e,t,n){"use strict";n("f489")},f489:function(e,t,n){}});
//# sourceMappingURL=index.f3c7a8e5.js.map