lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
xuliangzhan
2019-04-27 21:09:28 +08:00
parent 011e84da44
commit a56e962dc1
18 changed files with 1801 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/index.html
View File

@@ -1 +1 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vxe-table/favicon.ico><title>vue table</title><link href=/vxe-table/static/css/index.ca56cf49.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.0379ce63.js rel=preload as=script><link href=/vxe-table/static/js/index.19eb0111.js rel=preload as=script><link href=/vxe-table/static/css/index.ca56cf49.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/static/js/chunk-vendors.0379ce63.js></script><script src=/vxe-table/static/js/index.19eb0111.js></script></body></html>
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vxe-table/favicon.ico><title>vue table</title><link href=/vxe-table/static/css/index.c4e23742.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.0379ce63.js rel=preload as=script><link href=/vxe-table/static/js/index.fccfd1f3.js rel=preload as=script><link href=/vxe-table/static/css/index.c4e23742.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/static/js/chunk-vendors.0379ce63.js></script><script src=/vxe-table/static/js/index.fccfd1f3.js></script></body></html>

1
docs/static/css/index.c4e23742.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/static/css/index.ca56cf49.css vendored
View File

File diff suppressed because one or more lines are too long

1
docs/static/js/index.19eb0111.js vendored
View File

File diff suppressed because one or more lines are too long

1
docs/static/js/index.fccfd1f3.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
examples/views/Table1.vue
View File

@@ -18,8 +18,7 @@
border
:data.sync="tableData"
:customs.sync="customColumns">
<vxe-table-column type="index"></vxe-table-column>
<vxe-table-column type="radio" width="60"></vxe-table-column>
<vxe-table-column type="index" width="60"></vxe-table-column>
<vxe-table-column type="selection" prop="checked" width="60"></vxe-table-column>
<vxe-table-column prop="name" label="名称" min-width="200"></vxe-table-column>
<vxe-table-column prop="date" label="日期" min-width="200"></vxe-table-column>

913
lib/index.common.js
View File

File diff suppressed because it is too large Load Diff

2
lib/index.css
View File

File diff suppressed because one or more lines are too long

913
lib/index.umd.js
View File

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "vxe-table",
"version": "0.0.1-beta.2",
"version": "0.0.1-beta.3",
"description": "A very powerful Vue table component.",
"scripts": {
"serve": "vue-cli-service serve",

15
packages/checkbox/src/checkbox.js
View File

@@ -1,5 +1,3 @@
import Tools from '../../../src/tools'
export default {
name: 'VxeCheckbox',
props: {
@@ -12,7 +10,8 @@ export default {
render (h) {
return h('label', {
class: ['vxe-checkbox', this.size ? `size--${this.size}` : '', {
'is--indeterminate': this.indeterminate
'is--indeterminate': this.indeterminate,
'is--disabled': this.disabled
}]
}, [
h('input', {
@@ -24,9 +23,11 @@ export default {
},
on: {
change: evnt => {
let value = evnt.target.checked
this.$emit('input', value)
Tools.emitEvent(this, 'change', [value, evnt])
if (!this.disabled) {
let value = evnt.target.checked
this.$emit('input', value)
this.$emit('change', value, evnt)
}
}
}
}),
@@ -35,7 +36,7 @@ export default {
}),
this.$slots.default ? h('span', {
class: ['checkbox--label']
}, this.$slots.default) : null
}, this.$slots.default) : this._e()
])
}
}

14
packages/radio/src/radio.js
View File

@@ -8,7 +8,9 @@ export default {
},
render (h) {
return h('label', {
class: ['vxe-radio', this.size ? `size--${this.size}` : '']
class: ['vxe-radio', this.size ? `size--${this.size}` : '', {
'is--disabled': this.disabled
}]
}, [
h('input', {
attrs: {
@@ -20,9 +22,11 @@ export default {
},
on: {
change: evnt => {
let value = evnt.target.checked
this.$emit('input', value)
this.$emit('change', value, evnt)
if (!this.disabled) {
let value = evnt.target.checked
this.$emit('input', value)
this.$emit('change', value, evnt)
}
}
}
}),
@@ -31,7 +35,7 @@ export default {
}),
this.$slots.default ? h('span', {
class: ['checkbox--label']
}, this.$slots.default) : null
}, this.$slots.default) : this._e()
])
}
}

4
packages/table/src/column.js
View File

