trends-table-vue3
Version:
动态表格
2 lines (1 loc) • 9.75 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).index=t(e.Vue)}(this,(function(e){"use strict";var t=document.createElement("style");t.textContent=".comTable[data-v-fa2655ba]{width:100%;--el-table-header-bg-color: #F0F0F0}.comTable[data-v-fa2655ba]{font-size:var(--fontSize);color:var(--bodyColor)}.comTable[data-v-fa2655ba] thead{color:var(--headerColor)}.comTable[data-v-fa2655ba] th.el-table__cell{background-color:var(--headerBgColor)!important}.comTable .el-button+.el-button[data-v-fa2655ba]{margin-left:0}.comTable .el-button--small[data-v-fa2655ba]{padding:5px 6px}.trendsTable[data-v-fa2655ba]{height:100%}.trendsTable .tools[data-v-fa2655ba]{display:flex;align-items:center;justify-content:flex-end}.trendsTable .tools .one[data-v-fa2655ba]{cursor:pointer;margin-right:10px}.trendsTable .tools .one[data-v-fa2655ba]:last-child{margin-right:0}\n",document.head.appendChild(t);const l={s2ab:function(e){for(var t=new ArrayBuffer(e.length),l=new Uint8Array(t),o=0;o!=e.length;++o)l[o]=255&e.charCodeAt(o);return t},xlsxStyle:function(e){let t=e.Sheets.Sheet1;for(let l in t){t["!cols"].wpx=["14",100,"200",200];"1"===l.slice(1,l.length)&&"z"!==t[l].t?t[l].s={font:{name:"宋体",sz:"11",color:{rgb:""},bgColor:{rgb:"e7e2e200"},bold:!0},alignment:{wrapText:1,horizontal:"center",vertical:"center",indent:0}}:"!rows"!==l&&"!cols"!==l&&"!ref"!==l&&"!fullref"!==l&&"z"!==t[l].t&&(t[l].s={font:{name:"宋体",sz:"10",color:{rgb:""}},alignment:{wrapText:1,horizontal:"center",vertical:"center",indent:0}})}}},o={name:"TrendsTable",props:{data:Array,header:Array,pageOpts:{type:Object,default:()=>({pageNum:1,pageSize:10})},fieldList:{type:Array,default:()=>[]},headerOpts:{type:Object,default:()=>({name:"name",nameTag:"-",prop:"value"})},rowColumnMerge:{type:Function,default:()=>{}},emptyText:{type:String,default:"暂无数据"},columnType:{type:String,default:void 0},selectionChange:{type:Function,default:()=>{}},selectable:{type:Function,default:()=>!0},maxHeight:{type:[Number,String],default:"auto"},fontSize:{type:Number,default:12},headerColor:{type:String,default:"#909399"},headerBgColor:{type:String,default:"#f5f7fa"},bodyColor:{type:String,default:"#606266"},tooltip:{type:Boolean,default:!1},fixedAndColumnw:{type:Object,default:()=>({})},tools:{type:Object,default:()=>({plugin:{saveAs:null,write:null,utils:null},header:!1,excel:!1,excelFileName:"表格Excel文件"})}},data(){return{useData:this.data,useHeader:this.header,userTools:this.tools,loading:!1,loadingText:"",trendsTableH:0}},watch:{header:{handler(e){this.initHeader()},deep:!0,immediate:!0},data:{handler(e){this.initData()},deep:!0,immediate:!0}},mounted(){this.init()},methods:{init(){this.$nextTick((()=>{this.trendsTableH=this.$refs.trendsTable.offsetHeight}));let e={plugin:{saveAs:null,write:null,utils:null},header:!1,excel:!1,excelFileName:"表格Excel文件"};for(let t in this.tools)void 0!==e[t]&&(e[t]=this.tools[t]);this.userTools=e},excelDownload(e){null!==this.userTools.plugin.saveAs&&null!==this.userTools.plugin.write&&null!==this.userTools.plugin.utils&&(this.loading=!0,this.loadingText="导出中,请稍后....",setTimeout((()=>{try{const o=this.$refs["report-table"].$el;let a=o.querySelector(".el-table__fixed");a||(a=o);let n=this.tools.plugin.utils.table_to_book(a,{raw:!0});l.xlsxStyle(n);var t=this.tools.plugin.write(n,{bookType:"xlsx",bookSST:!1,type:"binary"});this.tools.plugin.saveAs(new Blob([l.s2ab(t)],{type:""}),`${e}.xlsx`)}catch(o){}this.loading=!1,this.loadingText=""}),1e3))},initHeader(){if(this.header.length>0){let e={name:"name",nameTag:"-",prop:"value"};for(let l in this.headerOpts)void 0!==e[l]&&(e[l]=this.headerOpts[l]);let t=[];if(0===this.fieldList.length?t=JSON.parse(JSON.stringify(this.header)):this.fieldList.forEach((l=>{const o=this.header.length;for(let a=0;a<o;a++){const o=this.header[a];if(l===o[e.prop]){t.push(o);break}}})),this.data.length>0){let l={fixedNum:0,fixedLastNum:0,trendsWidthNum:0,trendsWidth:250,trendsWidthsFixed:[]};for(let e in this.fixedAndColumnw)void 0!==l[e]&&(l[e]=this.fixedAndColumnw[e]);this.originalTableHeader(t,this.data,e.prop,l)}t=this.tableHeaderLevel2(t,e),t.forEach(((e,t)=>{e.headerShow=!0})),this.useHeader=JSON.parse(JSON.stringify(t))}else this.useHeader=[]},initData(){this.data.length>0?this.useData=JSON.parse(JSON.stringify(this.data)):this.useData=[]},originalTableHeader(e,t,l="prop",o){const a=t.length;e.forEach(((n,i)=>{if(0!==o.trendsWidthNum&&(-1===o.trendsWidthNum||-1!==o.trendsWidthNum&&i<o.trendsWidthNum)){let e=80;for(let i=0;i<a;i++)if(n[l]&&void 0!==t[i][n[l]]&&null!==t[i][n[l]]){const a=(t[i][n[l]].toString().length+3)*this.fontSize+1;if(a>o.trendsWidth){e=o.trendsWidth;break}a>80&&a<o.trendsWidth&&e<a&&(e=a)}n.width=e}i<o.fixedNum?n.fixed="left":i>e.length-1-o.fixedLastNum?n.fixed="right":n.fixed=!1})),o.trendsWidthsFixed.length>0&&o.trendsWidthsFixed.forEach(((t,l)=>{null!==t&&(e[l].width=t)}))},tableHeaderLevel2(e,t){const l=[];return e.forEach(((e,o)=>{if(e[t.name].includes(t.nameTag)){const o=e[t.name].split(t.nameTag);if(l.length>0&&l[l.length-1].label===o[0]){let a=JSON.parse(JSON.stringify(e));a.label=o[1],a.prop=e[t.prop],l[l.length-1].fixed||!1===e.fixed||(l[l.length-1].fixed=e.fixed),l[l.length-1].children.push(a)}else{const a={children:[],label:o[0],prop:null};a.fixed||!1===e.fixed||(a.fixed=e.fixed);let n=JSON.parse(JSON.stringify(e));n.label=o[1],n.prop=e[t.prop],a.children.push(n),l.push(a)}}else{let o=JSON.parse(JSON.stringify(e));o.label=e[t.name],o.prop=e[t.prop],l.push(o)}})),l}}},a={class:"el-dropdown-link"};const n=((e,t)=>{const l=e.__vccOpts||e;for(const[o,a]of t)l[o]=a;return l})(o,[["render",function(t,l,o,n,i,r){const d=e.resolveComponent("Files"),s=e.resolveComponent("el-icon"),h=e.resolveComponent("Menu"),c=e.resolveComponent("el-checkbox"),p=e.resolveComponent("el-dropdown-item"),u=e.resolveComponent("el-dropdown-menu"),f=e.resolveComponent("el-dropdown"),m=e.resolveComponent("el-table-column"),g=e.resolveComponent("el-table"),x=e.resolveDirective("loading");return e.openBlock(),e.createElementBlock("div",{class:"trendsTable",ref:"trendsTable",style:e.normalizeStyle({height:t.maxHeight})},[e.createElementVNode("div",{class:"tools",style:e.normalizeStyle({height:t.tools.header||t.tools.excel?"30px":"auto"})},[t.userTools.excel?(e.openBlock(),e.createBlock(s,{key:0,onClick:l[0]||(l[0]=e=>t.excelDownload(t.userTools.excelFileName)),class:"one",size:"18"},{default:e.withCtx((()=>[e.createVNode(d)])),_:1})):e.createCommentVNode("",!0),t.userTools.header?(e.openBlock(),e.createBlock(f,{key:1,class:"one"},{dropdown:e.withCtx((()=>[e.createVNode(u,null,{default:e.withCtx((()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.useHeader,((t,l)=>(e.openBlock(),e.createBlock(p,{key:l},{default:e.withCtx((()=>[e.createVNode(c,{modelValue:t.headerShow,"onUpdate:modelValue":e=>t.headerShow=e,label:t.label,size:"small"},null,8,["modelValue","onUpdate:modelValue","label"])])),_:2},1024)))),128))])),_:1})])),default:e.withCtx((()=>[e.createElementVNode("span",a,[e.createVNode(s,{size:"18"},{default:e.withCtx((()=>[e.createVNode(h)])),_:1})])])),_:1})):e.createCommentVNode("",!0)],4),e.withDirectives((e.openBlock(),e.createBlock(g,{ref:"report-table",style:e.normalizeStyle({"--fontSize":t.fontSize+"px","--headerColor":t.headerColor,"--bodyColor":t.bodyColor,"--headerBgColor":t.headerBgColor}),"element-loading-text":t.loadingText,class:"comTable",data:t.useData,"max-height":"auto"===t.maxHeight?t.maxHeight:t.tools.header||t.tools.excel?t.trendsTableH-30+"px":`${t.trendsTableH}px`,"span-method":t.rowColumnMerge,"empty-text":t.emptyText,onSelectionChange:t.selectionChange,border:""},{default:e.withCtx((()=>["index"===t.columnType?(e.openBlock(),e.createBlock(m,{key:0,type:"index",label:"序号",fixed:"",align:"center","min-width":"50"},{default:e.withCtx((l=>[e.createElementVNode("span",null,e.toDisplayString((t.pageOpts.pageNum-1)*t.pageOpts.pageSize+l.$index+1),1)])),_:1})):e.createCommentVNode("",!0),"selection"===t.columnType?(e.openBlock(),e.createBlock(m,{key:1,type:"selection",fixed:"",align:"center",selectable:t.selectable},null,8,["selectable"])):e.createCommentVNode("",!0),"expand"===t.columnType?(e.openBlock(),e.createBlock(m,{key:2,type:"expand",label:"展开",fixed:"",align:"center","min-width":"50"},{default:e.withCtx((l=>[e.renderSlot(t.$slots,"columnTypeExpand",{row:l.row},void 0,!0)])),_:3})):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.useHeader,((l,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:o},[l.headerShow?(e.openBlock(),e.createBlock(m,{key:0,label:l.label,prop:l.prop,fixed:l.fixed,"min-width":l.width,"show-overflow-tooltip":t.tooltip,sortable:l.sortable,align:"center"},{default:e.withCtx((()=>[l.children?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(l.children,((l,o)=>(e.openBlock(),e.createBlock(m,{key:o,label:l.label,prop:l.prop,fixed:l.fixed,"min-width":l.width,"show-overflow-tooltip":t.tooltip,align:"center"},null,8,["label","prop","fixed","min-width","show-overflow-tooltip"])))),128)):e.createCommentVNode("",!0)])),_:2},1032,["label","prop","fixed","min-width","show-overflow-tooltip","sortable"])):e.createCommentVNode("",!0)],64)))),128)),e.renderSlot(t.$slots,"otherColumn",{},void 0,!0)])),_:3},8,["style","element-loading-text","data","max-height","span-method","empty-text","onSelectionChange"])),[[x,t.loading]])],4)}],["__scopeId","data-v-fa2655ba"]]),i=[n];return{install:function(e){i.map((t=>{e.component(t.name,t)}))},TrendsTable:n}}));