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-05-15 23:08:27 +08:00
parent f91b3f2f6b
commit d670d12e58
20 changed files with 151 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -364,6 +364,10 @@ new Vue({ i18n }).$mount('#app')
| clearActivedd | 清除单元格激活状态 | — |
| clearCopyed | 清空已复制的内容 | — |
| clearData | 清空单元格内容 | rows,prop |
| clearScroll | 清除滚动相关信息，还原到初始状态 | — |
| closeFilter | 手动关闭筛选面板 | — |
| clostTooltip | 手动关闭 tooltip 提示 | — |
| closeContextMenu | 手动关闭快捷菜单 | — |
| recalculate | 重新计算并更新列宽 | — |
| isScrollXLoad | 判断是否启用了横向 X 滚动渲染 | — |
| isScrollYLoad | 判断是否启用了纵向 Y 滚动渲染 | — |

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>vxe-table 表格</title><link href=/vxe-table/static/css/chunk-vendors.27509805.css rel=preload as=style><link href=/vxe-table/static/css/index.2d3c0054.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.af4f32d7.js rel=preload as=script><link href=/vxe-table/static/js/index.8ffdc6c5.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.27509805.css rel=stylesheet><link href=/vxe-table/static/css/index.2d3c0054.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.af4f32d7.js></script><script src=/vxe-table/static/js/index.8ffdc6c5.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>vxe-table 表格</title><link href=/vxe-table/static/css/chunk-vendors.27509805.css rel=preload as=style><link href=/vxe-table/static/css/index.f95ef1db.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.af4f32d7.js rel=preload as=script><link href=/vxe-table/static/js/index.6d6cfb4b.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.27509805.css rel=stylesheet><link href=/vxe-table/static/css/index.f95ef1db.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.af4f32d7.js></script><script src=/vxe-table/static/js/index.6d6cfb4b.js></script></body></html>

2
docs/static/css/index.2d3c0054.css → docs/static/css/index.f95ef1db.css vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

1
docs/static/js/index.8ffdc6c5.js vendored
View File

File diff suppressed because one or more lines are too long

6
examples/App.vue
View File

