lxm_front/vxe-table
1
0
Fork 0
mirror of synced 2025-12-11 00:28:09 +08:00
Code Issues Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
xuliangzhan
2019-04-29 22:12:23 +08:00
parent 8646381421
commit 83d02ca034
8 changed files with 137 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/views/Table1.vue
View File

@@ -47,7 +47,7 @@
<vxe-table-column prop="address" label="地址" width="300" fixed="right"></vxe-table-column>
</vxe-table> -->
<!-- <button @click="$refs.vTable.exportCsv()">导出</button>
<button @click="$refs.vTable.exportCsv()">导出</button>
<vxe-table
ref="vTable"
max-height="300"
@@ -66,7 +66,7 @@
<vxe-table-column prop="age" label="年龄" sortable width="200" :filters="[{label: '30', value: 30}, {label: 28, value: 28}, {label: 27, value: 27}, {label: 26, value: 26}]" :filterMethod="filterMethod"></vxe-table-column>
<vxe-table-column prop="sex" label="性别" width="200" :filters="[{label: '男', value: '1'}, {label: '女', value: '0'}]"></vxe-table-column>
<vxe-table-column prop="address" label="地址" width="300" fixed="right"></vxe-table-column>
</vxe-table> -->
</vxe-table>
<!-- <vxe-table
height="300"

64
lib/index.common.js
View File

