vc-table
Version:
table component based on vue.js & bootstrap
1 lines • 19.4 kB
JavaScript
!function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.vcTable=n():t.vcTable=n()}(this,function(){return function(t){function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var e={};return n.m=t,n.c=e,n.i=function(t){return t},n.d=function(t,n,e){Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:e})},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="/",n(n.s=43)}([function(t,n){var e=t.exports={version:"2.4.0"};"number"==typeof __e&&(__e=e)},function(t,n,e){t.exports=!e(2)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,n){t.exports=function(t){try{return!!t()}catch(n){return!0}}},function(t,n){var e=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=e)},function(t,n){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},,function(t,n){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},function(t,n){var e=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:e)(t)}},function(t,n,e){var r=e(27),o=e(6);t.exports=function(t){return r(o(t))}},function(t,n,e){e(11),t.exports=e(42),t.exports.__esModule&&(t.exports=t.exports["default"]),("function"==typeof t.exports?t.exports.options:t.exports).template=e(14)},function(t,n){function e(t,n){for(var e=0;e<t.length;e++){var r=t[e],o=p[r.id];if(o){o.refs++;for(var i=0;i<o.parts.length;i++)o.parts[i](r.parts[i]);for(;i<r.parts.length;i++)o.parts.push(c(r.parts[i],n))}else{for(var a=[],i=0;i<r.parts.length;i++)a.push(c(r.parts[i],n));p[r.id]={id:r.id,refs:1,parts:a}}}}function r(t){for(var n=[],e={},r=0;r<t.length;r++){var o=t[r],i=o[0],a=o[1],s=o[2],c=o[3],l={css:a,media:s,sourceMap:c};e[i]?e[i].parts.push(l):n.push(e[i]={id:i,parts:[l]})}return n}function o(t,n){var e=v(),r=x[x.length-1];if("top"===t.insertAt)r?r.nextSibling?e.insertBefore(n,r.nextSibling):e.appendChild(n):e.insertBefore(n,e.firstChild),x.push(n);else{if("bottom"!==t.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");e.appendChild(n)}}function i(t){t.parentNode.removeChild(t);var n=x.indexOf(t);n>=0&&x.splice(n,1)}function a(t){var n=document.createElement("style");return n.type="text/css",o(t,n),n}function s(t){var n=document.createElement("link");return n.rel="stylesheet",o(t,n),n}function c(t,n){var e,r,o;if(n.singleton){var c=y++;e=h||(h=a(n)),r=l.bind(null,e,c,!1),o=l.bind(null,e,c,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(e=s(n),r=f.bind(null,e),o=function(){i(e),e.href&&URL.revokeObjectURL(e.href)}):(e=a(n),r=u.bind(null,e),o=function(){i(e)});return r(t),function(n){if(n){if(n.css===t.css&&n.media===t.media&&n.sourceMap===t.sourceMap)return;r(t=n)}else o()}}function l(t,n,e,r){var o=e?"":r.css;if(t.styleSheet)t.styleSheet.cssText=g(n,o);else{var i=document.createTextNode(o),a=t.childNodes;a[n]&&t.removeChild(a[n]),a.length?t.insertBefore(i,a[n]):t.appendChild(i)}}function u(t,n){var e=n.css,r=n.media;if(r&&t.setAttribute("media",r),t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}function f(t,n){var e=n.css,r=n.sourceMap;r&&(e+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var o=new Blob([e],{type:"text/css"}),i=t.href;t.href=URL.createObjectURL(o),i&&URL.revokeObjectURL(i)}var p={},d=function(t){var n;return function(){return"undefined"==typeof n&&(n=t.apply(this,arguments)),n}},b=d(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),v=d(function(){return document.head||document.getElementsByTagName("head")[0]}),h=null,y=0,x=[];t.exports=function(t,n){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");n=n||{},"undefined"==typeof n.singleton&&(n.singleton=b()),"undefined"==typeof n.insertAt&&(n.insertAt="bottom");var o=r(t);return e(o,n),function(t){for(var i=[],a=0;a<o.length;a++){var s=o[a],c=p[s.id];c.refs--,i.push(c)}if(t){var l=r(t);e(l,n)}for(var a=0;a<i.length;a++){var c=i[a];if(0===c.refs){for(var u=0;u<c.parts.length;u++)c.parts[u]();delete p[c.id]}}}};var g=function(){var t=[];return function(n,e){return t[n]=e,t.filter(Boolean).join("\n")}}()},function(t,n,e){var r=e(12);"string"==typeof r&&(r=[[t.i,r,""]]);e(10)(r,{});r.locals&&(t.exports=r.locals)},function(t,n,e){n=t.exports=e(13)(),n.push([t.i,".vc-table-container {\n position: relative;\n}\n.vc-table-container .search-area,\n.vc-table-container .export-area {\n display: inline-block;\n margin-bottom: 10px;\n z-index: 2;\n position: relative;\n}\n.vc-table-container .search-area .input-box {\n display: inline-block;\n position: relative;\n}\n.vc-table-container .search-area .input-box:hover .clear-it {\n visibility: visible;\n}\n.vc-table-container .search-area .input-box .clear-it {\n visibility: hidden;\n position: absolute;\n top: 50%;\n right: 6px;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n opacity: .3;\n}\n.vc-table-container .vc-table-title {\n position: absolute;\n left: 50%;\n width: 100%;\n -webkit-transform: translate(-50%, 0);\n transform: translate(-50%, 0);\n height: 30px;\n line-height: 30px;\n padding: 0 250px;\n}\n.vc-table-container .vc-table-title.title-only {\n top: -40px;\n padding: 0;\n}\n.vc-table-container .vc-table-title.title-align-left {\n text-align: left;\n}\n.vc-table-container .vc-table-title.title-align-center {\n text-align: center;\n}\n.vc-table-container .vc-table-title.title-align-right {\n text-align: right;\n}\n.vc-table-container .vc-table-filter {\n margin-left: 5px;\n height: 30px;\n padding: 4px 8px;\n -wekit-box-shadow: none;\n box-shadow: none;\n font-size: 14px;\n line-height: 1.428571429;\n color: #555555;\n vertical-align: middle;\n background-color: #ffffff;\n background-image: none;\n border: 1px solid #cccccc;\n border-radius: 4px;\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.vc-table-container .vc-table-filter:focus {\n border-color: #46c3c1;\n box-shadow: inset 0 1px 1px rgba(102, 175, 233, 0.1), 0 0 5px rgba(102, 175, 233, 0.3);\n}\ntable.vc-table {\n border-radius: 3px;\n text-align: center;\n border: 1px solid #ddd;\n}\ntable.vc-table.title-only {\n margin-top: 40px;\n}\ntable.vc-table.vc-table-fixed {\n table-layout: fixed;\n}\ntable.vc-table th {\n cursor: pointer;\n text-align: center;\n /* override bootstrap */\n position: relative;\n border-bottom: none;\n}\ntable.vc-table th.hide {\n display: none;\n}\ntable.vc-table tr:hover {\n cursor: pointer;\n}\ntable.vc-table td {\n padding: 4px;\n position: relative;\n}\ntable.vc-table td span.top1,\ntable.vc-table td span.top2,\ntable.vc-table td span.top3 {\n background-color: #F37070;\n border-radius: 4px;\n padding: 3px 12px;\n color: #fff;\n}\ntable.vc-table td span.topN {\n /* 4位及以后 */\n background-color: #e6e2e2;\n border-radius: 4px;\n padding: 3px 12px;\n}\ntable.vc-table th.active {\n background-color: inherit;\n}\ntable.vc-table th.active .arrow {\n /* 激活的排序标志 */\n opacity: 1;\n border-bottom-color: #28d63d;\n border-top-color: #28d63d;\n}\ntable.vc-table .arrow {\n display: inline-block;\n vertical-align: middle;\n width: 0;\n height: 0;\n margin-left: 5px;\n opacity: 0.66;\n}\ntable.vc-table .arrow.asc {\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 4px solid #666;\n}\ntable.vc-table .arrow.dsc {\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-top: 4px solid #666;\n}\n/* filterBy渐隐效果 */\n.staggered-transition {\n -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);\n transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);\n overflow: hidden;\n margin: 0;\n height: 20px;\n}\n.staggered-enter,\n.staggered-leave {\n opacity: 0;\n height: 0;\n}\n/* 暂未实现 applied during enter/leave transition */\n/* .staggered-enter-active, .staggered-leave-active { */\n/* transition: opacity .5s ease; */\n/* } */\n/* v-for orderBy 自动动画 applied during moving transition */\n.staggered-move {\n -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.55, 0, 0.1, 1);\n transition: -webkit-transform 0.8s cubic-bezier(0.55, 0, 0.1, 1);\n transition: transform 0.8s cubic-bezier(0.55, 0, 0.1, 1);\n transition: transform 0.8s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.8s cubic-bezier(0.55, 0, 0.1, 1);\n}\n.vc-fade-transition {\n display: inline-block;\n}\n.vc-fade-enter {\n -webkit-animation: fadeinT .5s;\n animation: fadeinT .5s;\n}\n.vc-fade-leave {\n -webkit-animation: fadeoutT .5s;\n animation: fadeoutT .5s;\n}\n/* 淡入-从上 */\n@-webkit-keyframes fadeinT {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(-20px);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translateY(0);\n }\n}\n@keyframes fadeinT {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(-20px);\n transform: translateY(-20px);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n}\n/* 淡出-向上 */\n@-webkit-keyframes fadeoutT {\n 0% {\n opacity: 1;\n -webkit-transform: translateY(0);\n }\n 100% {\n opacity: 0;\n -webkit-transform: translateY(-20px);\n }\n}\n@keyframes fadeoutT {\n 0% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n -webkit-transform: translateY(-20px);\n transform: translateY(-20px);\n }\n}\n",""])},function(t,n){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],n=0;n<this.length;n++){var e=this[n];e[2]?t.push("@media "+e[2]+"{"+e[1]+"}"):t.push(e[1])}return t.join("")},t.i=function(n,e){"string"==typeof n&&(n=[[null,n,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];"number"==typeof i&&(r[i]=!0)}for(o=0;o<n.length;o++){var a=n[o];"number"==typeof a[0]&&r[a[0]]||(e&&!a[2]?a[2]=e:e&&(a[2]="("+a[2]+") and ("+e+")"),t.push(a))}},t}},function(t,n){t.exports='<div class="vc-table-container">\n <form class="search-area pull-left" v-if="searchable">\n <label>{{ filterLabel }}:</label>\n <div class="input-box">\n <input type="text" class="vc-table-filter" name="query" v-model="filterKey" />\n <span class="clear-it glyphicon glyphicon-remove-circle" @click="clearFilter" aria-hidden="true"></span>\n </div>\n </form>\n <div class="vc-table-title" :class="{ \'title-only\': !searchable && !exportable }">{{ title }}</div>\n <div class="export-area pull-right" v-if="exportable">\n <button class="btn btn-info btn-sm pull-right" @click="exportSortArgs">导出数据</button>\n </div>\n <table class="vc-table table table-striped table-hover" :class="{ \'vc-table-fixed\': tableFixed, \'title-only\': (!searchable && !exportable) }">\n <thead v-if="showTableHeader">\n <tr @click="handleClick">\n <th v-for="key in columns"\n @click="sortBy(key)"\n :class="{ active: sortKey == key }">\n {{ key | zhCN }}\n <span class="arrow" \n v-if="sortable"\n :class="sortOrders[key] > 0 ? \'asc\' : \'dsc\'">\n </span>\n </th>\n </tr>\n </thead>\n <tbody>\n <!-- 制作表格的关键，行循环，再填每一行的列, 不可用内置index做排序!故数据源必须自带index -->\n <tr v-for="\n (index, entry) in data\n | filterBy filterKey \n | newOrderBy sortKey sortOrders[sortKey]" \n transition="staggered"\n stagger="5"\n >\n <td v-for="key in columns">\n <span>{{ entry[key] }}</span>\n </td>\n </tr>\n </tbody>\n </table>\n </div>'},function(t,n,e){e(40),t.exports=e(0).Object.keys},function(t,n){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,n,e){var r=e(4);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,n,e){var r=e(8),o=e(36),i=e(35);t.exports=function(t){return function(n,e,a){var s,c=r(n),l=o(c.length),u=i(a,l);if(t&&e!=e){for(;l>u;)if(s=c[u++],s!=s)return!0}else for(;l>u;u++)if((t||u in c)&&c[u]===e)return t||u||0;return!t&&-1}}},function(t,n){var e={}.toString;t.exports=function(t){return e.call(t).slice(8,-1)}},function(t,n,e){var r=e(16);t.exports=function(t,n,e){if(r(t),void 0===n)return t;switch(e){case 1:return function(e){return t.call(n,e)};case 2:return function(e,r){return t.call(n,e,r)};case 3:return function(e,r,o){return t.call(n,e,r,o)}}return function(){return t.apply(n,arguments)}}},function(t,n,e){var r=e(4),o=e(3).document,i=r(o)&&r(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},function(t,n){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,n,e){var r=e(3),o=e(0),i=e(20),a=e(25),s="prototype",c=function(t,n,e){var l,u,f,p=t&c.F,d=t&c.G,b=t&c.S,v=t&c.P,h=t&c.B,y=t&c.W,x=d?o:o[n]||(o[n]={}),g=x[s],m=d?r:b?r[n]:(r[n]||{})[s];d&&(e=n);for(l in e)u=!p&&m&&void 0!==m[l],u&&l in x||(f=u?m[l]:e[l],x[l]=d&&"function"!=typeof m[l]?e[l]:h&&u?i(f,r):y&&m[l]==f?function(t){var n=function(n,e,r){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(n);case 2:return new t(n,e)}return new t(n,e,r)}return t.apply(this,arguments)};return n[s]=t[s],n}(f):v&&"function"==typeof f?i(Function.call,f):f,v&&((x.virtual||(x.virtual={}))[l]=f,t&c.R&&g&&!g[l]&&a(g,l,f)))};c.F=1,c.G=2,c.S=4,c.P=8,c.B=16,c.W=32,c.U=64,c.R=128,t.exports=c},function(t,n){var e={}.hasOwnProperty;t.exports=function(t,n){return e.call(t,n)}},function(t,n,e){var r=e(28),o=e(32);t.exports=e(1)?function(t,n,e){return r.f(t,n,o(1,e))}:function(t,n,e){return t[n]=e,t}},function(t,n,e){t.exports=!e(1)&&!e(2)(function(){return 7!=Object.defineProperty(e(21)("div"),"a",{get:function(){return 7}}).a})},function(t,n,e){var r=e(19);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,n,e){var r=e(17),o=e(26),i=e(38),a=Object.defineProperty;n.f=e(1)?Object.defineProperty:function(t,n,e){if(r(t),n=i(n,!0),r(e),o)try{return a(t,n,e)}catch(s){}if("get"in e||"set"in e)throw TypeError("Accessors not supported!");return"value"in e&&(t[n]=e.value),t}},function(t,n,e){var r=e(24),o=e(8),i=e(18)(!1),a=e(33)("IE_PROTO");t.exports=function(t,n){var e,s=o(t),c=0,l=[];for(e in s)e!=a&&r(s,e)&&l.push(e);for(;n.length>c;)r(s,e=n[c++])&&(~i(l,e)||l.push(e));return l}},function(t,n,e){var r=e(29),o=e(22);t.exports=Object.keys||function(t){return r(t,o)}},function(t,n,e){var r=e(23),o=e(0),i=e(2);t.exports=function(t,n){var e=(o.Object||{})[t]||Object[t],a={};a[t]=n(e),r(r.S+r.F*i(function(){e(1)}),"Object",a)}},function(t,n){t.exports=function(t,n){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:n}}},function(t,n,e){var r=e(34)("keys"),o=e(39);t.exports=function(t){return r[t]||(r[t]=o(t))}},function(t,n,e){var r=e(3),o="__core-js_shared__",i=r[o]||(r[o]={});t.exports=function(t){return i[t]||(i[t]={})}},function(t,n,e){var r=e(7),o=Math.max,i=Math.min;t.exports=function(t,n){return t=r(t),t<0?o(t+n,0):i(t,n)}},function(t,n,e){var r=e(7),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,n,e){var r=e(6);t.exports=function(t){return Object(r(t))}},function(t,n,e){var r=e(4);t.exports=function(t,n){if(!r(t))return t;var e,o;if(n&&"function"==typeof(e=t.toString)&&!r(o=e.call(t)))return o;if("function"==typeof(e=t.valueOf)&&!r(o=e.call(t)))return o;if(!n&&"function"==typeof(e=t.toString)&&!r(o=e.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,n){var e=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++e+r).toString(36))}},function(t,n,e){var r=e(37),o=e(30);e(31)("keys",function(){return function(t){return o(r(t))}})},function(t,n,e){t.exports={"default":e(15),__esModule:!0}},function(t,n,e){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(n,"__esModule",{value:!0});var o=e(41),i=r(o),a="TABLE";n["default"]={name:"vc-table",props:{name:{type:String,"default":"vc-table"+Date.now()},tpl:String,data:{type:Array},dataParser:{type:Function},dataPlus:Object,columns:Array,columnsMap:Object,title:String,titleAlign:{type:String,"default":"center"},tableFixed:{type:Boolean,"default":!1},searchable:{type:Boolean,"default":!1},filterKey:String,filterLabel:{type:String,"default":"筛选"},sortable:{type:Boolean,"default":!1},showTableHeader:{type:Boolean,"default":!0},exportLabel:{type:String,"default":"导出"},exportable:{type:Boolean,"default":!1}},created:function(){this.tpl&&(this.$options.template=this.tpl)},data:function(){var t={};return this.columns.forEach(function(n){t[n]=1}),{sortKey:"",sortOrders:t}},filters:{newOrderBy:function(t,n,e){return e=parseInt(e),t.sort(function(t,r){var o,i;return o=null==t[n]?-(1/0):t[n],i=null==r[n]?-(1/0):r[n],isNaN(o)||isNaN(i)?o>i?e:-e:(Number(o)-Number(i))*e})},round:function(t,n,e){"number"!=typeof t&&(t=+t);var r=t.toFixed(n);return e?r:+r},zhCN:function(t){var n=this.columnsMap,e=(0,i["default"])(n);if(!(e.length>0))return t;for(var r=0,o=e.length;r<o;r++)if(t===e[r])return n[t]}},methods:{clearFilter:function(){this.filterKey=""},sortBy:function(t){this.sortable&&(this.sortKey=t,null==this.sortOrders[t]?this.sortOrders[t]=-1:this.sortOrders[t]=this.sortOrders[t]*-1)},handleClick:function(){var t=[].slice.call(arguments,0),n={action:"click",data:t};this.$dispatch(a,n,name)},exportSortArgs:function(){var t={action:"exportSortInfo",data:{sortKey:this.sortKey,currentOrder:this.sortOrders[this.sortKey],order:this.sortOrders}};this.$dispatch(a,t,name)}},events:{triggerSort:function(t){this.sortBy(t);var n={action:"sortDone",data:{sortKey:this.sortKey,sortOrders:this.sortOrders}};this.$dispatch("COMPONENT_NS",n)}}}},function(t,n,e){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}var o=e(9),i=r(o);t.exports=i["default"]}])});