@@ -75,6 +75,12 @@ export default {
name: 'TableSize'
}
},
{
lable: '内容显示省略号',
locat: {
name: 'TableOverflow'
}
},
{
lable: '斑马线条纹',
demoUrl: 'https://jsrun.net/zrXKp',

2
examples/assets/style/layout.scss
View File

@@ -92,7 +92,7 @@
color: #409eff;
}
&.router-link-exact-active {
border-right: 2px solid #409eff;
border-right: 3px solid #409eff;
}
&.disabled {
color: #c0c4cc;

7
examples/router.js
View File

@@ -3,9 +3,9 @@ import Router from 'vue-router'
import TableInstall from './views/table/start/Install.vue'
import TableUse from './views/table/start/Use.vue'
import TableBasic from './views/table/base/Basic.vue'
import TableSize from './views/table/base/Size.vue'
import TableOverflow from './views/table/base/Overflow.vue'
import TableStripe from './views/table/base/Stripe.vue'
import TableBorder from './views/table/base/Border.vue'
import TableStyle from './views/table/base/Style.vue'
@@ -105,6 +105,11 @@ export default new Router({
name: 'TableSize',
component: TableSize
},
{
path: '/table/base/overflow',
name: 'TableOverflow',
component: TableOverflow
},
{
path: '/table/base/stripe',
name: 'TableStripe',

3
examples/views/table/base/Basic.vue
View File

@@ -17,9 +17,6 @@
<code class="javascript">{{ demoCodes[1] }}</code>
</pre>
<p>ellipsis 当内容超过时显示为省略号</p>
<p>show-overflow-title 当内容超过时显示为省略号和原生 title 显示</p>
<p>show-overflow 当内容超过隐藏时显示为省略号并 tooltip 显示</p>
<p>使用 highlight-hover-row 属性启用 hover 行高亮</p>
<vxe-table

71
examples/views/table/base/Overflow.vue Normal file
View File

@@ -0,0 +1,71 @@
<template>
<div>
<p>当内容或表头超过隐藏时显示为省略号，show-overflow 和 show-header-overflow</p>
<p>ellipsis 当内容超过时显示为省略号</p>
<p>title 当内容超过时显示为省略号并用原生 title 显示</p>
<p>tooltip 当内容超过隐藏时显示为省略号并用 tooltip 显示</p>
<vxe-table
highlight-hover-row
:data.sync="tableData">
<vxe-table-column type="index" width="60"></vxe-table-column>
<vxe-table-column prop="address" label="超过隐藏时显示为省略号————————————" show-header-overflow="ellipsis" show-overflow="ellipsis"></vxe-table-column>
<vxe-table-column prop="date" label="内容超过隐藏时显示为省略号并用原生 title 显示" show-overflow="title"></vxe-table-column>
<vxe-table-column prop="age" label="表头超过隐藏时显示为省略号并 tooltip 显示——————————————" show-header-overflow></vxe-table-column>
<vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>
</vxe-table>
<p>调用代码</p>
<pre>
<code class="xml">{{ demoCodes[0] }}</code>
<code class="javascript">{{ demoCodes[1] }}</code>
</pre>
</div>
</template>
<script>
import hljs from 'highlight.js'
export default {
data () {
return {
tableData: [],
demoCodes: [
`
<vxe-table
highlight-hover-row
:data.sync="tableData">
<vxe-table-column type="index" width="60"></vxe-table-column>
<vxe-table-column prop="name" label="Name"></vxe-table-column>
<vxe-table-column prop="sex" label="Sex"></vxe-table-column>
<vxe-table-column prop="age" label="Age"></vxe-table-column>
<vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>
</vxe-table>
`,
`
export default {
data () {
return {
tableData: []
}
},
created () {
this.tableData = window.MOCK_DATA_LIST.slice(0, 6)
}
}
`
]
}
},
created () {
let list = window.MOCK_DATA_LIST.slice(0, 6)
this.tableData = list
},
mounted () {
Array.from(this.$el.querySelectorAll('pre code')).forEach((block) => {
hljs.highlightBlock(block)
})
}
}
</script>

23
examples/views/table/excel/Cell.vue
View File

@@ -3,7 +3,12 @@
<p>使用 vxe-excel 渲染 Excel 表格</p>
<p>快捷键：方向键、Tab 键、Esc 键、F2 键、Del、Back 键、Ctrl 复制粘贴</p>
<button class="btn" @click="getValidEvent">获取有效数据</button>
<button class="btn" @click="getInsertEvent">获取新增</button>
<button class="btn" @click="getRemoveEvent">获取删除</button>
<button class="btn" @click="getUpdateEvent">获取修改</button>
<vxe-excel
ref="xExcel"
max-height="600"
:columns="columns"
:data.sync="tableData">
@@ -74,6 +79,24 @@ export default {
Array.from(this.$el.querySelectorAll('pre code')).forEach((block) => {
hljs.highlightBlock(block)
})
},
methods: {
getValidEvent () {
let validRecords = this.$refs.xExcel.getRecords().filter(item => Object.keys(item).some(key => item[key]))
alert(validRecords.length)
},
getInsertEvent () {
let insertRecords = this.$refs.xExcel.getInsertRecords()
alert(insertRecords.length)
},
getRemoveEvent () {
let removeRecords = this.$refs.xExcel.getRemoveRecords()
alert(removeRecords.length)
},
getUpdateEvent () {
let updateRecords = this.$refs.xExcel.getUpdateRecords()
alert(updateRecords.length)
}
}
}
</script>

10
lib/demo.html
View File

@@ -1,10 +0,0 @@
<meta charset="utf-8">
<title>index demo</title>
<script src="./index.umd.js"></script>
<link rel="stylesheet" href="./index.css">
<script>
console.log(index)
</script>

16
lib/index.common.js
View File

@@ -9254,7 +9254,7 @@ function renderFixed(h, $table, fixedType, footerData) {
this.filterStore.visible = false;
if (this.scrollXLoad || this.scrollYLoad) {
this.clearScrollLoad();
this.clearScroll();
this.computeScrollLoad();
} else {
this.tableData = this.getTableData().tableData;
@@ -9509,7 +9509,7 @@ function renderFixed(h, $table, fixedType, footerData) {
scrollYStore.topSpaceHeight = Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0);
scrollYStore.bottomSpaceHeight = Math.max((fullData.length - (scrollYStore.startIndex + scrollYStore.renderSize)) * scrollYStore.rowHeight, 0);
},
clearScrollLoad: function clearScrollLoad() {
clearScroll: function clearScroll() {
var _this14 = this;
assign_default()(this.scrollXStore, {
@@ -9529,11 +9529,17 @@ function renderFixed(h, $table, fixedType, footerData) {
this.$nextTick(function () {
var tableBody = _this14.$refs.tableBody;
var tableBodyElem = tableBody ? tableBody.$el : null;
var tableFooter = _this14.$refs.tableFooter;
var tableFooterElem = tableFooter ? tableFooter.$el : null;
if (tableBodyElem) {
tableBodyElem.scrollTop = 0;
tableBodyElem.scrollLeft = 0;
}
if (tableFooterElem) {
tableFooterElem.scrollLeft = 0;
}
});
},
@@ -10442,7 +10448,7 @@ function _objectSpread(target) {
return target;
}
// CONCATENATED MODULE: ./src/components/table/src/func.js
/* harmony default export */ var func = (['load', 'reload', 'insert', 'insertAt', 'revert', 'remove', 'getRecords', 'getColumns', 'getAllRecords', 'getInsertRecords', 'getRemoveRecords', 'getUpdateRecords', 'hasRowChange', 'setActiveRow', 'setActiveCell', 'setSelectCell', 'setExpandRow', 'setCurrentRow', 'setSelection', 'toggleRowSelection', 'toggleAllSelection', 'toggleRowExpansion', 'clearCurrentRow', 'clearSelection', 'clearExpand', 'clearSort', 'clearFilter', 'clearChecked', 'clearSelected', 'clearActivedd', 'clearCopyed', 'clearData', 'recalculate', 'isScrollXLoad', 'isScrollYLoad', 'sort', 'validateRow', 'validate', 'exportCsv']);
/* harmony default export */ var func = (['load', 'reload', 'insert', 'insertAt', 'revert', 'remove', 'getRecords', 'getColumns', 'getAllRecords', 'getInsertRecords', 'getRemoveRecords', 'getUpdateRecords', 'hasRowChange', 'setActiveRow', 'setActiveCell', 'setSelectCell', 'setExpandRow', 'setCurrentRow', 'setSelection', 'toggleRowSelection', 'toggleAllSelection', 'toggleRowExpansion', 'clearCurrentRow', 'clearSelection', 'clearExpand', 'clearSort', 'clearFilter', 'clearChecked', 'clearSelected', 'clearActivedd', 'clearCopyed', 'clearData', 'clearScroll', 'closeFilter', 'clostTooltip', 'closeContextMenu', 'recalculate', 'isScrollXLoad', 'isScrollYLoad', 'sort', 'validateRow', 'validate', 'exportCsv']);
// CONCATENATED MODULE: ./src/components/table/src/grid.js
@@ -10463,7 +10469,7 @@ function buildColumns(h, columns) {
func.forEach(function (name) {
methods[name] = function () {
this.$refs.xTable[name].apply(this.$refs.xTable[name], arguments);
return this.$refs.xTable[name].apply(this.$refs.xTable[name], arguments);
};
});
/* harmony default export */ var grid = ({
@@ -10608,7 +10614,7 @@ function buildProps(h, _vm) {
func.forEach(function (name) {
excel_methods[name] = function () {
this.$refs.xTable[name].apply(this.$refs.xTable[name], arguments);
return this.$refs.xTable[name].apply(this.$refs.xTable[name], arguments);
};
});
/* harmony default export */ var excel = ({

16
lib/index.umd.js
View File

@@ -9263,7 +9263,7 @@ function renderFixed(h, $table, fixedType, footerData) {
this.filterStore.visible = false;
if (this.scrollXLoad || this.scrollYLoad) {
this.clearScrollLoad();
this.clearScroll();
this.computeScrollLoad();
} else {
this.tableData = this.getTableData().tableData;
@@ -9518,7 +9518,7 @@ function renderFixed(h, $table, fixedType, footerData) {
scrollYStore.topSpaceHeight = Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0);
scrollYStore.bottomSpaceHeight = Math.max((fullData.length - (scrollYStore.startIndex + scrollYStore.renderSize)) * scrollYStore.rowHeight, 0);
},
clearScrollLoad: function clearScrollLoad() {
clearScroll: function clearScroll() {
var _this14 = this;
assign_default()(this.scrollXStore, {
@@ -9538,11 +9538,17 @@ function renderFixed(h, $table, fixedType, footerData) {
this.$nextTick(function () {
var tableBody = _this14.$refs.tableBody;
var tableBodyElem = tableBody ? tableBody.$el : null;
var tableFooter = _this14.$refs.tableFooter;
var tableFooterElem = tableFooter ? tableFooter.$el : null;
if (tableBodyElem) {
tableBodyElem.scrollTop = 0;
tableBodyElem.scrollLeft = 0;
}
if (tableFooterElem) {
tableFooterElem.scrollLeft = 0;
}
});
},
@@ -10451,7 +10457,7 @@ function _objectSpread(target) {
return target;
}
// CONCATENATED MODULE: ./src/components/table/src/func.js
/* harmony default export */ var func = (['load', 'reload', 'insert', 'insertAt', 'revert', 'remove', 'getRecords', 'getColumns', 'getAllRecords', 'getInsertRecords', 'getRemoveRecords', 'getUpdateRecords', 'hasRowChange', 'setActiveRow', 'setActiveCell', 'setSelectCell', 'setExpandRow', 'setCurrentRow', 'setSelection', 'toggleRowSelection', 'toggleAllSelection', 'toggleRowExpansion', 'clearCurrentRow', 'clearSelection', 'clearExpand', 'clearSort', 'clearFilter', 'clearChecked', 'clearSelected', 'clearActivedd', 'clearCopyed', 'clearData', 'recalculate', 'isScrollXLoad', 'isScrollYLoad', 'sort', 'validateRow', 'validate', 'exportCsv']);
/* harmony default export */ var func = (['load', 'reload', 'insert', 'insertAt', 'revert', 'remove', 'getRecords', 'getColumns', 'getAllRecords', 'getInsertRecords', 'getRemoveRecords', 'getUpdateRecords', 'hasRowChange', 'setActiveRow', 'setActiveCell', 'setSelectCell', 'setExpandRow', 'setCurrentRow', 'setSelection', 'toggleRowSelection', 'toggleAllSelection', 'toggleRowExpansion', 'clearCurrentRow', 'clearSelection', 'clearExpand', 'clearSort', 'clearFilter', 'clearChecked', 'clearSelected', 'clearActivedd', 'clearCopyed', 'clearData', 'clearScroll', 'closeFilter', 'clostTooltip', 'closeContextMenu', 'recalculate', 'isScrollXLoad', 'isScrollYLoad', 'sort', 'validateRow', 'validate', 'exportCsv']);
// CONCATENATED MODULE: ./src/components/table/src/grid.js
@@ -10472,7 +10478,7 @@ function buildColumns(h, columns) {
func.forEach(function (name) {
methods[name] = function () {
this.$refs.xTable[name].apply(this.$refs.xTable[name], arguments);
return this.$refs.xTable[name].apply(this.$refs.xTable[name], arguments);
};
});
/* harmony default export */ var grid = ({
@@ -10617,7 +10623,7 @@ function buildProps(h, _vm) {
func.forEach(function (name) {
excel_methods[name] = function () {
this.$refs.xTable[name].apply(this.$refs.xTable[name], arguments);
return this.$refs.xTable[name].apply(this.$refs.xTable[name], arguments);
};
});
/* harmony default export */ var excel = ({

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.4.0",
"version": "0.4.1",
"description": "A very powerful Vue table component.",
"scripts": {
"serve": "vue-cli-service serve",

2
src/components/table/src/excel.js
View File

@@ -122,7 +122,7 @@ function buildProps (h, _vm, props = {}) {
funs.forEach(name => {
methods[name] = function () {
this.$refs.xTable[name].apply(this.$refs.xTable[name], arguments)
return this.$refs.xTable[name].apply(this.$refs.xTable[name], arguments)
}
})

4
src/components/table/src/func.js
View File

@@ -31,6 +31,10 @@ export default [
'clearActivedd',
'clearCopyed',
'clearData',
'clearScroll',
'closeFilter',
'clostTooltip',
'closeContextMenu',
'recalculate',
'isScrollXLoad',
'isScrollYLoad',

2
src/components/table/src/grid.js
View File

@@ -11,7 +11,7 @@ function buildColumns (h, columns) {
funs.forEach(name => {
methods[name] = function () {
this.$refs.xTable[name].apply(this.$refs.xTable[name], arguments)
return this.$refs.xTable[name].apply(this.$refs.xTable[name], arguments)
}
})

9
src/components/table/src/table.js
View File

@@ -2062,7 +2062,7 @@ export default {
confirmFilterEvent (evnt) {
this.filterStore.visible = false
if (this.scrollXLoad || this.scrollYLoad) {
this.clearScrollLoad()
this.clearScroll()
this.computeScrollLoad()
} else {
this.tableData = this.getTableData().tableData
@@ -2256,7 +2256,7 @@ export default {
scrollYStore.topSpaceHeight = Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0)
scrollYStore.bottomSpaceHeight = Math.max((fullData.length - (scrollYStore.startIndex + scrollYStore.renderSize)) * scrollYStore.rowHeight, 0)
},
clearScrollLoad () {
clearScroll () {
Object.assign(this.scrollXStore, {
visibleSize: 0,
startIndex: 0,
@@ -2272,10 +2272,15 @@ export default {
this.$nextTick(() => {
let tableBody = this.$refs.tableBody
let tableBodyElem = tableBody ? tableBody.$el : null
let tableFooter = this.$refs.tableFooter
let tableFooterElem = tableFooter ? tableFooter.$el : null
if (tableBodyElem) {
tableBodyElem.scrollTop = 0
tableBodyElem.scrollLeft = 0
}
if (tableFooterElem) {
tableFooterElem.scrollLeft = 0
}
})
},
/**