@@ -67,11 +67,11 @@ export default {
opts.renderCell = this.prop ? this.renderSelectionCellByProp : this.renderSelectionCell
break
default:
if (this.filters && this.sortable) {
if (this.filters && this.filters.length && this.sortable) {
} else if (this.sortable) {
opts.renderHeader = this.renderSortHeader
} else if (this.filters) {
} else if (this.filters && this.filters.length) {
opts.renderHeader = this.renderFilterHeader
}
}

42
packages/table/src/event.js
View File

@@ -1,27 +1,27 @@
// import XEUtils from 'xe-utils'
import XEUtils from 'xe-utils'
// // 监听全局事件
// const wheelName = /Firefox/i.test(navigator.userAgent) ? 'DOMMouseScroll' : 'mousewheel'
// const eventStore = []
// const GlobalEvent = {
// on (comp, type, cb) {
// eventStore.push({ comp, type, cb })
// },
// off (comp, type) {
// XEUtils.remove(eventStore, item => item.comp === comp && item.type === type)
// },
// trigger (evnt) {
// eventStore.forEach(({ comp, type, cb }) => {
// if (type === evnt.type || (type === 'mousewheel' && evnt.type === wheelName)) {
// cb.call(comp, evnt)
// }
// })
// }
// }
// 监听全局事件
const wheelName = /Firefox/i.test(navigator.userAgent) ? 'DOMMouseScroll' : 'mousewheel'
const eventStore = []
const GlobalEvent = {
on (comp, type, cb) {
eventStore.push({ comp, type, cb })
},
off (comp, type) {
XEUtils.remove(eventStore, item => item.comp === comp && item.type === type)
},
trigger (evnt) {
eventStore.forEach(({ comp, type, cb }) => {
if (type === evnt.type || (type === 'mousewheel' && evnt.type === wheelName)) {
cb.call(comp, evnt)
}
})
}
}
// document.addEventListener('keydown', GlobalEvent.trigger, false)
// document.addEventListener('contextmenu', GlobalEvent.trigger, false)
// window.addEventListener('click', GlobalEvent.trigger, false)
window.addEventListener('click', GlobalEvent.trigger, false)
// window.addEventListener(wheelName, GlobalEvent.trigger, false)
// export default GlobalEvent
export default GlobalEvent

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

@@ -2,6 +2,7 @@ import XEUtils from 'xe-utils'
import TableBody from './body'
import TableHeader from './header'
import Tools from '../../../src/tools'
import GlobalEvent from './event'
import VxeCheckbox from '../../checkbox'
/**
@@ -100,8 +101,10 @@ export default {
collectColumn: [],
// 渲染的列
tableColumn: [],
// 渲染的数据
// 渲染中的数据
tableData: [],
// 完整数据
tableFullData: [],
// 表格宽度
tableWidth: 0,
// 表格高度
@@ -190,6 +193,7 @@ export default {
}
},
created () {
GlobalEvent.on(this, 'click', this.handleGlobalClickEvent)
this.reload(this.data).then(() => {
this.tableColumn = Tools.getColumnList(this.collectColumn)
if (this.customs) {
@@ -207,9 +211,10 @@ export default {
if (filterWrapper && filterWrapper.parentNode) {
filterWrapper.parentNode.removeChild(filterWrapper)
}
GlobalEvent.off(this, 'click')
},
render (h) {
let { _e, tableData, tableColumn, collectColumn, isGroup, showHeader, border, stripe, highlightHoverRow, size, overflowX, optimizeConfig, columnStore, filterStore, confirmFilterEvent, cancelFilterEvent, filterCheckAllEvent, filterOptionCheckEvent } = this
let { _e, tableData, tableColumn, collectColumn, isGroup, showHeader, border, stripe, highlightHoverRow, size, overflowX, optimizeConfig, columnStore, filterStore, confirmFilterEvent, resetFilterEvent, filterCheckAllEvent, filterOptionCheckEvent } = this
let { leftList, rightList } = columnStore
return h('div', {
class: ['vxe-table', size ? `size--${size}` : '', {
@@ -308,15 +313,21 @@ export default {
class: ['vxe-table--filter-footer']
}, [
h('button', {
class: {
'is--disabled': !filterStore.isAllSelected && !filterStore.isIndeterminate
},
attrs: {
disabled: !filterStore.isAllSelected && !filterStore.isIndeterminate
},
on: {
click: confirmFilterEvent
}
}, '确认'),
}, '筛选'),
h('button', {
on: {
click: cancelFilterEvent
click: resetFilterEvent
}
}, '取消')
}, '重置')
])
])
])
@@ -335,9 +346,10 @@ export default {
this.tableColumn.forEach(column => {
column.order = null
})
this.tableData = this.data || []
this.tableFullData = this.data || []
this.tableData = this.tableFullData
},
clearFilter () {
clearFilter (force) {
Object.assign(this.filterStore, {
isAllSelected: false,
isIndeterminate: false,
@@ -353,7 +365,8 @@ export default {
this.clearSelectRow()
this.clearSort()
this.clearFilter()
this.tableData = data || []
this.tableFullData = data || []
this.tableData = this.tableFullData
let rest = this.$nextTick()
if (this.autoWidth) {
return rest.then(this.computeWidth)
@@ -550,6 +563,34 @@ export default {
this.scrollRightToLeft = bodyElem.clientWidth < bodyElem.scrollWidth - bodyElem.scrollLeft
}
},
/**
* 全局点击事件处理
*/
handleGlobalClickEvent (evnt) {
if (this.hasEventTargetNode(evnt, this.$el, 'vxe-filter-wrapper')) {
// 如果点击了筛选按钮
} else if (this.hasEventTargetNode(evnt, this.$refs.filterWrapper)) {
// 如果点击筛选容器
} else {
this.clostFilter()
}
},
/**
* 检查触发源是否属于目标节点
*/
hasEventTargetNode (evnt, container, cls) {
let flag
let target = evnt.target
while (target && target.nodeType && target !== document) {
if (Tools.hasClass(target, cls)) {
flag = true
} else if (target === container) {
return cls ? flag : true
}
target = target.parentNode
}
return false
},
/**
* 多选，行选中事件
*/
@@ -629,23 +670,25 @@ export default {
*/
triggerFilterEvent (evnt, column, params) {
let filterStore = this.filterStore
if (filterStore.column === column) {
this.clearFilter()
if (filterStore.visible) {
filterStore.visible = false
} else {
let top = evnt.clientY + Tools.getDocScrollTop()
let left = evnt.clientX + Tools.getDocScrollLeft()
Object.assign(filterStore, {
style: {
top: `${top}px`,
left: `${left}px`
},
multiple: column.filterMultiple,
options: column.filters.map(({ label, value }) => {
return { label, value, checked: false }
}),
column: column,
visible: true
})
if (!filterStore.column || filterStore.column !== column) {
Object.assign(filterStore, {
multiple: column.filterMultiple,
options: column.filters,
column: column
})
}
filterStore.style = {
top: `${top}px`,
left: `${left}px`
}
filterStore.visible = true
filterStore.isAllSelected = filterStore.options.every(item => item.checked)
filterStore.isIndeterminate = !this.isAllSelected && filterStore.options.some(item => item.checked)
}
},
// 全部筛选事件
@@ -654,6 +697,7 @@ export default {
filterStore.options.forEach(item => {
item.checked = value
})
filterStore.isAllSelected = value
filterStore.isIndeterminate = false
},
// 筛选选项勾选事件
@@ -665,11 +709,39 @@ export default {
},
// 确认筛选
confirmFilterEvent (evnt) {
this.clearFilter()
let { isAllSelected, isIndeterminate, column, options } = this.filterStore
if (isAllSelected || isIndeterminate) {
if (isAllSelected) {
this.tableData = this.tableFullData
} else {
let property = column.property
let valueList = []
options.forEach(item => {
if (item.checked) {
valueList.push(item.value)
}
})
if (column.filterMethod) {
} else {
this.tableData = this.tableFullData.filter(row => valueList.indexOf(XEUtils.get(row, property)) > -1)
}
}
this.clostFilter()
}
},
// 取消筛选
cancelFilterEvent (evnt) {
this.clearFilter()
// 取消
clostFilter (evnt) {
this.filterStore.isAllSelected = false
this.filterStore.isIndeterminate = false
this.filterStore.visible = false
},
// 重置筛选
resetFilterEvent (evnt) {
this.filterStore.options.forEach(item => {
item.checked = false
})
this.clostFilter()
}
}
}

5
src/tools/index.js
View File

@@ -44,7 +44,7 @@ const Tools = {
formatter: _vm.formatter,
sortable: _vm.sortable,
sortBy: _vm.sortBy,
filters: _vm.filters,
filters: (_vm.filters || []).map(({ label, value }) => ({ label, value, checked: false })),
filterMultiple: _vm.filterMultiple,
filterMethod: _vm.filterMethod,
columnKey: _vm.columnKey,
@@ -77,6 +77,9 @@ const Tools = {
},
getDocScrollLeft () {
return document.documentElement.scrollLeft || document.body.scrollLeft
},
hasClass (elem, cls) {
return elem && elem.className && elem.className.split && elem.className.split(' ').indexOf(cls) > -1
}
}

4
style/table.scss
View File

@@ -336,6 +336,10 @@
&:hover {
color: $vxe-primary-color;
}
&.is--disabled {
color: #c0c4cc;
cursor: not-allowed;
}
}
}
}