vue-table-module
Version:
表格组件，支持合并单元格，表格滚动，自定义单元格显示内容
1,603 lines (1,523 loc) • 57.3 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["vue-table-module"] = factory();
else
root["vue-table-module"] = factory();
})((typeof self !== 'undefined' ? self : this), function() {
return /******/ (function() { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ 251:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"default": function() { return /* binding */ components_scroll; }
});
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/vue-table/components/scroll.vue?vue&type=template&id=f09d21f4&
var render = function render() {
var _vm = this,
_c = _vm._self._c;
return _c('div', {
ref: "wrap"
}, [_vm.navigation ? _c('div', {
class: _vm.leftSwitchClass,
style: _vm.leftSwitch,
on: {
"click": _vm.leftSwitchClick
}
}, [_vm._t("left-switch")], 2) : _vm._e(), _vm.navigation ? _c('div', {
class: _vm.rightSwitchClass,
style: _vm.rightSwitch,
on: {
"click": _vm.rightSwitchClick
}
}, [_vm._t("right-switch")], 2) : _vm._e(), _c('div', {
ref: "realBox",
style: _vm.pos,
on: {
"mouseenter": _vm.enter,
"mouseleave": _vm.leave,
"touchstart": _vm.touchStart,
"touchmove": _vm.touchMove,
"touchend": _vm.touchEnd
}
}, [_c('div', {
ref: "slotList",
style: _vm.float
}, [_vm._t("default")], 2), _c('div', {
style: _vm.float,
domProps: {
"innerHTML": _vm._s(_vm.copyHtml)
}
})])]);
};
var staticRenderFns = [];
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/vue-table/components/scroll.vue?vue&type=script&lang=js&
__webpack_require__(708)();
const arrayEqual = __webpack_require__(357);
const copyObj = __webpack_require__(262);
/* harmony default export */ var scrollvue_type_script_lang_js_ = ({
name: 'vue-seamless-scroll',
data() {
return {
xPos: 0,
yPos: 0,
delay: 0,
copyHtml: '',
height: 0,
width: 0,
// 外容器宽度
realBoxWidth: 0 // 内容实际宽度
};
},
props: {
data: {
type: Array,
default: () => {
return [];
}
},
classOption: {
type: Object,
default: () => {
return {};
}
}
},
computed: {
leftSwitchState() {
return this.xPos < 0;
},
rightSwitchState() {
return Math.abs(this.xPos) < this.realBoxWidth - this.width;
},
leftSwitchClass() {
return this.leftSwitchState ? '' : this.options.switchDisabledClass;
},
rightSwitchClass() {
return this.rightSwitchState ? '' : this.options.switchDisabledClass;
},
leftSwitch() {
return {
position: 'absolute',
margin: `${this.height / 2}px 0 0 -${this.options.switchOffset}px`,
transform: 'translate(-100%,-50%)'
};
},
rightSwitch() {
return {
position: 'absolute',
margin: `${this.height / 2}px 0 0 ${this.width + this.options.switchOffset}px`,
transform: 'translateY(-50%)'
};
},
float() {
return this.isHorizontal ? {
float: 'left',
overflow: 'hidden'
} : {
overflow: 'hidden'
};
},
pos() {
return {
transform: `translate(${this.xPos}px,${this.yPos}px)`,
transition: `all ${this.ease} ${this.delay}ms`,
overflow: 'hidden'
};
},
defaultOption() {
return {
step: 1,
//步长
limitMoveNum: 5,
//启动无缝滚动最小数据数
hoverStop: true,
//是否启用鼠标hover控制
direction: 1,
// 0 往下 1 往上 2向左 3向右
openTouch: true,
//开启移动端touch
singleHeight: 0,
//单条数据高度有值hoverStop关闭
singleWidth: 0,
//单条数据宽度有值hoverStop关闭
waitTime: 1000,
//单步停止等待时间
switchOffset: 30,
autoPlay: true,
navigation: false,
switchSingleStep: 134,
switchDelay: 400,
switchDisabledClass: 'disabled',
isSingleRemUnit: false // singleWidth/singleHeight 是否开启rem度量
};
},
options() {
return copyObj({}, this.defaultOption, this.classOption);
},
navigation() {
return this.options.navigation;
},
autoPlay() {
if (this.navigation) return false;
return this.options.autoPlay;
},
scrollSwitch() {
return this.data.length >= this.options.limitMoveNum;
},
hoverStopSwitch() {
return this.options.hoverStop && this.autoPlay && this.scrollSwitch;
},
canTouchScroll() {
return this.options.openTouch;
},
isHorizontal() {
return this.options.direction > 1;
},
baseFontSize() {
return this.options.isSingleRemUnit ? parseInt(window.getComputedStyle(document.documentElement, null).fontSize) : 1;
},
realSingleStopWidth() {
return this.options.singleWidth * this.baseFontSize;
},
realSingleStopHeight() {
return this.options.singleHeight * this.baseFontSize;
},
step() {
let singleStep;
let step = this.options.step;
if (this.isHorizontal) {
singleStep = this.realSingleStopWidth;
} else {
singleStep = this.realSingleStopHeight;
}
if (singleStep > 0 && singleStep % step > 0) {
console.error('如果设置了单步滚动,step需是单步大小的约数,否则无法保证单步滚动结束的位置是否准确。~~~~~');
}
return step;
}
},
methods: {
reset() {
this._cancle();
this._initMove();
},
leftSwitchClick() {
if (!this.leftSwitchState) return;
// 小于单步距离
if (Math.abs(this.xPos) < this.options.switchSingleStep) {
this.xPos = 0;
return;
}
this.xPos += this.options.switchSingleStep;
},
rightSwitchClick() {
if (!this.rightSwitchState) return;
// 小于单步距离
if (this.realBoxWidth - this.width + this.xPos < this.options.switchSingleStep) {
this.xPos = this.width - this.realBoxWidth;
return;
}
this.xPos -= this.options.switchSingleStep;
},
_cancle() {
cancelAnimationFrame(this.reqFrame || '');
},
touchStart(e) {
if (!this.canTouchScroll) return;
let timer;
const touch = e.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
const {
waitTime,
singleHeight,
singleWidth
} = this.options;
this.startPos = {
x: touch.pageX,
y: touch.pageY
}; //取第一个touch的坐标值
this.startPosY = this.yPos; //记录touchStart时候的posY
this.startPosX = this.xPos; //记录touchStart时候的posX
if (!!singleHeight && !!singleWidth) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
this._cancle();
}, waitTime + 20);
} else {
this._cancle();
}
},
touchMove(e) {
//当屏幕有多个touch或者页面被缩放过，就不执行move操作
if (!this.canTouchScroll || e.targetTouches.length > 1 || e.scale && e.scale !== 1) return;
const touch = e.targetTouches[0];
const {
direction
} = this.options;
this.endPos = {
x: touch.pageX - this.startPos.x,
y: touch.pageY - this.startPos.y
};
event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
const dir = Math.abs(this.endPos.x) < Math.abs(this.endPos.y) ? 1 : 0; //dir，1表示纵向滑动，0为横向滑动
if (dir === 1 && direction < 2) {
// 表示纵向滑动 && 运动方向为上下
this.yPos = this.startPosY + this.endPos.y;
} else if (dir === 0 && direction > 1) {
// 为横向滑动 && 运动方向为左右
this.xPos = this.startPosX + this.endPos.x;
}
},
touchEnd() {
if (!this.canTouchScroll) return;
let timer;
const direction = this.options.direction;
this.delay = 50;
if (direction === 1) {
if (this.yPos > 0) this.yPos = 0;
} else if (direction === 0) {
let h = this.realBoxHeight / 2 * -1;
if (this.yPos < h) this.yPos = h;
} else if (direction === 2) {
if (this.xPos > 0) this.xPos = 0;
} else if (direction === 3) {
let w = this.realBoxWidth * -1;
if (this.xPos < w) this.xPos = w;
}
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
this.delay = 0;
this._move();
}, this.delay);
},
enter() {
if (this.hoverStopSwitch) this._stopMove();
},
leave() {
if (this.hoverStopSwitch) this._startMove();
},
_move() {
// 鼠标移入时拦截_move()
if (this.isHover) return;
this._cancle(); //进入move立即先清除动画 防止频繁touchMove导致多动画同时进行
this.reqFrame = requestAnimationFrame(function () {
const h = this.realBoxHeight / 2; //实际高度
const w = this.realBoxWidth / 2; //宽度
let {
direction,
waitTime
} = this.options;
let {
step
} = this;
if (direction === 1) {
// 上
if (Math.abs(this.yPos) >= h) {
this.$emit('ScrollEnd');
this.yPos = 0;
}
this.yPos -= step;
} else if (direction === 0) {
// 下
if (this.yPos >= 0) {
this.$emit('ScrollEnd');
this.yPos = h * -1;
}
this.yPos += step;
} else if (direction === 2) {
// 左
if (Math.abs(this.xPos) >= w) {
this.$emit('ScrollEnd');
this.xPos = 0;
}
this.xPos -= step;
} else if (direction === 3) {
// 右
if (this.xPos >= 0) {
this.$emit('ScrollEnd');
this.xPos = w * -1;
}
this.xPos += step;
}
if (this.singleWaitTime) clearTimeout(this.singleWaitTime);
if (!!this.realSingleStopHeight) {
//是否启动了单行暂停配置
if (Math.abs(this.yPos) % this.realSingleStopHeight < step) {
// 符合条件暂停waitTime
this.singleWaitTime = setTimeout(() => {
this._move();
}, waitTime);
} else {
this._move();
}
} else if (!!this.realSingleStopWidth) {
if (Math.abs(this.xPos) % this.realSingleStopWidth < step) {
// 符合条件暂停waitTime
this.singleWaitTime = setTimeout(() => {
this._move();
}, waitTime);
} else {
this._move();
}
} else {
this._move();
}
}.bind(this));
},
_initMove() {
this.$nextTick(() => {
const {
switchDelay
} = this.options;
const {
autoPlay,
isHorizontal
} = this;
this._dataWarm(this.data);
this.copyHtml = ''; //清空copy
if (isHorizontal) {
this.height = this.$refs.wrap.offsetHeight;
this.width = this.$refs.wrap.offsetWidth;
let slotListWidth = this.$refs.slotList.offsetWidth;
// 水平滚动设置warp width
if (autoPlay) {
// 修正offsetWidth四舍五入
slotListWidth = slotListWidth * 2 + 1;
}
this.$refs.realBox.style.width = slotListWidth + 'px';
this.realBoxWidth = slotListWidth;
}
if (autoPlay) {
this.ease = 'ease-in';
this.delay = 0;
} else {
this.ease = 'linear';
this.delay = switchDelay;
return;
}
// 是否可以滚动判断
if (this.scrollSwitch) {
let timer;
if (timer) clearTimeout(timer);
this.copyHtml = this.$refs.slotList.innerHTML;
setTimeout(() => {
this.realBoxHeight = this.$refs.realBox.offsetHeight;
this._move();
}, 0);
} else {
this._cancle();
this.yPos = this.xPos = 0;
}
});
},
_dataWarm(data) {
if (data.length > 100) {
console.warn(`数据达到了${data.length}条有点多哦~,可能会造成部分老旧浏览器卡顿。`);
}
},
_startMove() {
this.isHover = false; //开启_move
this._move();
},
_stopMove() {
this.isHover = true; //关闭_move
// 防止频频hover进出单步滚动,导致定时器乱掉
if (this.singleWaitTime) clearTimeout(this.singleWaitTime);
this._cancle();
}
},
mounted() {
this._initMove();
},
watch: {
data(newData, oldData) {
this._dataWarm(newData);
//监听data是否有变更
if (!arrayEqual(newData, oldData)) {
this.reset();
}
},
autoPlay(bol) {
if (bol) {
this.reset();
} else {
this._stopMove();
}
}
},
beforeCreate() {
this.reqFrame = null; // move动画的animationFrame定时器
this.singleWaitTime = null; // single 单步滚动的定时器
this.isHover = false; // mouseenter mouseleave 控制this._move()的开关
this.ease = 'ease-in';
},
beforeDestroy() {
this._cancle();
clearTimeout(this.singleWaitTime);
}
});
;// CONCATENATED MODULE: ./src/package/vue-table/components/scroll.vue?vue&type=script&lang=js&
/* harmony default export */ var components_scrollvue_type_script_lang_js_ = (scrollvue_type_script_lang_js_);
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(1);
;// CONCATENATED MODULE: ./src/package/vue-table/components/scroll.vue
/* normalize component */
;
var component = (0,componentNormalizer/* default */.Z)(
components_scrollvue_type_script_lang_js_,
render,
staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var components_scroll = (component.exports);
/***/ }),
/***/ 808:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"default": function() { return /* binding */ tem; }
});
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/vue-table/components/tem.vue?vue&type=template&id=0eae43fa&
var render = function render() {
var _vm = this,
_c = _vm._self._c;
return _c('div', [_vm._t("default")], 2);
};
var staticRenderFns = [];
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/vue-table/components/tem.vue?vue&type=script&lang=js&
/* harmony default export */ var temvue_type_script_lang_js_ = ({
name: 'tem'
});
;// CONCATENATED MODULE: ./src/package/vue-table/components/tem.vue?vue&type=script&lang=js&
/* harmony default export */ var components_temvue_type_script_lang_js_ = (temvue_type_script_lang_js_);
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(1);
;// CONCATENATED MODULE: ./src/package/vue-table/components/tem.vue
/* normalize component */
;
var component = (0,componentNormalizer/* default */.Z)(
components_temvue_type_script_lang_js_,
render,
staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var tem = (component.exports);
/***/ }),
/***/ 717:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"default": function() { return /* binding */ vue_table; }
});
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/vue-table/index.vue?vue&type=template&id=3431ef10&scoped=true&
var render = function render() {
var _vm = this,
_c = _vm._self._c;
return _c('div', {
staticClass: "vTable-box",
class: _vm.styleClassName
}, [_c('div', {
staticClass: "vTable-title"
}, [_c('el-table', {
staticStyle: {
"width": "100%"
},
attrs: {
"border": _vm.styleType === 'border',
"data": _vm.tableData
}
}, [_vm.hasIndex ? _c('el-table-column', {
attrs: {
"label": _vm.indexName,
"type": "index",
"width": "50"
}
}) : _vm._e(), _vm._l(_vm.tableColums, function (item) {
return _c('el-table-column', {
key: item.code,
attrs: {
"label": item.name,
"prop": item.code,
"show-overflow-tooltip": item.showOverflowTooltip,
"min-width": item.minWidth,
"width": item.width,
"align": item.align
}
});
})], 2)], 1), _c('div', {
staticClass: "vTable-content"
}, [_c(_vm.isScroll ? 'vscroll' : 'tem', {
tag: "component",
style: {
'height': _vm.contentHeight
},
attrs: {
"data": _vm.tableData,
"class-option": _vm.defaultOption
}
}, [_c('el-table', {
staticStyle: {
"width": "100%"
},
attrs: {
"data": _vm.tableData,
"span-method": _vm.objectSpanMethod,
"border": _vm.styleType === 'border',
"show-header": false
}
}, [_vm.hasIndex ? _c('el-table-column', {
attrs: {
"type": "index",
"label": _vm.indexName,
"width": "50"
},
scopedSlots: _vm._u([{
key: "default",
fn: function ({
row,
column,
$index
}) {
return [_c('div', {
class: _vm.indexStyle($index + 1)
}, [_vm._v(_vm._s(_vm.indexVal ? _vm.indexVal(row, column, $index) : ++$index))])];
}
}], null, false, 778636405)
}) : _vm._e(), _vm._l(_vm.tableColums, function (item) {
return _c('el-table-column', {
key: item.code,
attrs: {
"label": item.name,
"prop": item.code,
"show-overflow-tooltip": item.showOverflowTooltip,
"width": item.width,
"min-width": item.minWidth,
"align": item.align
},
scopedSlots: _vm._u([{
key: "default",
fn: function ({
row,
column,
$index
}) {
return [_vm.$scopedSlots[column.property] ? _vm._t(column.property, null, {
"row": row,
"column": column,
"$index": $index
}) : _c('div', [_vm._v(_vm._s(item.render ? item.render(row, column, $index) : row[column.property]))])];
}
}], null, true)
});
})], 2)], 1)], 1)]);
};
var staticRenderFns = [];
// EXTERNAL MODULE: ./node_modules/vue-seamless-scroll/dist/vue-seamless-scroll.min.js
var vue_seamless_scroll_min = __webpack_require__(39);
var vue_seamless_scroll_min_default = /*#__PURE__*/__webpack_require__.n(vue_seamless_scroll_min);
// EXTERNAL MODULE: ./src/package/vue-table/components/scroll.vue + 3 modules
var components_scroll = __webpack_require__(251);
// EXTERNAL MODULE: ./src/package/vue-table/components/tem.vue + 3 modules
var tem = __webpack_require__(808);
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/vue-table/index.vue?vue&type=script&lang=jsx&
/* harmony default export */ var vue_tablevue_type_script_lang_jsx_ = ({
name: 'vue-table',
components: {
vueSeamlessScroll: (vue_seamless_scroll_min_default()),
vscroll: components_scroll["default"],
tem: tem["default"]
},
props: {
hasIndex: {
type: Boolean,
default: false
},
hasIndexStyle: {
type: Boolean,
default: false
},
indexName: {
type: String,
default: '序号'
},
tableData: {
type: Array,
default: () => []
},
tableColums: {
type: Array,
default: () => []
},
rowSpanCodeList: {
type: Array,
default: () => []
},
columnSpanCodeList: {
type: Array,
default: () => []
},
styleType: {
type: String,
default: 'line'
},
isScroll: {
type: Boolean,
default: false
},
scrollOptions: {
type: Object,
default: () => ({})
},
indexVal: {}
},
data() {
return {
contentHeight: '200px'
};
},
computed: {
defaultOption() {
const defaultOpt = {
step: 0.5,
// 数值越大速度滚动越快
limitMoveNum: 5,
// 开始无缝滚动的数据量
hoverStop: true,
// 是否开启鼠标悬停stop
direction: 1,
// 0向下 1向上 2向左 3向右
openWatch: true,
// 开启数据实时监控刷新dom
singleHeight: 0,
// 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0,
// 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
};
return {
...defaultOpt,
...this.scrollOptions
};
},
indexStyle() {
return index => {
if (!this.hasIndexStyle) {
return '';
}
switch (index) {
case 1:
return 'table-index table-index1';
break;
case 2:
return 'table-index table-index2';
break;
case 3:
return 'table-index table-index3';
break;
default:
return 'table-index';
break;
}
};
},
styleClassName() {
return `vTable-style-${this.styleType}`;
}
},
mounted() {
const dom = document.querySelector('.vTable-content');
let height = 200;
if (dom) {
height = dom.offsetHeight;
}
this.contentHeight = height + 'px';
},
methods: {
objectSpanMethod({
row,
column,
rowIndex,
columnIndex
}) {
const {
rowSpanCodeList,
columnSpanCodeList
} = this;
if ((!rowSpanCodeList || !rowSpanCodeList.length) && (!columnSpanCodeList || !columnSpanCodeList.length)) {
return false;
}
let code = column.property; // 当前单元格code
let colspanCount = 1; // 合并列数
let rowspanCount = 1; // 合并行数
// 合并行处理
if (rowSpanCodeList.includes(code)) {
rowspanCount = this.getRowspanCount(rowIndex, code);
}
// 合并列处理
columnSpanCodeList.map(item => {
if (item.includes(code)) {
colspanCount = this.getColspanCount(rowIndex, code, item);
}
});
return {
rowspan: rowspanCount,
colspan: colspanCount
};
},
// 计算合并行的数量
getRowspanCount(rowIndex, code) {
const {
tableData
} = this;
const currentLineValue = tableData[rowIndex][code]; // 当前行value
const LastLineValue = tableData[rowIndex - 1] && tableData[rowIndex - 1][code]; // 上一行value
// 当前计算行 与上一行 数据相同时 上一行已经计算过合并行数量 则当前计算行的合并行数量为0
if (rowIndex !== 0 && currentLineValue === LastLineValue && this.check(rowIndex, code, 'last')) {
return 0;
}
let rowspanCount = 0; // 合并行数默认为0
tableData.some((item, index) => {
if (index >= rowIndex && item[code] === currentLineValue) {
rowspanCount++;
}
// 避免相同code行不连续
if (rowspanCount > 0 && tableData[index + 1] && currentLineValue !== tableData[index + 1][code]) {
return true;
}
// 左侧 合并行的数据不同时 重新合并
const flag = this.check(rowIndex, code, 'next');
if (rowspanCount > 0 && !flag) {
return true;
}
});
return rowspanCount;
},
check(rowIndex, code, type) {
const {
tableData,
rowSpanCodeList
} = this;
const currentLine = tableData[rowIndex];
const lastLine = type === 'last' ? tableData[rowIndex - 1] : tableData[rowIndex + 1];
const lastRowSpanCode = rowSpanCodeList.slice(0, rowSpanCodeList.indexOf(code));
let flag = true;
lastRowSpanCode.map(item => {
if (lastLine && currentLine[item] !== lastLine[item]) {
flag = false;
}
});
return flag;
},
// 计算合并列的数量
getColspanCount(rowIndex, code, columnSpanCodeList) {
const {
tableData
} = this;
const currentColIndex = columnSpanCodeList.indexOf(code); // 当前列序号
const currentColValue = tableData[rowIndex][code]; // 当前列value
const lastColValue = currentColIndex === 0 ? '' : tableData[rowIndex][columnSpanCodeList[currentColIndex - 1]]; // 上一列value
if (currentColIndex !== 0 && currentColValue === lastColValue) {
return 0;
}
let colspanCount = 0;
columnSpanCodeList.some((code, index) => {
if (index >= currentColIndex && tableData[rowIndex][code] === currentColValue) {
colspanCount++;
}
if (colspanCount > 0 && currentColValue !== tableData[rowIndex][code]) {
return true;
}
});
return colspanCount;
}
}
});
;// CONCATENATED MODULE: ./src/package/vue-table/index.vue?vue&type=script&lang=jsx&
/* harmony default export */ var package_vue_tablevue_type_script_lang_jsx_ = (vue_tablevue_type_script_lang_jsx_);
;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-64.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-64.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-64.use[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/vue-table/index.vue?vue&type=style&index=0&id=3431ef10&prod&lang=scss&scoped=true&
// extracted by mini-css-extract-plugin
;// CONCATENATED MODULE: ./src/package/vue-table/index.vue?vue&type=style&index=0&id=3431ef10&prod&lang=scss&scoped=true&
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(1);
;// CONCATENATED MODULE: ./src/package/vue-table/index.vue
;
/* normalize component */
var component = (0,componentNormalizer/* default */.Z)(
package_vue_tablevue_type_script_lang_jsx_,
render,
staticRenderFns,
false,
null,
"3431ef10",
null
)
/* harmony default export */ var vue_table = (component.exports);
/***/ }),
/***/ 1:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ Z: function() { return /* binding */ normalizeComponent; }
/* harmony export */ });
/* globals __VUE_SSR_CONTEXT__ */
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.
function normalizeComponent(
scriptExports,
render,
staticRenderFns,
functionalTemplate,
injectStyles,
scopeId,
moduleIdentifier /* server only */,
shadowMode /* vue-cli only */
) {
// Vue.extend constructor export interop
var options =
typeof scriptExports === 'function' ? scriptExports.options : scriptExports
// render functions
if (render) {
options.render = render
options.staticRenderFns = staticRenderFns
options._compiled = true
}
// functional template
if (functionalTemplate) {
options.functional = true
}
// scopedId
if (scopeId) {
options._scopeId = 'data-v-' + scopeId
}
var hook
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__
}
// inject component styles
if (injectStyles) {
injectStyles.call(this, context)
}
// register component module identifier for async chunk inferrence
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier)
}
}
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook
} else if (injectStyles) {
hook = shadowMode
? function () {
injectStyles.call(
this,
(options.functional ? this.parent : this).$root.$options.shadowRoot
)
}
: injectStyles
}
if (hook) {
if (options.functional) {
// for template-only hot-reload because in that case the render fn doesn't
// go through the normalizer
options._injectStyles = hook
// register for functional component in vue file
var originalRender = options.render
options.render = function renderWithStyleInjection(h, context) {
hook.call(context)
return originalRender(h, context)
}
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate
options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
}
}
return {
exports: scriptExports,
options: options
}
}
/***/ }),
/***/ 708:
/***/ (function(module) {
/**
* @desc AnimationFrame简单兼容hack
*/
var animationFrame = function animationFrame() {
window.cancelAnimationFrame = function () {
return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame || function (id) {
return window.clearTimeout(id);
};
}();
window.requestAnimationFrame = function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
return window.setTimeout(callback, 1000 / 60);
};
}();
};
module.exports = animationFrame;
/***/ }),
/***/ 357:
/***/ (function(module) {
/**
* @desc 判断数组是否相等
* @param {arr1,arr2}
* @return {Boolean}
*/
var arrayEqual = function arrayEqual(arr1, arr2) {
if (arr1 === arr2) return true;
if (arr1.length !== arr2.length) return false;
for (var i = 0; i < arr1.length; ++i) {
if (arr1[i] !== arr2[i]) return false;
}
return true;
};
module.exports = arrayEqual;
/***/ }),
/***/ 262:
/***/ (function(module) {
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
/**
* @desc 深浅合并拷贝
*/
function copyObj() {
if (!Array.isArray) {
Array.isArray = function (arg) {
return Object.prototype.toString.call(arg) === '[object Array]';
};
}
var name = void 0,
options = void 0,
src = void 0,
copy = void 0,
copyIsArray = void 0,
clone = void 0,
i = 1,
target = arguments[0] || {},
// 使用||运算符，排除隐式强制类型转换为false的数据类型
deep = false,
len = arguments.length;
if (typeof target === 'boolean') {
deep = target;
target = arguments[1] || {};
i++;
}
if ((typeof target === 'undefined' ? 'undefined' : _typeof(target)) !== 'object' && typeof target !== 'function') {
target = {};
}
// 如果arguments.length === 1 或typeof arguments[0] === 'boolean',且存在arguments[1]，则直接返回target对象
if (i === len) {
return target;
}
for (; i < len; i++) {
//所以如果源对象中数据类型为Undefined或Null那么就会跳过本次循环，接着循环下一个源对象
if ((options = arguments[i]) != null) {
// 如果遇到源对象的数据类型为Boolean, Number for in循环会被跳过，不执行for in循环// src用于判断target对象是否存在name属性
for (name in options) {
// src用于判断target对象是否存在name属性
src = target[name];
// 需要复制的属性当前源对象的name属性
copy = options[name];
// 判断copy是否是数组
copyIsArray = Array.isArray(copy);
// 如果是深复制且copy是一个对象或数组则需要递归直到copy成为一个基本数据类型为止
if (deep && copy && ((typeof copy === 'undefined' ? 'undefined' : _typeof(copy)) === 'object' || copyIsArray)) {
if (copyIsArray) {
copyIsArray = false;
// 如果目标对象存在name属性且是一个数组
// 则使用目标对象的name属性，否则重新创建一个数组，用于复制
clone = src && Array.isArray(src) ? src : [];
} else {
// 如果目标对象存在name属性且是一个对象则使用目标对象的name属性，否则重新创建一个对象，用于复制
clone = src && (typeof src === 'undefined' ? 'undefined' : _typeof(src)) === 'object' ? src : {};
}
// 深复制，所以递归调用copyObject函数
// 返回值为target对象，即clone对象
// copy是一个源对象
target[name] = copyObj(deep, clone, copy);
} else if (copy !== undefined) {
// 浅复制，直接复制到target对象上
target[name] = copy;
}
}
}
}
return target;
}
module.exports = copyObj;
/***/ }),
/***/ 39:
/***/ (function(module) {
!function (t, i) {
true ? module.exports = i() : 0;
}("undefined" != typeof self ? self : this, function () {
return function (t) {
function i(o) {
if (e[o]) return e[o].exports;
var n = e[o] = {
i: o,
l: !1,
exports: {}
};
return t[o].call(n.exports, n, n.exports, i), n.l = !0, n.exports;
}
var e = {};
return i.m = t, i.c = e, i.d = function (t, e, o) {
i.o(t, e) || Object.defineProperty(t, e, {
configurable: !1,
enumerable: !0,
get: o
});
}, i.n = function (t) {
var e = t && t.__esModule ? function () {
return t.default;
} : function () {
return t;
};
return i.d(e, "a", e), e;
}, i.o = function (t, i) {
return Object.prototype.hasOwnProperty.call(t, i);
}, i.p = "", i(i.s = 1);
}([function (t, i, e) {
"use strict";
Object.defineProperty(i, "__esModule", {
value: !0
}), e(4)();
var o = e(5),
n = e(6);
i.default = {
name: "vue-seamless-scroll",
data: function () {
return {
xPos: 0,
yPos: 0,
delay: 0,
copyHtml: "",
height: 0,
width: 0,
realBoxWidth: 0
};
},
props: {
data: {
type: Array,
default: function () {
return [];
}
},
classOption: {
type: Object,
default: function () {
return {};
}
}
},
computed: {
leftSwitchState: function () {
return this.xPos < 0;
},
rightSwitchState: function () {
return Math.abs(this.xPos) < this.realBoxWidth - this.width;
},
leftSwitchClass: function () {
return this.leftSwitchState ? "" : this.options.switchDisabledClass;
},
rightSwitchClass: function () {
return this.rightSwitchState ? "" : this.options.switchDisabledClass;
},
leftSwitch: function () {
return {
position: "absolute",
margin: this.height / 2 + "px 0 0 -" + this.options.switchOffset + "px",
transform: "translate(-100%,-50%)"
};
},
rightSwitch: function () {
return {
position: "absolute",
margin: this.height / 2 + "px 0 0 " + (this.width + this.options.switchOffset) + "px",
transform: "translateY(-50%)"
};
},
float: function () {
return this.isHorizontal ? {
float: "left",
overflow: "hidden"
} : {
overflow: "hidden"
};
},
pos: function () {
return {
transform: "translate(" + this.xPos + "px," + this.yPos + "px)",
transition: "all " + this.ease + " " + this.delay + "ms",
overflow: "hidden"
};
},
defaultOption: function () {
return {
step: 1,
limitMoveNum: 5,
hoverStop: !0,
direction: 1,
openTouch: !0,
singleHeight: 0,
singleWidth: 0,
waitTime: 1e3,
switchOffset: 30,
autoPlay: !0,
navigation: !1,
switchSingleStep: 134,
switchDelay: 400,
switchDisabledClass: "disabled",
isSingleRemUnit: !1
};
},
options: function () {
return n({}, this.defaultOption, this.classOption);
},
navigation: function () {
return this.options.navigation;
},
autoPlay: function () {
return !this.navigation && this.options.autoPlay;
},
scrollSwitch: function () {
return this.data.length >= this.options.limitMoveNum;
},
hoverStopSwitch: function () {
return this.options.hoverStop && this.autoPlay && this.scrollSwitch;
},
canTouchScroll: function () {
return this.options.openTouch;
},
isHorizontal: function () {
return this.options.direction > 1;
},
baseFontSize: function () {
return this.options.isSingleRemUnit ? parseInt(window.getComputedStyle(document.documentElement, null).fontSize) : 1;
},
realSingleStopWidth: function () {
return this.options.singleWidth * this.baseFontSize;
},
realSingleStopHeight: function () {
return this.options.singleHeight * this.baseFontSize;
},
step: function () {
var t = this.options.step;
return this.isHorizontal ? this.realSingleStopWidth : this.realSingleStopHeight, t;
}
},
methods: {
reset: function () {
this._cancle(), this._initMove();
},
leftSwitchClick: function () {
if (this.leftSwitchState) return Math.abs(this.xPos) < this.options.switchSingleStep ? void (this.xPos = 0) : void (this.xPos += this.options.switchSingleStep);
},
rightSwitchClick: function () {
if (this.rightSwitchState) return this.realBoxWidth - this.width + this.xPos < this.options.switchSingleStep ? void (this.xPos = this.width - this.realBoxWidth) : void (this.xPos -= this.options.switchSingleStep);
},
_cancle: function () {
cancelAnimationFrame(this.reqFrame || "");
},
touchStart: function (t) {
var i = this;
if (this.canTouchScroll) {
var e = void 0,
o = t.targetTouches[0],
n = this.options,
s = n.waitTime,
r = n.singleHeight,
a = n.singleWidth;
this.startPos = {
x: o.pageX,
y: o.pageY
}, this.startPosY = this.yPos, this.startPosX = this.xPos, r && a ? (e && clearTimeout(e), e = setTimeout(function () {
i._cancle();
}, s + 20)) : this._cancle();
}
},
touchMove: function (t) {
if (!(!this.canTouchScroll || t.targetTouches.length > 1 || t.scale && 1 !== t.scale)) {
var i = t.targetTouches[0],
e = this.options.direction;
this.endPos = {
x: i.pageX - this.startPos.x,
y: i.pageY - this.startPos.y
}, event.preventDefault();
var o = Math.abs(this.endPos.x) < Math.abs(this.endPos.y) ? 1 : 0;
1 === o && e < 2 ? this.yPos = this.startPosY + this.endPos.y : 0 === o && e > 1 && (this.xPos = this.startPosX + this.endPos.x);
}
},
touchEnd: function () {
var t = this;
if (this.canTouchScroll) {
var i = void 0,
e = this.options.direction;
if (this.delay = 50, 1 === e) this.yPos > 0 && (this.yPos = 0);else if (0 === e) {
var o = this.realBoxHeight / 2 * -1;
this.yPos < o && (this.yPos = o);
} else if (2 === e) this.xPos > 0 && (this.xPos = 0);else if (3 === e) {
var n = -1 * this.realBoxWidth;
this.xPos < n && (this.xPos = n);
}
i && clearTimeout(i), i = setTimeout(function () {
t.delay = 0, t._move();
}, this.delay);
}
},
enter: function () {
this.hoverStopSwitch && this._stopMove();
},
leave: function () {
this.hoverStopSwitch && this._startMove();
},
_move: function () {
this.isHover || (this._cancle(), this.reqFrame = requestAnimationFrame(function () {
var t = this,
i = this.realBoxHeight / 2,
e = this.realBoxWidth / 2,
o = this.options,
n = o.direction,
s = o.waitTime,
r = this.step;
1 === n ? (Math.abs(this.yPos) >= i && (this.$emit("ScrollEnd"), this.yPos = 0), this.yPos -= r) : 0 === n ? (this.yPos >= 0 && (this.$emit("ScrollEnd"), this.yPos = -1 * i), this.yPos += r) : 2 === n ? (Math.abs(this.xPos) >= e && (this.$emit("ScrollEnd"), this.xPos = 0), this.xPos -= r) : 3 === n && (this.xPos >= 0 && (this.$emit("ScrollEnd"), this.xPos = -1 * e), this.xPos += r), this.singleWaitTime && clearTimeout(this.singleWaitTime), this.realSingleStopHeight ? Math.abs(this.yPos) % this.realSingleStopHeight < r ? this.singleWaitTime = setTimeout(function () {
t._move();
}, s) : this._move() : this.realSingleStopWidth && Math.abs(this.xPos) % this.realSingleStopWidth < r ? this.singleWaitTime = setTimeout(function () {
t._move();
}, s) : this._move();
}.bind(this)));
},
_initMove: function () {
var t = this;
this.$nextTick(function () {
var i = t.options.switchDelay,
e = t.autoPlay,
o = t.isHorizontal;
if (t._dataWarm(t.data), t.copyHtml = "", o) {
t.height = t.$refs.wrap.offsetHeight, t.width = t.$refs.wrap.offsetWidth;
var n = t.$refs.slotList.offsetWidth;
e && (n = 2 * n + 1), t.$refs.realBox.style.width = n + "px", t.realBoxWidth = n;
}
if (!e) return t.ease = "linear", void (t.delay = i);
if (t.ease = "ease-in", t.delay = 0, t.scrollSwitch) {
t.copyHtml = t.$refs.slotList.innerHTML, setTimeout(function () {
t.realBoxHeight = t.$refs.realBox.offsetHeight, t._move();
}, 0);
} else t._cancle(), t.yPos = t.xPos = 0;
});
},
_dataWarm: function (t) {
t.length;
},
_startMove: function () {
this.isHover = !1, this._move();
},
_stopMove: function () {
this.isHover = !0, this.singleWaitTime && clearTimeout(this.singleWaitTime), this._cancle();
}
},
mounted: function () {
this._initMove();
},
watch: {
data: function (t, i) {
this._dataWarm(t), o(t, i) || this.reset();
},
autoPlay: function (t) {
t ? this.reset() : this._stopMove();
}
},
beforeCreate: function () {
this.reqFrame = null, this.singleWaitTime = null, this.isHover = !1, this.ease = "ease-in";
},
beforeDestroy: function () {
this._cancle(), clearTimeout(this.singleWaitTime);
}
};
}, function (t, i, e) {
"use strict";
Object.defineProperty(i, "__esModule", {
value: !0
});
var o = e(2),
n = function (t) {
return t && t.__esModule ? t : {
default: t
};
}(o);
n.default.install = function (t) {
var i = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
t.component(i.componentName || n.default.name, n.default);
}, "undefined" != typeof window && window.Vue && Vue.component(n.default.name, n.default), i.default = n.default;
}, function (t, i, e) {
"use strict";
Object.defineProperty(i, "__esModule", {
value: !0
});
var o = e(0),
n = e.n(o);
for (var s in o) "default" !== s && function (t) {
e.d(i, t, function () {
return o[t];
});
}(s);
var r = e(7),
a = e(3),
h = a(n.a, r.a, !1, null, null, null);
i.default = h.exports;
}, function (t, i) {
t.exports = function (t, i, e, o, n, s) {
var r,
a = t = t || {},
h = typeof t.default;
"object" !== h && "function" !== h || (r = t, a = t.default);
var l = "function" == typeof a ? a.options : a;
i && (l.render = i.render, l.staticRenderFns = i.staticRenderFns, l._compiled = !0), e && (l.functional = !0), n && (l._scopeId = n);
var c;
if (s ? (c = function (t) {
t = t || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, t || "undefined" == typeof __VUE_SSR_CONTEXT__ || (t = __VUE_SSR_CONTEXT__), o && o.call(this, t), t && t._registeredComponents && t._registeredComponents.add(s);
}, l._ssrRegister = c) : o && (c = o), c) {
var u = l.functional,
f = u ? l.render : l.beforeCreate;
u ? (l._injectStyles = c, l.render = function (t, i) {
return c.call(i), f(t, i);
}) : l.beforeCreate = f ? [].concat(f, c) : [c];
}
return {
esModule: r,
exports: a,
options: l
};
};
}, function (t, i) {
var e = function () {
window.cancelAnimationFrame = function () {
return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame || function (t) {
return window.clearTimeout(t);
};
}(), window.requestAnimationFrame = function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (t) {
return window.setTimeout(t, 1e3 / 60);
};
}();
};
t.exports = e;
}, function (t, i) {
var e = function (t, i) {
if (t === i) return !0;
if (t.length !== i.length) return !1;
for (var e = 0; e < t.length; ++e) if (t[e] !== i[e]) return !1;
return !0;
};
t.exports = e;
}, function (t, i) {
function e() {
Array.isArray || (Array.isArray = function (t) {
return "[object Array]" === Object.prototype.toString.call(t);
});
var t = void 0,
i = void 0,
n = void 0,
s = void 0,
r = void 0,
a = void 0,
h = 1,
l = arguments[0] || {},
c = !1,
u = arguments.length;
if ("boolean" == typeof l && (c = l, l = arguments[1] || {}, h++), "object" !== (void 0 === l ? "undefined" : o(l)) && "function" != typeof l && (l = {}), h === u) return l;
for (; h < u; h++) if (null != (i = arguments[h])) for (t in i) n = l[t], s = i[t], r = Array.isArray(s), c && s && ("object" === (void 0 === s ? "undefined" : o(s)) || r) ? (r ? (r = !1, a = n && Array.isArray(n) ? n : []) : a = n && "object" === (void 0 === n ? "undefined" : o(n)) ? n : {}, l[t] = e(c, a, s)) : void 0 !== s && (l[t] = s);
return l;
}
var o = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) {
return typeof t;
} : function (t) {
return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
};
t.exports = e;
}, function (t, i, e) {
"use strict";
var o = function () {
var t = this,
i = t.$createElement,
e = t._self._c || i;
return e("div", {
ref: "wrap"
}, [t.navigation ? e("div", {
class: t.leftSwitchClass,
style: t.leftSwitch,
on: {
click: t.leftSwitchClick
}
}, [t._t("left-switch")], 2) : t._e(), t._v(" "), t.navigation ? e("div", {
class: t.rightSwitchClass,
style: t.rightSwitch,
on: {
click: t.rightSwitchClick
}
}, [t._t("right-switch")], 2) : t._e(), t._v(" "), e("div", {
ref: "realBox",
style: t.pos,
on: {
mouseenter: t.enter,
mouseleave: t.leave,
touchstart: t.touchStart,
touchmove: t.touchMove,
touchend: t.touchEnd
}
}, [e("div", {
ref: "slotList",
style: t.float
}, [t._t("default")], 2), t._v(" "), e("div", {
style: t.float,
domProps: {
innerHTML: t._s(t.copyHtml)
}
})])]);
},
n = [],
s = {
render: o,
staticRenderFns: n
};
i.a = s;
}]).default;
});
/***/ }),
/***/ 458:
/***/ (function(module, __unused_webpack_exports, __web