@@ -4159,10 +4159,12 @@ var Tools = {
$table.collectColumn.splice([].indexOf.call($table.$refs.hideColumn.children, _vm.$el), 0, columnConfig);
}
},
getDomScrollPos: function getDomScrollPos() {
getDomNode: function getDomNode() {
return {
scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft
scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft,
visibleHeight: document.documentElement.clientHeight || document.body.clientHeight,
visibleWidth: document.documentElement.clientWidth || document.body.clientWidth
};
},
hasClass: function hasClass(elem, cls) {
@@ -5343,12 +5345,20 @@ function renderFixed(h, $table, fixedType) {
return column.visible;
});
},
isFilter: function isFilter() {
return this.visibleColumn.some(function (column) {
return column.filters && column.filters.length;
});
},
headerCtxMenu: function headerCtxMenu() {
return this.ctxMenuConfig.header && this.ctxMenuConfig.header.options ? this.ctxMenuConfig.header.options : [];
},
bodyCtxMenu: function bodyCtxMenu() {
return this.ctxMenuConfig.body && this.ctxMenuConfig.body.options ? this.ctxMenuConfig.body.options : [];
},
isCtxMenu: function isCtxMenu() {
return this.headerCtxMenu.length || this.bodyCtxMenu.length;
},
ctxMenuConfig: function ctxMenuConfig() {
return assign_default()({}, this.contextMenu);
}
@@ -5416,6 +5426,8 @@ function renderFixed(h, $table, fixedType) {
tableColumn = this.tableColumn,
collectColumn = this.collectColumn,
isGroup = this.isGroup,
isFilter = this.isFilter,
isCtxMenu = this.isCtxMenu,
loading = this.loading,
showHeader = this.showHeader,
resizable = this.resizable,
@@ -5487,37 +5499,40 @@ function renderFixed(h, $table, fixedType) {
'padding-bottom': "".concat(scrollXHeight, "px")
},
ref: 'resizeBar'
}) : _e(), loading ? h('div', {
class: ['vxe-table--loading']
}) : _e(),
/**
* 加载中
*/
h('div', {
class: ['vxe-table--loading'],
style: {
display: loading ? 'block' : 'none'
}
}, [h('div', {
class: 'vxe-table--spinner'
}, [h('div', {
class: 'spinner--bounce1'
}), h('div', {
class: 'spinner--bounce2'
})])]) : _e(), h('div', {
})]), h('div', {
class: ["vxe-table".concat(id, "-wrapper")],
ref: 'tableWrapper'
}, [
/**
* 筛选
*/
h('table-filter', {
isFilter ? h('table-filter', {
props: {
optimizeConfig: optimizeConfig,
filterStore: filterStore
},
ref: 'filterWrapper'
}),
}) : null,
/**
* 快捷菜单
*/
h('table-context-menu', {
isCtxMenu ? h('table-context-menu', {
props: {
ctxMenuStore: ctxMenuStore
},
ref: 'ctxWrapper'
})])]);
}) : null])]);
},
methods: {
clearSelection: function clearSelection() {
@@ -5842,11 +5857,10 @@ function renderFixed(h, $table, fixedType) {
* 快捷菜单事件处理
*/
handleContextmenuEvent: function handleContextmenuEvent(evnt) {
var headerCtxMenu = this.headerCtxMenu,
bodyCtxMenu = this.bodyCtxMenu,
var isCtxMenu = this.isCtxMenu,
ctxMenuConfig = this.ctxMenuConfig;
if (headerCtxMenu.length || bodyCtxMenu.length) {
if (isCtxMenu) {
// 右键头部
var headeWrapperNode = this.getEventTargetNode(evnt, this.$el, 'vxe-table--header-wrapper');
@@ -5865,6 +5879,7 @@ function renderFixed(h, $table, fixedType) {
}
this.closeContextMenu();
this.closeFilter();
},
/**
@@ -5884,8 +5899,13 @@ function renderFixed(h, $table, fixedType) {
} else if (options && options.length) {
if (!visibleMethod || visibleMethod(params, evnt)) {
evnt.preventDefault();
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var _Tools$getDomNode = tools.getDomNode(),
scrollTop = _Tools$getDomNode.scrollTop,
scrollLeft = _Tools$getDomNode.scrollLeft,
visibleHeight = _Tools$getDomNode.visibleHeight,
visibleWidth = _Tools$getDomNode.visibleWidth;
var top = evnt.clientY + scrollTop;
var left = evnt.clientX + scrollLeft;
@@ -5899,13 +5919,11 @@ function renderFixed(h, $table, fixedType) {
});
this.$nextTick(function () {
var viewHeight = document.documentElement.clientHeight || document.body.clientHeight;
var viewWidth = document.documentElement.clientWidth || document.body.clientWidth;
var ctxElem = _this4.$refs.ctxWrapper.$el;
var clientHeight = ctxElem.clientHeight;
var clientWidth = ctxElem.clientWidth;
var offsetTop = evnt.clientY + clientHeight - viewHeight;
var offsetLeft = evnt.clientX + clientWidth - viewWidth;
var offsetTop = evnt.clientY + clientHeight - visibleHeight;
var offsetLeft = evnt.clientX + clientWidth - visibleWidth;
if (offsetTop > -10) {
ctxMenuStore.style.top = "".concat(top - clientHeight, "px");
@@ -5920,6 +5938,8 @@ function renderFixed(h, $table, fixedType) {
}
}
}
this.closeFilter();
},
/**

2
lib/index.css
View File

File diff suppressed because one or more lines are too long

64
lib/index.umd.js
View File

@@ -4168,10 +4168,12 @@ var Tools = {
$table.collectColumn.splice([].indexOf.call($table.$refs.hideColumn.children, _vm.$el), 0, columnConfig);
}
},
getDomScrollPos: function getDomScrollPos() {
getDomNode: function getDomNode() {
return {
scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft
scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft,
visibleHeight: document.documentElement.clientHeight || document.body.clientHeight,
visibleWidth: document.documentElement.clientWidth || document.body.clientWidth
};
},
hasClass: function hasClass(elem, cls) {
@@ -5352,12 +5354,20 @@ function renderFixed(h, $table, fixedType) {
return column.visible;
});
},
isFilter: function isFilter() {
return this.visibleColumn.some(function (column) {
return column.filters && column.filters.length;
});
},
headerCtxMenu: function headerCtxMenu() {
return this.ctxMenuConfig.header && this.ctxMenuConfig.header.options ? this.ctxMenuConfig.header.options : [];
},
bodyCtxMenu: function bodyCtxMenu() {
return this.ctxMenuConfig.body && this.ctxMenuConfig.body.options ? this.ctxMenuConfig.body.options : [];
},
isCtxMenu: function isCtxMenu() {
return this.headerCtxMenu.length || this.bodyCtxMenu.length;
},
ctxMenuConfig: function ctxMenuConfig() {
return assign_default()({}, this.contextMenu);
}
@@ -5425,6 +5435,8 @@ function renderFixed(h, $table, fixedType) {
tableColumn = this.tableColumn,
collectColumn = this.collectColumn,
isGroup = this.isGroup,
isFilter = this.isFilter,
isCtxMenu = this.isCtxMenu,
loading = this.loading,
showHeader = this.showHeader,
resizable = this.resizable,
@@ -5496,37 +5508,40 @@ function renderFixed(h, $table, fixedType) {
'padding-bottom': "".concat(scrollXHeight, "px")
},
ref: 'resizeBar'
}) : _e(), loading ? h('div', {
class: ['vxe-table--loading']
}) : _e(),
/**
* 加载中
*/
h('div', {
class: ['vxe-table--loading'],
style: {
display: loading ? 'block' : 'none'
}
}, [h('div', {
class: 'vxe-table--spinner'
}, [h('div', {
class: 'spinner--bounce1'
}), h('div', {
class: 'spinner--bounce2'
})])]) : _e(), h('div', {
})]), h('div', {
class: ["vxe-table".concat(id, "-wrapper")],
ref: 'tableWrapper'
}, [
/**
* 筛选
*/
h('table-filter', {
isFilter ? h('table-filter', {
props: {
optimizeConfig: optimizeConfig,
filterStore: filterStore
},
ref: 'filterWrapper'
}),
}) : null,
/**
* 快捷菜单
*/
h('table-context-menu', {
isCtxMenu ? h('table-context-menu', {
props: {
ctxMenuStore: ctxMenuStore
},
ref: 'ctxWrapper'
})])]);
}) : null])]);
},
methods: {
clearSelection: function clearSelection() {
@@ -5851,11 +5866,10 @@ function renderFixed(h, $table, fixedType) {
* 快捷菜单事件处理
*/
handleContextmenuEvent: function handleContextmenuEvent(evnt) {
var headerCtxMenu = this.headerCtxMenu,
bodyCtxMenu = this.bodyCtxMenu,
var isCtxMenu = this.isCtxMenu,
ctxMenuConfig = this.ctxMenuConfig;
if (headerCtxMenu.length || bodyCtxMenu.length) {
if (isCtxMenu) {
// 右键头部
var headeWrapperNode = this.getEventTargetNode(evnt, this.$el, 'vxe-table--header-wrapper');
@@ -5874,6 +5888,7 @@ function renderFixed(h, $table, fixedType) {
}
this.closeContextMenu();
this.closeFilter();
},
/**
@@ -5893,8 +5908,13 @@ function renderFixed(h, $table, fixedType) {
} else if (options && options.length) {
if (!visibleMethod || visibleMethod(params, evnt)) {
evnt.preventDefault();
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var _Tools$getDomNode = tools.getDomNode(),
scrollTop = _Tools$getDomNode.scrollTop,
scrollLeft = _Tools$getDomNode.scrollLeft,
visibleHeight = _Tools$getDomNode.visibleHeight,
visibleWidth = _Tools$getDomNode.visibleWidth;
var top = evnt.clientY + scrollTop;
var left = evnt.clientX + scrollLeft;
@@ -5908,13 +5928,11 @@ function renderFixed(h, $table, fixedType) {
});
this.$nextTick(function () {
var viewHeight = document.documentElement.clientHeight || document.body.clientHeight;
var viewWidth = document.documentElement.clientWidth || document.body.clientWidth;
var ctxElem = _this4.$refs.ctxWrapper.$el;
var clientHeight = ctxElem.clientHeight;
var clientWidth = ctxElem.clientWidth;
var offsetTop = evnt.clientY + clientHeight - viewHeight;
var offsetLeft = evnt.clientX + clientWidth - viewWidth;
var offsetTop = evnt.clientY + clientHeight - visibleHeight;
var offsetLeft = evnt.clientX + clientWidth - visibleWidth;
if (offsetTop > -10) {
ctxMenuStore.style.top = "".concat(top - clientHeight, "px");
@@ -5929,6 +5947,8 @@ function renderFixed(h, $table, fixedType) {
}
}
}
this.closeFilter();
},
/**

2
lib/index.umd.min.js vendored
View File

File diff suppressed because one or more lines are too long

52
packages/table/src/table.js
View File

@@ -205,12 +205,18 @@ export default {
visibleColumn () {
return this.tableColumn.filter(column => column.visible)
},
isFilter () {
return this.visibleColumn.some(column => column.filters && column.filters.length)
},
headerCtxMenu () {
return this.ctxMenuConfig.header && this.ctxMenuConfig.header.options ? this.ctxMenuConfig.header.options : []
},
bodyCtxMenu () {
return this.ctxMenuConfig.body && this.ctxMenuConfig.body.options ? this.ctxMenuConfig.body.options : []
},
isCtxMenu () {
return this.headerCtxMenu.length || this.bodyCtxMenu.length
},
ctxMenuConfig () {
return Object.assign({}, this.contextMenu)
}
@@ -258,7 +264,7 @@ export default {
GlobalEvent.off(this, 'contextmenu')
},
render (h) {
let { _e, id, tableData, tableColumn, collectColumn, isGroup, loading, showHeader, resizable, border, stripe, highlightHoverRow, size, overflowX, scrollXHeight, optimizeConfig, columnStore, filterStore, ctxMenuStore } = this
let { _e, id, tableData, tableColumn, collectColumn, isGroup, isFilter, isCtxMenu, loading, showHeader, resizable, border, stripe, highlightHoverRow, size, overflowX, scrollXHeight, optimizeConfig, columnStore, filterStore, ctxMenuStore } = this
let { leftList, rightList } = columnStore
return h('div', {
class: ['vxe-table', size ? `size--${size}` : '', {
@@ -317,20 +323,19 @@ export default {
},
ref: 'resizeBar'
}) : _e(),
loading ? h('div', {
class: ['vxe-table--loading']
/**
* 加载中
*/
h('div', {
class: ['vxe-table--loading'],
style: {
display: loading ? 'block' : 'none'
}
}, [
h('div', {
class: 'vxe-table--spinner'
}, [
h('div', {
class: 'spinner--bounce1'
}),
h('div', {
class: 'spinner--bounce2'
})
])
]) : _e(),
})
]),
h('div', {
class: [`vxe-table${id}-wrapper`],
ref: 'tableWrapper'
@@ -338,22 +343,22 @@ export default {
/**
* 筛选
*/
h('table-filter', {
isFilter ? h('table-filter', {
props: {
optimizeConfig,
filterStore
},
ref: 'filterWrapper'
}),
}) : null,
/**
* 快捷菜单
*/
h('table-context-menu', {
isCtxMenu ? h('table-context-menu', {
props: {
ctxMenuStore
},
ref: 'ctxWrapper'
})
}) : null
])
])
},
@@ -625,8 +630,8 @@ export default {
* 快捷菜单事件处理
*/
handleContextmenuEvent (evnt) {
let { headerCtxMenu, bodyCtxMenu, ctxMenuConfig } = this
if (headerCtxMenu.length || bodyCtxMenu.length) {
let { isCtxMenu, ctxMenuConfig } = this
if (isCtxMenu) {
// 右键头部
let headeWrapperNode = this.getEventTargetNode(evnt, this.$el, 'vxe-table--header-wrapper')
if (headeWrapperNode.flag) {
@@ -641,6 +646,7 @@ export default {
}
}
this.closeContextMenu()
this.closeFilter()
},
/**
* 显示快捷菜单
@@ -654,8 +660,7 @@ export default {
} else if (options && options.length) {
if (!visibleMethod || visibleMethod(params, evnt)) {
evnt.preventDefault()
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
let { scrollTop, scrollLeft, visibleHeight, visibleWidth } = Tools.getDomNode()
let top = evnt.clientY + scrollTop
let left = evnt.clientX + scrollLeft
Object.assign(ctxMenuStore, {
@@ -667,13 +672,11 @@ export default {
}
})
this.$nextTick(() => {
let viewHeight = document.documentElement.clientHeight || document.body.clientHeight
let viewWidth = document.documentElement.clientWidth || document.body.clientWidth
let ctxElem = this.$refs.ctxWrapper.$el
let clientHeight = ctxElem.clientHeight
let clientWidth = ctxElem.clientWidth
let offsetTop = evnt.clientY + clientHeight - viewHeight
let offsetLeft = evnt.clientX + clientWidth - viewWidth
let offsetTop = evnt.clientY + clientHeight - visibleHeight
let offsetLeft = evnt.clientX + clientWidth - visibleWidth
if (offsetTop > -10) {
ctxMenuStore.style.top = `${top - clientHeight}px`
}
@@ -686,6 +689,7 @@ export default {
}
}
}
this.closeFilter()
},
/**
* 关闭快捷菜单

6
src/tools/index.js
View File

@@ -77,10 +77,12 @@ const Tools = {
$table.collectColumn.splice([].indexOf.call($table.$refs.hideColumn.children, _vm.$el), 0, columnConfig)
}
},
getDomScrollPos () {
getDomNode () {
return {
scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft
scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft,
visibleHeight: document.documentElement.clientHeight || document.body.clientHeight,
visibleWidth: document.documentElement.clientWidth || document.body.clientWidth
}
},
hasClass (elem, cls) {

31
style/table.scss
View File

@@ -223,6 +223,7 @@
}
}
.vxe-table--loading {
display: none;
position: absolute;
width: 100%;
height: 100%;
@@ -237,20 +238,22 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spinner--bounce1, .spinner--bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: $vxe-primary-color;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
animation: bounce 2.0s infinite ease-in-out;
}
.spinner--bounce2 {
animation-delay: -1.0s;
&:before,
&:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
background-color: $vxe-primary-color;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
animation: bounce 2.0s infinite ease-in-out;
}
&:after {
animation-delay: -1.0s;
}
}
@keyframes bounce {
0%, 100% {