From c5ec9377c07a1e3007686ad84dd9fdda4dd9bfcc Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 14 Jan 2020 15:13:31 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=8B=BE?= =?UTF-8?q?=E9=80=89=E6=B8=B2=E6=9F=93=E8=A1=8C=E5=BA=95=E8=89=B2=E5=92=8C?= =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E6=B8=B2=E6=9F=93=E8=A1=8C=E5=BA=95?= =?UTF-8?q?=E8=89=B2=E7=9A=84=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/index.js | 4 +- examples/features/test.vue | 92 ++++++++++++++++++++++++++++++++++++++ examples/routes.js | 8 ++++ package-lock.json | 39 ++++++++-------- src/mixin.js | 12 +++++ src/table.vue | 15 ++++++- src/tableBody.vue | 15 ++++++- src/tableTd.vue | 31 ++++++++++--- src/tableTr.vue | 11 ++++- 9 files changed, 195 insertions(+), 32 deletions(-) create mode 100644 examples/features/test.vue diff --git a/dist/index.js b/dist/index.js index f2b4539..1ea17e4 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,4 +1,4 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("FlexTable",[],t):"object"==typeof exports?exports.FlexTable=t():e.FlexTable=t()}(window,function(){return n={},e.m=t=[function(e,t,n){"use strict";function o(e,t,n,o,i,r,l,a){var s,d="function"==typeof e?e.options:e;if(t&&(d.render=t,d.staticRenderFns=n,d._compiled=!0),o&&(d.functional=!0),r&&(d._scopeId="data-v-"+r),l?(s=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(l)},d._ssrRegister=s):i&&(s=a?function(){i.call(this,this.$root.$options.shadowRoot)}:i),s)if(d.functional){d._injectStyles=s;var c=d.render;d.render=function(e,t){return s.call(t),c(e,t)}}else{var u=d.beforeCreate;d.beforeCreate=u?[].concat(u,s):[s]}return{exports:e,options:d}}n.d(t,"a",function(){return o})},function(e,t){e.exports=function(e){return e&&e.__esModule?e:{default:e}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o={props:{calWidth:{type:Object,required:!0}},computed:{owner:function(){for(var e=this.$parent;e&&!e.tableId;)e=e.$parent;return e}},methods:{setCellStyle:function(e){var t=this.calWidth[e.key],n={};return t&&(n.width="".concat(t,"px"),n.flex="none"),e.align&&(n["text-align"]=e.align),n}}};t.default=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o={name:"TableExpand",functional:!(t.default=void 0),props:{class:String,row:Object,render:Function,index:Number,column:{type:Object,default:null}},render:function(e,t){var n={row:t.props.row,index:t.props.index};return t.props.column&&(n.column=t.props.column),t.props.render(e,n)}};t.default=o},function(e,t,n){"use strict";n.r(t);var o=n(5),i=n.n(o);for(var r in o)"default"!==r&&function(e){n.d(t,e,function(){return o[e]})}(r);t.default=i.a},function(e,t,n){"use strict";var o=n(1);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=o(n(36)),r=o(n(37)),l=o(n(41)),a=o(n(42)),s=o(n(43)),d=o(n(47)),c=o(n(48)),u=o(n(49)),f=n(54),h="flex-table",p=1,b={name:"flexTable",components:{tableHead:i.default,tableBody:r.default,tableFoot:l.default,tableScrollBar:a.default,Spinner:s.default},props:{data:{type:Array,default:function(){return[]}},sum:{type:[Object,Boolean]},columns:{type:Array,default:function(){return[]}},loading:{type:Boolean,default:!1},height:{type:Number},resizable:{type:Boolean,default:!1},noData:{type:String,default:"No Data"},size:{type:String,default:"default"},theme:{type:String,default:"light"},border:{type:Boolean,default:!0},stripe:{type:Boolean,default:!0},asyncRender:{type:Number,default:0},minWidth:{type:Number,default:f.MIN_WIDTH},maxWidth:{type:Number},fixedHead:{type:Boolean,default:!1},fixedHeadTop:{type:Number,default:0}},data:function(){return{tableId:p++,rowHeight:{header:0,footer:0},dataList:[],style:{},calWidth:{},tableColumns:[],headerH:38,bodyH:0,footH:54,maxHeight:0,scrollTop:0,bodyIsScroll:0,shouldEachRenderQueue:!1,hasFixedLeft:!1,hasFixedRight:!1,scrollYScrolling:!1,hoverIndex:void 0,isRenderDone:!0,fixedHeadStyle:{},isInFixedHead:!1,isFixedHead:!1,colResize:{onColResizing:!1,originX:0,currentX:0,resizeIndex:-1,minX:0,maxX:1/0},emitColResize:{newWidth:0,oldWidth:0,column:{},event:null}}},computed:{wrapClasses:function(){var e=["".concat(h,"-wrap")];return"big"===this.size?e.push("".concat(h,"-big")):"small"===this.size&&e.push("".concat(h,"-small")),"dark"===this.theme&&e.push("".concat(h,"-dark")),this.showScrollBar&&e.push("has-scroll-bar"),this.border||e.push("no-boder"),this.stripe||e.push("no-stripe"),e},fixedLeftWidth:function(){var e=this;return this.tableColumns.reduce(function(t,n){return"left"===n.fixed&&(t+=e.calWidth[n.key]),t},0)},fixedRightWidth:function(){var e=this;return this.tableColumns.reduce(function(t,n){return"right"===n.fixed&&(t+=e.calWidth[n.key]),t},0)},showScrollBar:function(){return this.bodyH>this.maxHeight},getFixedHeadClass:function(){return this.isFixedHead?"flex-table-head-fixed-layout is-fixed":"flex-table-head-fixed-layout"}},mounted:function(){this.doLayout(),window.addEventListener("resize",this.doLayout),window.addEventListener("scroll",this.winScroll,!1),this.resizable&&(window.addEventListener("mouseup",this.onColResizeEnd),this.$el.addEventListener("mousemove",this.onColResizeMove))},watch:{data:{handler:function(){this.initData(),this.doLayout()},deep:!0,immediate:!0},height:function(e){this.calHeight()},columns:{handler:function(e){var t=[],n=[],o=[];e.forEach(function(e){"left"===e.fixed?t.push(e):"right"===e.fixed?n.push(e):o.push(e)}),this.tableColumns=[].concat(t,o,n)},immediate:!0},tableColumns:{handler:function(e){var t=this;this.doLayout(),this.$nextTick(function(){t.hasFixedLeft=t.computedFixedLeft(),t.hasFixedRight=t.computedFixedRight()}),this.$emit("update:columns",e)},deep:!0,immediate:!0},sum:function(){this.calHeight()},showScrollBar:function(){this.resize()}},updated:function(){},beforeDestroy:function(){this.shouldEachRenderQueue=!1,this._queueId=null,window.removeEventListener("resize",this.doLayout),window.removeEventListener("scroll",this.winScroll,!1),window.removeEventListener("mouseup",this.onColResizeEnd),this.$el.removeEventListener("mousemove",this.onColResizeMove)},methods:{syncScroll:(0,c.default)(function(e){var t=e.target.scrollTop;this.scrollTop=t},20),updateHoverIndex:(0,d.default)(function(e){this.hoverIndex=e},50),handleMousewheel:function(e){var t=(0,u.default)(e);if(0o;(i||r)&&(e.preventDefault(),this.scrollTop+=Math.ceil(t.pixelY),this.scrollTop=Math.max(this.scrollTop,0))}},doLayout:(0,d.default)(function(){this.resize(),this.calHeight()},50,{leading:!0}),computedFixedLeft:function(){return this.tableColumns.some(function(e){return"left"===e.fixed})},computedFixedRight:function(){return this.tableColumns.some(function(e){return"right"===e.fixed})},initData:function(){var e=this;this._queueId=(new Date).getTime(),this.rowHeight={header:0,footer:0},this.dataList=[],0this.asyncRender?(this.shouldEachRenderQueue=!0,this.eachQueue(this.data,this.asyncRender,this._queueId)):(this.isRenderDone=!0,this.$emit("on-render-done"))):this.data.forEach(function(t,n){e.copyItem(t,n)})},copyItem:function(e,t){var n=this,o=JSON.parse(JSON.stringify(e));o._isChecked=!!o._checked,o._isDisabled=!!o._disabled,o._expanded=o.expandStatus||!!o._expanded,o._disableExpand=!!o._disableExpand,this.$set(this.rowHeight,t,0),this.dataList.push(o),this.$nextTick(function(){var e=n.showScrollBar?16:0,t=n.$el.offsetWidth-2-e;n.fixedHeadStyle.width!==t+"px"&&(n.fixedHeadStyle.width=t+"px")})},eachQueue:function(e,t,n){var o=this;if(this.shouldEachRenderQueue)return new Promise(function(i,r){requestAnimationFrame(function(){o._queueId!==n?r():(o.copyItem(e[t],t++),i())})}).then(function(){e.length<=t?(o.doLayout(),o.isRenderDone=!0,o.$emit("on-render-done"),o.shouldEachRenderQueue=!1):o.eachQueue(e,t,n)}).catch(function(){})},toggleSelect:function(e){var t=this.dataList[e];t._isDisabled||(t._isChecked=!t._isChecked);var n=this.getSelection(),o=JSON.parse(JSON.stringify(t));t._isChecked||this.$emit("on-selection-cancel",o),this.$emit("on-selection-change",n,o)},getSelection:function(){var e=[];return this.dataList.forEach(function(t){t._isChecked&&e.push(t)}),JSON.parse(JSON.stringify(e))},selectAll:function(e){var t=this.getSelection();this.dataList.forEach(function(t){t._isDisabled||(t._isChecked=e)});var n=this.getSelection();e?this.$emit("on-selection-change",n):this.$emit("on-all-cancel",t)},onColResizeMove:function(e){var t=this.colResize;if(t.onColResizing){var n=e.clientX-t.nTableLeft,o=n-t.originX;o<0&&o>=t.minX?t.currentX=n:0t.top?(this.isFixedHead=!0,this.fixedHeadStyle.left=t.left+(this.border?1:0)+"px",this.fixedHeadStyle.position="fixed",this.fixedHeadStyle.top=this.fixedHeadTop+"px"):(this.isFixedHead=!1,this.fixedHeadStyle.position="absolute",this.fixedHeadStyle.left=0,this.fixedHeadStyle.top=0)},resize:function(){var e=this;requestAnimationFrame(function(){var t=e.showScrollBar?16:0,n=e.$el.offsetWidth-2-t;e.fixedHeadStyle.width=n+"px";var o={},i=0,r=0;if(e.tableColumns.forEach(function(t){var n=t.key||t.title,l=t.width;l?(l=e.limitWidth(l,t),o[n]=l,i+=l):r++}),0n.parts.length&&(o.parts.length=n.parts.length)}else{var l=[];for(i=0;iinput{opacity:0;position:absolute}.radio-component>input+label>.input-box{display:inline-block;border:1px solid #000;border-radius:50%;margin:0;padding:0;width:1em;height:1em;background:#fff;overflow:hidden;vertical-align:-5%;user-select:none}.radio-component>input+label>.input-box>.input-box-circle{display:block;margin:50%;width:0;height:0%;background:#000;border-radius:50%;opacity:0;transition:width .15s ease-in,height .15s ease-in,margin .15s ease-in}.radio-component>input:checked+label>.input-box>.input-box-circle{opacity:1;margin:22%;width:56%;height:56%}.radio-component>input:focus+label>.input-box{box-shadow:0 0 2px 3px #73b9ff}.radio-component>input:disabled+label{opacity:.7}",""])},function(e,t,n){(e.exports=n(0)(void 0)).push([e.i,".checkbox-component>input{opacity:0;position:absolute}.checkbox-component>input+label>.input-box{display:inline-block;border:1px solid #000;border-radius:14%;margin:0;padding:0;width:1em;height:1em;background:#fff;overflow:hidden;vertical-align:-5%;user-select:none}.checkbox-component>input+label>.input-box>.input-box-tick{width:100%;height:100%}.checkbox-component>input+label>.input-box>.input-box-tick>path{opacity:0;stroke:#000;stroke-width:2.3px;stroke-dashoffset:20;stroke-dasharray:20;transition:stroke-dashoffset .15s ease-in}.checkbox-component>input:checked+label>.input-box>.input-box-tick>path{opacity:1;stroke-dashoffset:0}.checkbox-component>input:focus+label>.input-box{box-shadow:0 0 2px 3px rgba(115,185,255,.69)}.checkbox-component>input:disabled+label{opacity:.7}",""])},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"radio-component"},[n("input",{class:e.className,attrs:{type:"radio",id:e.id,name:e.name,required:e.required,disabled:e.disabled},domProps:{value:e.value,checked:e.state},on:{change:e.onChange}}),e._v(" "),n("label",{attrs:{for:e.id}},[e._t("input-box",[e._m(0)]),e._v(" "),e._t("default")],2)])},staticRenderFns:[function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"input-box"},[t("span",{staticClass:"input-box-circle"})])}]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"checkbox-component"},[n("input",{class:e.className,attrs:{type:"checkbox",id:e.id,name:e.name,required:e.required,disabled:e.disabled},domProps:{value:e.value,checked:e.state},on:{change:e.onChange}}),e._v(" "),n("label",{attrs:{for:e.id}},[e._t("input-box",[n("span",{staticClass:"input-box"},[n("svg",{staticClass:"input-box-tick",attrs:{viewBox:"0 0 16 16"}},[n("path",{attrs:{fill:"none",d:"M1.7,7.8l3.8,3.4l9-8.8"}})])])]),e._v(" "),e._t("default")],2)])},staticRenderFns:[]}},function(e,t,n){var o=n(8);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals),n(2)("141dde0d",o,!0)},function(e,t,n){var o=n(9);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals),n(2)("0734c2c4",o,!0)},function(e,t){e.exports=function(e,t){for(var n=[],o={},i=0;ithis.maxHeight},getFixedHeadClass:function(){return this.isFixedHead?"flex-table-head-fixed-layout is-fixed":"flex-table-head-fixed-layout"}},mounted:function(){this.doLayout(),window.addEventListener("resize",this.doLayout),window.addEventListener("scroll",this.winScroll,!1),this.resizable&&(window.addEventListener("mouseup",this.onColResizeEnd),this.$el.addEventListener("mousemove",this.onColResizeMove))},watch:{data:{handler:function(){this.initData(),this.doLayout()},deep:!0,immediate:!0},height:function(){this.calHeight()},columns:{handler:function(e){var t=[],n=[],o=[];e.forEach(function(e){"left"===e.fixed?t.push(e):"right"===e.fixed?n.push(e):o.push(e)}),this.tableColumns=[].concat(t,o,n)},immediate:!0},tableColumns:{handler:function(e){var t=this;this.doLayout(),this.$nextTick(function(){t.hasFixedLeft=t.computedFixedLeft(),t.hasFixedRight=t.computedFixedRight()}),this.$emit("update:columns",e)},deep:!0,immediate:!0},sum:function(){this.calHeight()},showScrollBar:function(){this.resize()}},updated:function(){},beforeDestroy:function(){this.shouldEachRenderQueue=!1,this._queueId=null,window.removeEventListener("resize",this.doLayout),window.removeEventListener("scroll",this.winScroll,!1),window.removeEventListener("mouseup",this.onColResizeEnd),this.$el.removeEventListener("mousemove",this.onColResizeMove)},methods:{syncScroll:(0,c.default)(function(e){var t=e.target.scrollTop;this.scrollTop=t},20),updateHoverIndex:(0,d.default)(function(e){this.hoverIndex=e},50),handleMousewheel:function(e){var t=(0,u.default)(e);if(0o;(i||r)&&(e.preventDefault(),this.scrollTop+=Math.ceil(t.pixelY),this.scrollTop=Math.max(this.scrollTop,0))}},doLayout:(0,d.default)(function(){this.resize(),this.calHeight()},50,{leading:!0}),computedFixedLeft:function(){return this.tableColumns.some(function(e){return"left"===e.fixed})},computedFixedRight:function(){return this.tableColumns.some(function(e){return"right"===e.fixed})},initData:function(){var e=this;this._queueId=(new Date).getTime(),this.rowHeight={header:0,footer:0},this.dataList=[],0this.asyncRender?(this.shouldEachRenderQueue=!0,this.eachQueue(this.data,this.asyncRender,this._queueId)):(this.isRenderDone=!0,this.$emit("on-render-done"))):this.data.forEach(function(t,n){e.copyItem(t,n)})},copyItem:function(e,t){var n=this,o=JSON.parse(JSON.stringify(e));o._isChecked=!!o._checked,o._isDisabled=!!o._disabled,o._expanded=o.expandStatus||!!o._expanded,o._disableExpand=!!o._disableExpand,this.$set(this.rowHeight,t,0),this.dataList.push(o),this.$nextTick(function(){var e=n.showScrollBar?16:0,t=n.$el.offsetWidth-2-e;n.fixedHeadStyle.width!==t+"px"&&(n.fixedHeadStyle.width=t+"px")})},eachQueue:function(e,t,n){var o=this;if(this.shouldEachRenderQueue)return new Promise(function(i,r){requestAnimationFrame(function(){o._queueId!==n?r():(o.copyItem(e[t],t++),i())})}).then(function(){e.length<=t?(o.doLayout(),o.isRenderDone=!0,o.$emit("on-render-done"),o.shouldEachRenderQueue=!1):o.eachQueue(e,t,n)}).catch(function(){})},toggleSelect:function(e){var t=this.dataList[e];t._isDisabled||(t._isChecked=!t._isChecked);var n=this.getSelection(),o=JSON.parse(JSON.stringify(t));t._isChecked||this.$emit("on-selection-cancel",o),this.$emit("on-selection-change",n,o)},getSelection:function(){var e=[];return this.dataList.forEach(function(t){t._isChecked&&e.push(t)}),JSON.parse(JSON.stringify(e))},selectAll:function(e){var t=this.getSelection();this.dataList.forEach(function(t){t._isDisabled||(t._isChecked=e)});var n=this.getSelection();e?this.$emit("on-selection-change",n):this.$emit("on-all-cancel",t)},onColResizeMove:function(e){var t=this.colResize;if(t.onColResizing){var n=e.clientX-t.nTableLeft,o=n-t.originX;o<0&&o>=t.minX?t.currentX=n:0t.top?(this.isFixedHead=!0,this.fixedHeadStyle.left=t.left+(this.border?1:0)+"px",this.fixedHeadStyle.position="fixed",this.fixedHeadStyle.top=this.fixedHeadTop+"px"):(this.isFixedHead=!1,this.fixedHeadStyle.position="absolute",this.fixedHeadStyle.left=0,this.fixedHeadStyle.top=0)},resize:function(){var e=this;requestAnimationFrame(function(){var t=e.showScrollBar?16:0,n=e.$el.offsetWidth-2-t;e.fixedHeadStyle.width=n+"px";var o={},i=0,r=0;if(e.tableColumns.forEach(function(t){var n=t.key||t.title,l=t.width;l?(l=e.limitWidth(l,t),o[n]=l,i+=l):r++}),0n.parts.length&&(o.parts.length=n.parts.length)}else{var l=[];for(i=0;iinput{opacity:0;position:absolute}.radio-component>input+label>.input-box{display:inline-block;border:1px solid #000;border-radius:50%;margin:0;padding:0;width:1em;height:1em;background:#fff;overflow:hidden;vertical-align:-5%;user-select:none}.radio-component>input+label>.input-box>.input-box-circle{display:block;margin:50%;width:0;height:0%;background:#000;border-radius:50%;opacity:0;transition:width .15s ease-in,height .15s ease-in,margin .15s ease-in}.radio-component>input:checked+label>.input-box>.input-box-circle{opacity:1;margin:22%;width:56%;height:56%}.radio-component>input:focus+label>.input-box{box-shadow:0 0 2px 3px #73b9ff}.radio-component>input:disabled+label{opacity:.7}",""])},function(e,t,n){(e.exports=n(0)(void 0)).push([e.i,".checkbox-component>input{opacity:0;position:absolute}.checkbox-component>input+label>.input-box{display:inline-block;border:1px solid #000;border-radius:14%;margin:0;padding:0;width:1em;height:1em;background:#fff;overflow:hidden;vertical-align:-5%;user-select:none}.checkbox-component>input+label>.input-box>.input-box-tick{width:100%;height:100%}.checkbox-component>input+label>.input-box>.input-box-tick>path{opacity:0;stroke:#000;stroke-width:2.3px;stroke-dashoffset:20;stroke-dasharray:20;transition:stroke-dashoffset .15s ease-in}.checkbox-component>input:checked+label>.input-box>.input-box-tick>path{opacity:1;stroke-dashoffset:0}.checkbox-component>input:focus+label>.input-box{box-shadow:0 0 2px 3px rgba(115,185,255,.69)}.checkbox-component>input:disabled+label{opacity:.7}",""])},function(e){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"radio-component"},[n("input",{class:e.className,attrs:{type:"radio",id:e.id,name:e.name,required:e.required,disabled:e.disabled},domProps:{value:e.value,checked:e.state},on:{change:e.onChange}}),e._v(" "),n("label",{attrs:{for:e.id}},[e._t("input-box",[e._m(0)]),e._v(" "),e._t("default")],2)])},staticRenderFns:[function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"input-box"},[t("span",{staticClass:"input-box-circle"})])}]}},function(e){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"checkbox-component"},[n("input",{class:e.className,attrs:{type:"checkbox",id:e.id,name:e.name,required:e.required,disabled:e.disabled},domProps:{value:e.value,checked:e.state},on:{change:e.onChange}}),e._v(" "),n("label",{attrs:{for:e.id}},[e._t("input-box",[n("span",{staticClass:"input-box"},[n("svg",{staticClass:"input-box-tick",attrs:{viewBox:"0 0 16 16"}},[n("path",{attrs:{fill:"none",d:"M1.7,7.8l3.8,3.4l9-8.8"}})])])]),e._v(" "),e._t("default")],2)])},staticRenderFns:[]}},function(e,t,n){var o=n(8);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals),n(2)("141dde0d",o,!0)},function(e,t,n){var o=n(9);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals),n(2)("0734c2c4",o,!0)},function(e){e.exports=function(e,t){for(var n=[],o={},i=0;i .flex-table-row:nth-child(odd) {\n background: #f9f9f9;\n}\n.flex-table-body .flex-table-tr > .flex-table-row:last-child {\n border-bottom: 1px solid #e9eaec;\n}\n.flex-table-body .flex-table-tr > .flex-table-row.flex-table-hover {\n background-color: #ebf7ff;\n box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);\n}\n.flex-table-dark {\n color: #fff;\n}\n.flex-table-dark .flex-table {\n background-color: #333;\n}\n.flex-table-dark .flex-table-head-fixed {\n background-color: #333;\n}\n.flex-table-dark .flex-table-body .flex-table-row:nth-child(odd) {\n background: #555;\n}\n.flex-table-dark .flex-table-body .flex-table-row.flex-table-hover {\n background-color: #888;\n}\n.flex-table-dark .flex-table-col {\n color: #fff;\n}\n.flex-table-dark .flex-table-col .checkbox-component > input + label > .input-box {\n border-color: #fff;\n}\n.flex-table-fixed-header {\n overflow-y: auto;\n overflow-x: hidden;\n}\n.flex-table-fixed-header::-webkit-scrollbar {\n display: none;\n}\n.flex-table-foot {\n border-top: 1px solid #e9eaec;\n text-align: right;\n}\n.flex-table-foot p {\n margin: 0;\n}\n.flex-table-foot .foot-label {\n color: #999;\n}\n.flex-table-row {\n display: flex;\n align-items: stretch;\n height: 100%;\n border-bottom: 1px solid #e9eaec;\n}\n.flex-table-row:last-child {\n border: none;\n}\n.flex-table-expanded {\n border-bottom: 1px solid #e9eaec;\n}\n.flex-table-expanded:last-child {\n border: none;\n}\n.flex-table-col {\n position: relative;\n flex: 1;\n width: 100%;\n padding: 10px;\n font-size: 12px;\n color: #495060;\n border-right: 1px solid #e9eaec;\n word-break: break-word;\n box-sizing: border-box;\n}\n.flex-table-col:last-child {\n border: none;\n}\n.flex-table-col-resize {\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: 4px;\n cursor: col-resize;\n}\n.flex-table-col-resize:hover {\n background-color: #0b8df8;\n}\n.flex-table-col-hidden {\n visibility: hidden;\n}\n.flex-table-col-icon {\n text-align: center;\n cursor: pointer;\n}\n.flex-table-col-ellipsis {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.flex-table-col .ivu-checkbox-wrapper {\n margin-right: 0;\n margin-bottom: 0;\n}\n.flex-table-col .checkbox-component > input + label > .input-box {\n border-color: #ccc;\n}\n.flex-table-hidden {\n visibility: hidden;\n}\n.flex-table-tip {\n text-align: center;\n}\n.flex-table-sort {\n display: inline-block;\n width: 14px;\n height: 12px;\n margin-top: -1px;\n margin-left: 5px;\n vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n position: relative;\n}\n.flex-table-sort i {\n display: block;\n height: 0;\n line-height: 0;\n overflow: hidden;\n position: absolute;\n transition: color 0.2s ease-in-out;\n}\n.flex-table-sort i:first-child {\n top: -5px;\n}\n.flex-table-sort i:last-child {\n bottom: -5px;\n}\n.flex-table-fixed-left,\n.flex-table-fixed-right-wrap {\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n background-color: #fff;\n}\n.flex-table-fixed-left.is-scroll,\n.flex-table-fixed-right-wrap.is-scroll {\n box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);\n}\n.flex-table-fixed-left .flex-table-body,\n.flex-table-fixed-right-wrap .flex-table-body {\n overflow: hidden;\n}\n.flex-table-fixed-right-wrap {\n height: 100%;\n left: auto;\n right: 0;\n box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);\n}\n.flex-table-fixed-right-wrap .flex-table-fixed-right {\n position: absolute;\n right: 0;\n}\n.flex-table-reference-line {\n position: absolute;\n top: 0;\n height: 100%;\n border-right: 1px solid transparent;\n cursor: col-resize;\n}\n.flex-table-reference-line.cur {\n border-color: #0b8df8;\n}\n.flex-table-arrow-dropup,\n.flex-table-arrow-dropdown {\n border: 5px solid transparent;\n}\n.flex-table-arrow-dropup {\n border-bottom-color: #c5c8ce;\n}\n.flex-table-arrow-dropup.on {\n border-bottom-color: #333;\n}\n.flex-table-arrow-dropup:hover {\n border-bottom-color: #333;\n}\n.flex-table-arrow-dropdown {\n border-top-color: #c5c8ce;\n}\n.flex-table-arrow-dropdown.on {\n border-top-color: #333;\n}\n.flex-table-arrow-dropdown:hover {\n border-top-color: #333;\n}\n.flex-table-arrow-right,\n.flex-table-arrow-down {\n display: inline-block;\n vertical-align: middle;\n width: 4px;\n height: 4px;\n margin: auto;\n background-color: transparent;\n border: 1px solid transparent;\n border-right-color: #333;\n border-bottom-color: #333;\n transform: rotate(-45deg);\n}\n.flex-table-arrow-down {\n transform: rotate(45deg);\n}\n.flex-table-expand-disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n.has-scroll-bar .flex-table-fixed-right-wrap {\n right: 15px;\n}\n.checkbox-component > input:disabled + label {\n opacity: 0.1 !important;\n}\n",""])}],e.c=n,e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:o})},e.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},e.t=function(t,n){if(1&n&&(t=e(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var i in t)e.d(o,i,function(e){return t[e]}.bind(null,i));return o},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},e.p="/dist/",e(e.s=34);function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var t,n}); \ No newline at end of file + */),e.exports=function(e,t){if(!i.canUseDOM||t&&!("addEventListener"in document))return!1;var n="on"+e,r=n in document;if(!r){var l=document.createElement("div");l.setAttribute(n,"return;"),r="function"==typeof l[n]}return!r&&o&&"wheel"===e&&(r=document.implementation.hasFeature("Events.wheel","3.0")),r}},function(e){"use strict";var t=!("undefined"==typeof window||!window.document||!window.document.createElement),n={canUseDOM:t,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:t&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:t&&!!window.screen,isInWorker:!t};e.exports=n},function(e){"use strict";e.exports={MIN_WIDTH:40}},function(e,t,n){"use strict";var o=n(21);n.n(o).a},function(e,t,n){(e.exports=n(31)(!1)).push([e.i,".flex-table {\n background-color: #fff;\n border-bottom: 1px solid #dddee1;\n position: relative;\n}\n.flex-table-wrap {\n position: relative;\n border: 1px solid #dddee1;\n display: flex;\n align-content: stretch;\n}\n.flex-table-wrap * {\n box-sizing: border-box;\n}\n.flex-table-wrap.no-boder {\n border-left: none;\n border-right: none;\n}\n.flex-table-wrap.no-boder .flex-table-col {\n border-right: none;\n}\n.flex-table-wrap.no-stripe .flex-table-body .flex-table-tr .flex-table-row:nth-child(odd) {\n background: none;\n}\n.flex-table-wrap.no-stripe .flex-table-body .flex-table-tr .flex-table-row.flex-table-hover {\n background-color: #ebf7ff;\n}\n.flex-table-wrap.no-stripe.flex-table-dark .flex-table-body .flex-table-tr .flex-table-row.flex-table-hover {\n background-color: #888;\n}\n.flex-table-head-fixed-layout {\n position: absolute;\n left: 0;\n top: 0;\n background: #fff;\n}\n.flex-table-head-fixed-layout.is-fixed {\n position: fixed;\n box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);\n}\n.flex-table-head-fixed {\n width: 100%;\n overflow-x: auto;\n}\n.flex-table-head-fixed::-webkit-scrollbar {\n display: none;\n}\n.flex-table-big .flex-table-scroll-y-head,\n.flex-table-big .flex-table-scroll-y-foot {\n padding: 15px 0;\n}\n.flex-table-big .flex-table-scroll-y-head {\n height: 48px;\n}\n.flex-table-big .flex-table-col {\n padding: 15px 10px;\n font-size: 14px;\n}\n.flex-table-small .flex-table-scroll-y-head,\n.flex-table-small .flex-table-scroll-y-foot {\n padding: 5px 0;\n}\n.flex-table-small .flex-table-scroll-y-head {\n height: 28px;\n}\n.flex-table-small .flex-table-col {\n padding: 5px 10px;\n}\n.flex-table-layout {\n max-width: 100%;\n overflow: auto;\n flex: 1;\n flex-shrink: 0;\n}\n.flex-table-scroll-y {\n width: 15px;\n flex-shrink: 0;\n border-left: 1px solid #dddee1;\n}\n.flex-table-scroll-y-head {\n width: 100%;\n height: 38px;\n padding: 10px 0;\n overflow: hidden;\n border-bottom: 1px solid #dddee1;\n box-sizing: border-box;\n}\n.flex-table-scroll-y-body {\n width: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n}\n.flex-table-scroll-y-body div {\n overflow: hidden;\n}\n.flex-table-scroll-y-foot {\n width: 100%;\n padding: 10px 0;\n overflow: hidden;\n border-top: 1px solid #dddee1;\n box-sizing: border-box;\n}\n.flex-table-head {\n border-bottom: 1px solid #e9eaec;\n font-weight: 700;\n user-select: none;\n}\n.flex-table-body .flex-table-tr > .flex-table-row:nth-child(odd) {\n background: #f9f9f9;\n}\n.flex-table-body .flex-table-tr > .flex-table-row:last-child {\n border-bottom: 1px solid #e9eaec;\n}\n.flex-table-body .flex-table-tr > .flex-table-row.flex-table-hover {\n background-color: #ebf7ff;\n box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);\n}\n.flex-table-dark {\n color: #fff;\n}\n.flex-table-dark .flex-table {\n background-color: #333;\n}\n.flex-table-dark .flex-table-head-fixed {\n background-color: #333;\n}\n.flex-table-dark .flex-table-body .flex-table-row:nth-child(odd) {\n background: #555;\n}\n.flex-table-dark .flex-table-body .flex-table-row.flex-table-hover {\n background-color: #888;\n}\n.flex-table-dark .flex-table-col {\n color: #fff;\n}\n.flex-table-dark .flex-table-col .checkbox-component > input + label > .input-box {\n border-color: #fff;\n}\n.flex-table-fixed-header {\n overflow-y: auto;\n overflow-x: hidden;\n}\n.flex-table-fixed-header::-webkit-scrollbar {\n display: none;\n}\n.flex-table-foot {\n border-top: 1px solid #e9eaec;\n text-align: right;\n}\n.flex-table-foot p {\n margin: 0;\n}\n.flex-table-foot .foot-label {\n color: #999;\n}\n.flex-table-row {\n display: flex;\n align-items: stretch;\n height: 100%;\n border-bottom: 1px solid #e9eaec;\n}\n.flex-table-row:last-child {\n border: none;\n}\n.flex-table-expanded {\n border-bottom: 1px solid #e9eaec;\n}\n.flex-table-expanded:last-child {\n border: none;\n}\n.flex-table-col {\n position: relative;\n flex: 1;\n width: 100%;\n padding: 10px;\n font-size: 12px;\n color: #495060;\n border-right: 1px solid #e9eaec;\n word-break: break-word;\n box-sizing: border-box;\n}\n.flex-table-col:last-child {\n border: none;\n}\n.flex-table-col-resize {\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: 4px;\n cursor: col-resize;\n}\n.flex-table-col-resize:hover {\n background-color: #0b8df8;\n}\n.flex-table-col-hidden {\n visibility: hidden;\n}\n.flex-table-col-icon {\n text-align: center;\n cursor: pointer;\n}\n.flex-table-col-ellipsis {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.flex-table-col .ivu-checkbox-wrapper {\n margin-right: 0;\n margin-bottom: 0;\n}\n.flex-table-col .checkbox-component > input + label > .input-box {\n border-color: #ccc;\n}\n.flex-table-hidden {\n visibility: hidden;\n}\n.flex-table-tip {\n text-align: center;\n}\n.flex-table-sort {\n display: inline-block;\n width: 14px;\n height: 12px;\n margin-top: -1px;\n margin-left: 5px;\n vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n position: relative;\n}\n.flex-table-sort i {\n display: block;\n height: 0;\n line-height: 0;\n overflow: hidden;\n position: absolute;\n transition: color 0.2s ease-in-out;\n}\n.flex-table-sort i:first-child {\n top: -5px;\n}\n.flex-table-sort i:last-child {\n bottom: -5px;\n}\n.flex-table-fixed-left,\n.flex-table-fixed-right-wrap {\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n background-color: #fff;\n}\n.flex-table-fixed-left.is-scroll,\n.flex-table-fixed-right-wrap.is-scroll {\n box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);\n}\n.flex-table-fixed-left .flex-table-body,\n.flex-table-fixed-right-wrap .flex-table-body {\n overflow: hidden;\n}\n.flex-table-fixed-right-wrap {\n height: 100%;\n left: auto;\n right: 0;\n box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);\n}\n.flex-table-fixed-right-wrap .flex-table-fixed-right {\n position: absolute;\n right: 0;\n}\n.flex-table-reference-line {\n position: absolute;\n top: 0;\n height: 100%;\n border-right: 1px solid transparent;\n cursor: col-resize;\n}\n.flex-table-reference-line.cur {\n border-color: #0b8df8;\n}\n.flex-table-arrow-dropup,\n.flex-table-arrow-dropdown {\n border: 5px solid transparent;\n}\n.flex-table-arrow-dropup {\n border-bottom-color: #c5c8ce;\n}\n.flex-table-arrow-dropup.on {\n border-bottom-color: #333;\n}\n.flex-table-arrow-dropup:hover {\n border-bottom-color: #333;\n}\n.flex-table-arrow-dropdown {\n border-top-color: #c5c8ce;\n}\n.flex-table-arrow-dropdown.on {\n border-top-color: #333;\n}\n.flex-table-arrow-dropdown:hover {\n border-top-color: #333;\n}\n.flex-table-arrow-right,\n.flex-table-arrow-down {\n display: inline-block;\n vertical-align: middle;\n width: 4px;\n height: 4px;\n margin: auto;\n background-color: transparent;\n border: 1px solid transparent;\n border-right-color: #333;\n border-bottom-color: #333;\n transform: rotate(-45deg);\n}\n.flex-table-arrow-down {\n transform: rotate(45deg);\n}\n.flex-table-expand-disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n.has-scroll-bar .flex-table-fixed-right-wrap {\n right: 15px;\n}\n.checkbox-component > input:disabled + label {\n opacity: 0.1 !important;\n}\n",""])}],e.c=n,e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:o})},e.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},e.t=function(t,n){if(1&n&&(t=e(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var i in t)e.d(o,i,function(e){return t[e]}.bind(null,i));return o},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},e.p="/dist/",e(e.s=34);function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var t,n}); \ No newline at end of file diff --git a/examples/features/test.vue b/examples/features/test.vue new file mode 100644 index 0000000..0db413c --- /dev/null +++ b/examples/features/test.vue @@ -0,0 +1,92 @@ + + + + + diff --git a/examples/routes.js b/examples/routes.js index 6aabcfe..df30663 100644 --- a/examples/routes.js +++ b/examples/routes.js @@ -95,4 +95,12 @@ export default [ title: '风格样式', }, }, + { + path: '/test', + name: 'test', + component: resolve => require(['./features/test.vue'], resolve), + meta: { + title: '初始渲染/勾选渲染', + }, + }, ]; diff --git a/package-lock.json b/package-lock.json index 2ca0652..3b564e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "tm-flextable", - "version": "0.2.5", + "version": "0.2.8", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1531,17 +1531,28 @@ } }, "babel-eslint": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.0.1.tgz", - "integrity": "sha512-z7OT1iNV+TjOwHNLLyJk+HN+YVWX+CLE6fPD2SymJZOZQBs+QIexFjhm4keGTm8MW9xr4EC9Q0PbaLB24V5GoQ==", + "version": "10.0.3", + "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.0.3.tgz", + "integrity": "sha512-z3U7eMY6r/3f3/JB9mTsLjyxrv0Yb1zb8PCWCLpguxfCzBIZUwy23R1t/XKewP+8mEN2Ck8Dtr4q20z6ce6SoA==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", "@babel/parser": "^7.0.0", "@babel/traverse": "^7.0.0", "@babel/types": "^7.0.0", - "eslint-scope": "3.7.1", - "eslint-visitor-keys": "^1.0.0" + "eslint-visitor-keys": "^1.0.0", + "resolve": "^1.12.0" + }, + "dependencies": { + "resolve": { + "version": "1.14.2", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.14.2.tgz", + "integrity": "sha512-EjlOBLBO1kxsUxsKjLt7TAECyKW6fOh1VRkykQkKGzcBbjjPIxBqGh0jf7GJ3k/f5mxMqW3htMD3WdTUVtW8HQ==", + "dev": true, + "requires": { + "path-parse": "^1.0.6" + } + } } }, "babel-loader": { @@ -3902,9 +3913,9 @@ } }, "eslint-plugin-vue": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-5.2.2.tgz", - "integrity": "sha512-CtGWH7IB0DA6BZOwcV9w9q3Ri6Yuo8qMjx05SmOGJ6X6E0Yo3y9E/gQ5tuNxg2dEt30tRnBoFTbvtmW9iEoyHA==", + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-5.2.3.tgz", + "integrity": "sha512-mGwMqbbJf0+VvpGR5Lllq0PMxvTdrZ/ZPjmhkacrCHbubJeJOt+T6E3HUzAifa2Mxi7RSdJfC9HFpOeSYVMMIw==", "dev": true, "requires": { "vue-eslint-parser": "^5.0.0" @@ -3916,16 +3927,6 @@ "integrity": "sha1-NfDVy8ZMLj7WLpO0saevBbp+1Nc=", "dev": true }, - "eslint-scope": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz", - "integrity": "sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=", - "dev": true, - "requires": { - "esrecurse": "^4.1.0", - "estraverse": "^4.1.1" - } - }, "eslint-utils": { "version": "1.4.3", "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz", diff --git a/src/mixin.js b/src/mixin.js index defb723..b8e82cb 100644 --- a/src/mixin.js +++ b/src/mixin.js @@ -28,5 +28,17 @@ export default { return oStyle; }, + alignCls (column, row = {}) { + let cellClassName = ''; + if (row.cellClassName && column.key && row.cellClassName[column.key]) { + cellClassName = row.cellClassName[column.key]; + } + return [ + { + [`${cellClassName}`]: cellClassName, // cell className + [`${column.className}`]: column.className, // column className + }, + ]; + }, }, }; diff --git a/src/table.vue b/src/table.vue index fab5ea7..2864467 100644 --- a/src/table.vue +++ b/src/table.vue @@ -30,6 +30,7 @@ :no-data="noData" :scrollTop="scrollTop" :hoverIndex="hoverIndex" + :selectedColor="selectedColor" @scroll.native.passive="syncScroll" @on-toggle-select="toggleSelect" > @@ -69,6 +70,7 @@ :rowHeight="rowHeight" :scrollTop="scrollTop" :hoverIndex="hoverIndex" + :selectedColor="selectedColor" @on-toggle-select="toggleSelect" > @@ -107,6 +109,7 @@ :rowHeight="rowHeight" :scrollTop="scrollTop" :hoverIndex="hoverIndex" + :selectedColor="selectedColor" @on-toggle-select="toggleSelect" > @@ -272,7 +275,17 @@ export default { fixedHeadTop: { type: Number, default: 0 - } + }, + selectedColor: { + type: String, + default: '', + }, + rowClassName: { + type: Function, + default: () => { + return ''; + }, + }, }, data(){ return { diff --git a/src/tableBody.vue b/src/tableBody.vue index de60c6e..2f1e59d 100644 --- a/src/tableBody.vue +++ b/src/tableBody.vue @@ -16,6 +16,7 @@ :onlyFixed="onlyFixed" :rowHeight="rowHeight[index]" :hoverIndex="hoverIndex" + :style="[row._isChecked ? selectedCls : '']" @on-toggle-select="toggleSelect" @on-toggle-expand="toggleExpand" > @@ -73,7 +74,11 @@ export default { hoverIndex: { type: Number | undefined, required: true - } + }, + selectedColor: { + type: String, + default: '', + }, }, computed: { style() { @@ -91,7 +96,13 @@ export default { } }); return render; - } + }, + selectedCls() { + const flag = { + 'background-color': this.selectedColor, + } + return flag + }, }, watch: { scrollTop(scrollTop) { diff --git a/src/tableTd.vue b/src/tableTd.vue index 8d81715..cf03150 100644 --- a/src/tableTd.vue +++ b/src/tableTd.vue @@ -1,11 +1,6 @@