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

修复序号打印空白问题

Browse Source
This commit is contained in:
xuliangzhan
2021-11-27 18:54:55 +08:00
parent 87f475a37e
commit c680d1ddd0
12 changed files with 30 additions and 674 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -24,7 +24,7 @@
* [x] v2.0 基于 vue2.6+，支持所有主流的浏览器，同时兼具功能与性能
* [x] v3.0 基于 vue2.6+，支持现代浏览器并保留兼容 IE11，提升渲染性能
* [x] v4.0 基于 vue3.0+，只支持现代浏览器，不支持 IE
* [ ] 下一阶段：sticky 表格、css 变量、虚拟滚动与动态行高、数据可视化
* [ ] 下一阶段：sticky 渲染模式、css 变量主题、将虚拟滚动提升到极致、虚拟滚动动态行高、数据图表可视化
## QQ 交流群

1
README.zh-TW.md
View File

@@ -24,7 +24,6 @@
* [x] v2.0 基於 vue2.6+，支持所有主流的瀏覽器，同時兼具功能與效能
* [x] v3.0 基於 vue2.6+，支持現代瀏覽器並保留相容IE11，提升渲染效能
* [x] v4.0 基于 vue3.0+，只支持現代瀏覽器，不支持IE
* [ ] 下一阶段：sticky 表格、css 变量、虚拟滚动与动态行高、数据可视化
## QQ 交流群

28
examples/App.vue
View File

@@ -81,7 +81,7 @@
<span v-html="item.label"></span>
</a>
<ul v-if="item.children" v-show="item.expand" class="nav-child-menu">
<li v-for="(child, cIndex) in item.children" :key="cIndex" :class="{'is-donation': ['Donation'].includes(child.locat.name), 'is-bad': ['TableBadEdit', 'TableBadLineHeight', 'TableBadNonsupport'].includes(child.locat.name)}">
<li v-for="(child, cIndex) in item.children" :key="cIndex" :class="{'is-donation': ['Donation'].includes(child.locat.name)}">
<a class="nav-link disabled" v-if="child.disabled" :title="$t('app.body.other.newFunc')" v-html="child.label"></a>
<router-link v-else class="nav-link" :to="child.locat" :title="child.label" v-html="child.label"></router-link>
</li>
@@ -1736,32 +1736,6 @@ export default defineComponent({
// }
// ]
// },
// {
// label: 'app.aside.nav.bad',
// value: 'bad',
// expand: false,
// children: [
// {
// label: 'app.aside.nav.badEdit',
// demoUrl: 'https://jsrun.pro/uIWKp/edit',
// locat: {
// name: 'TableBadEdit'
// }
// },
// {
// label: 'app.aside.nav.badLineHeight',
// locat: {
// name: 'TableBadLineHeight'
// }
// },
// {
// label: 'app.aside.nav.badNonsupport',
// locat: {
// name: 'TableBadNonsupport'
// }
// }
// ]
// },
{
label: 'app.aside.nav.formats',
value: 'formats',

40
examples/api/excel.ts
View File

@@ -1,40 +0,0 @@
const apis = [
{
name: 'Props',
descKey: 'app.api.title.props',
version: '',
type: '',
enum: '',
defVal: '',
list: []
},
{
name: 'Slots',
descKey: 'app.api.title.slots',
version: '',
type: '',
enum: '',
defVal: '',
list: []
},
{
name: 'Events',
descKey: 'app.api.title.events',
version: '',
type: '',
enum: '',
defVal: '',
list: []
},
{
name: 'Methods',
descKey: 'app.api.title.methods',
version: '',
type: '',
enum: '',
defVal: '',
list: []
}
]
export default apis

457
examples/api/virtual-tree.ts
View File

@@ -1,457 +0,0 @@
import XEUtils from 'xe-utils'
import tableAPI from './table'
import columnAPI from './column'
import toolbarAPI from './toolbar'
import pagerAPI from './pager'
const toolbarProps: any = toolbarAPI.find(item => item.name === 'Props')
const toolbarSlots: any = toolbarAPI.find(item => item.name === 'Slots')
const pagerProps: any = pagerAPI.find(item => item.name === 'Props')
const columnProps: any = columnAPI.find(item => item.name === 'Props')
const apis = [
{
name: 'Props',
descKey: 'app.api.title.props',
version: '',
type: '',
enum: '',
defVal: '',
list: [
{
name: 'toolbar',
descKey: 'app.api.grid.desc.toolbar',
version: '',
type: 'Boolean, Object',
enum: '',
defVal: '',
list: XEUtils.clone(toolbarProps.list, true).concat([{
name: 'zoom',
desc: '是否允许最大化显示',
version: '',
type: 'Boolean, Object',
enum: '',
defVal: '',
list: [
{
name: 'escRestore',
desc: '是否允许按 Esc 键还原',
version: '',
type: 'Boolean',
enum: '',
defVal: 'true',
list: []
},
{
name: 'iconIn',
desc: '自定义最大化图标',
version: '',
type: 'String',
enum: '',
defVal: '',
list: []
},
{
name: 'iconOut',
desc: '自定义还原图标',
version: '',
type: 'String',
enum: '',
defVal: '',
list: []
}
]
}, {
name: 'slots',
descKey: 'app.api.title.slots',
version: '',
type: 'Object',
enum: '',
defVal: '',
list: XEUtils.clone(toolbarSlots.list, true)
}])
},
{
name: 'pager-config',
descKey: 'app.api.grid.desc.pagerConfig',
version: '',
type: 'Object',
enum: '',
defVal: '',
list: XEUtils.mapTree(pagerProps.list.filter((item: any) => !['size', 'loading'].includes(item.name)), (item: any) => Object.assign({}, item, { name: XEUtils.camelCase(item.name) }))
},
{
name: 'proxy-config',
descKey: 'app.api.grid.desc.proxyConfig',
version: '',
type: 'Object',
enum: '',
defVal: '',
list: [
{
name: 'autoLoad',
desc: '是否自动加载查询数据',
version: '',
type: 'Boolean',
enum: '',
defVal: 'true',
list: []
},
{
name: 'message',
desc: '是否显示内置的消息提示（可以设为 false 关闭内置的消息提示）',
version: '',
type: 'Boolean',
enum: '',
defVal: 'true',
list: []
},
{
name: 'index',
desc: '存在 type=index 列时有效，是否代理动态序号（根据分页动态变化）',
version: '',
type: 'Boolean',
enum: '',
defVal: 'false',
list: []
},
{
name: 'sort',
desc: '是否代理排序',
version: '',
type: 'Boolean',
enum: '',
defVal: 'false',
list: []
},
{
name: 'filter',
desc: '是否代理筛选',
version: '',
type: 'Boolean',
enum: '',
defVal: 'false',
list: []
},
{
name: 'props',
desc: '获取的属性配置',
version: '',
type: 'Object',
enum: '',
defVal: '',
list: [
{
name: 'list',
desc: '响应结果中获取数据列表的属性',
version: '',
type: 'String',
enum: '',
defVal: '',
list: []
},
{
name: 'result',
desc: '只对 pager-config 配置了有效，响应结果中获取数据列表的属性',
version: '',
type: 'String',
enum: '',
defVal: 'result',
list: []
},
{
name: 'total',
desc: '只对 pager-config 配置了有效，响应结果中获取分页的属性',
version: '',
type: 'String',
enum: '',
defVal: 'page.total',
list: []
}
]
},
{
name: 'ajax',
desc: '代理配置（支持 Promise API）',
version: '',
type: 'Object',
enum: '',
defVal: '',
list: [
{
name: 'query',
desc: '查询方法，如果使用了服务端排序，sort 属性可以获取相关信息；如果使用了服务端过滤，filter 属性可以获取相关信息',
version: '',
type: '({ form, page, sort, sorts, filters }) => Promise<any>',
enum: '',
defVal: '',
list: []
},
{
name: 'delete',
desc: '删除方法',
version: '',
type: '({ body: { removeRecords: any[] } }) => Promise<any>',
enum: '',
defVal: '',
list: []
},
{
name: 'save',
desc: '保存方法',
version: '',
type: '({ body: { insertRecords: any[], updateRecords: any[], removeRecords: any[], pendingRecords: any[] } }) => Promise<any>',
enum: '',
defVal: '',
list: []
}
]
}
]
}
]
},
{
name: 'Slots',
descKey: 'app.api.title.slots',
version: '',
type: '',
enum: '',
defVal: '',
list: [
{
name: 'buttons',
desc: '只对 toolbar 配置时有效，按钮列表',
version: '',
type: '',
enum: '',
defVal: '',
list: []
}
]
},
{
name: 'Events',
descKey: 'app.api.title.events',
version: '',
type: '',
enum: '',
defVal: '',
list: [
{
name: 'current-page-change',
desc: '只对 pager-config 配置时有效，当前页发生改变时会触发该事件',
version: '',
type: '',
enum: '',
defVal: '{currentPage}',
list: []
},
{
name: 'page-size-change',
desc: '只对 pager-config 配置时有效，每页大小发生改变时会触发该事件',
version: '',
type: '',
enum: '',
defVal: '{pageSize}',
list: []
},
{
name: 'page-change',
desc: '只对 pager-config 配置时有效，分页发生改变时会触发该事件',
version: '',
type: '',
enum: '',
defVal: '{type, currentPage, pageSize}',
list: []
},
{
name: 'toolbar-button-click',
desc: '只对 toolbar.buttons 配置时有效，当工具栏的按钮被点击时会后触发该事件',
version: '',
type: '',
enum: '',
defVal: '{code}',
list: []
}
]
},
{
name: 'Methods',
descKey: 'app.api.title.methods',
version: '',
type: '',
enum: '',
defVal: '',
list: [
{
name: 'commitProxy(code, ...arguments)',
desc: '给数据代理提交指令（支持额外的参数，对于很多特殊场景很有用）',
version: '',
type: '',
enum: 'reload, query, delete, save',
defVal: 'code: string',
list: []
},
{
name: 'zoom()',
desc: '切换表格最大化/还原',
version: '',
type: 'Promise<status>',
enum: '',
defVal: '',
list: []
},
{
name: 'isMaximized()',
desc: '判断是否最大化显示',
version: '',
type: 'Boolean',
enum: '',
defVal: '',
list: []
}
]
}
]
const gridAPI: any = XEUtils.clone(tableAPI, true).map((item: any) => {
const rest: any = apis.find(obj => obj.name === item.name)
rest.list = item.list.concat(rest.list)
return rest
})
XEUtils.eachTree(gridAPI, (item: any, index, obj, paths, parent) => {
if (parent && parent.name === 'buttons' && item.name === 'code') {
item.list = [
{
name: 'reload',
desc: '刷新数据并恢复到初始状态；触发 ajax.query 方法',
version: '',
type: '',
enum: '',
defVal: '',
list: []
},
{
name: 'query',
desc: '刷新数据；会自动触发 ajax.query 方法',
version: '',
type: '',
enum: '',
defVal: '',
list: []
},
{
name: 'insert',
desc: '新增数据',
version: '',
type: '',
enum: '',
defVal: '',
list: []
},
{
name: 'insert_actived',
desc: '新增数据并且默认激活第一个可编辑的单元格',
version: '',
type: '',
enum: '',
defVal: '',
list: []
},
{
name: 'mark_cancel',
desc: '将选中的数据标记或取消删除',
version: '',
type: '',
enum: '',
defVal: '',
list: []
},
{
name: 'delete',
desc: '删除选中行；会自动触发 ajax.delete 方法',
version: '',
type: '',
enum: '',
defVal: '',
list: []
},
{
name: 'remove',
desc: '移除选中行',
version: '',
type: '',
enum: '',
defVal: '',
list: []
},
{
name: 'save',
desc: '保存数据；会自动触发 ajax.save 方法，并且在 Promise 完成之后重新触发 ajax.query 方法',
version: '',
type: '',
enum: '',
defVal: '',
list: []
},
{
name: 'import',
desc: '直接导入',
version: '1.15.12',
type: '',
enum: '',
defVal: '',
list: []
},
{
name: 'open_import',
desc: '高级导入',
version: '1.15.12',
type: '',
enum: '',
defVal: '',
list: []
},
{
name: 'export',
desc: '直接导出',
version: '',
type: '',
enum: '',
defVal: '',
list: []
},
{
name: 'open_export',
desc: '高级导出',
version: '1.15.12',
type: '',
enum: '',
defVal: '',
list: []
},
{
name: 'reset_custom',
desc: '重置个性化数据（显示/隐藏列、列宽拖动状态）',
version: '',
type: '',
enum: '',
defVal: '',
list: []
}
]
}
}, { children: 'list' })
gridAPI.find((item: any) => item.name === 'Props').list.splice(1, 0, {
name: 'columns',
descKey: 'app.api.table.desc.columns',
type: 'Array',
enum: '',
defVal: '',
list: XEUtils.mapTree(columnProps.list, (item: any) => Object.assign({}, item, { name: XEUtils.camelCase(item.name) }))
})
export default gridAPI

20
examples/router/index.ts
View File

@@ -247,11 +247,6 @@ import TableEditEvents from '../views/table/edit/Events.vue'
import TableEditTemplate from '../views/table/edit/Template.vue'
import TableEditFull from '../views/table/edit/Full.vue'
// import TableBadEdit from '../views/table/bad/Edit.vue'
// import TableBadNonsupport from '../views/table/bad/Nonsupport.vue'
// import TableBadLineHeight from '../views/table/bad/LineHeight.vue'
import TableBadChange from '../views/table/bad/Change.vue'
import ModuleIcon from '../views/icon/Icon.vue'
import ModuleButton from '../views/button/Button.vue'
import ModuleRadio from '../views/radio/Radio.vue'
@@ -1475,21 +1470,6 @@ const routes: Array<RouteRecordRaw> = [
name: 'TableEditFull',
component: TableEditFull
},
// {
// path: '/table/bad/edit',
// name: 'TableBadEdit',
// component: TableBadEdit
// },
// {
// path: '/table/bad/nonsupport',
// name: 'TableBadNonsupport',
// component: TableBadNonsupport
// },
{
path: '/table/bad/change',
name: 'TableBadChange',
component: TableBadChange
},
{
path: '/table/module/icon',
name: 'ModuleIcon',

4
examples/views/api/API.vue
View File

@@ -50,7 +50,6 @@ import colgroupAPI from '../../api/colgroup'
import columnAPI from '../../api/column'
import toolbarAPI from '../../api/toolbar'
import gridAPI from '../../api/grid'
import virtualTreeAPI from '../../api/virtual-tree'
import pagerAPI from '../../api/pager'
import radioAPI from '../../api/radio'
import radioGroupAPI from '../../api/radio-group'
@@ -218,9 +217,6 @@ export default defineComponent({
case 'grid':
apis = gridAPI
break
case 'virtual-tree':
apis = virtualTreeAPI
break
case 'pager':
apis = pagerAPI
break

0
examples/views/table/bad/Change.vue
View File

135
examples/views/table/tree/Filter.vue
View File

@@ -2,35 +2,34 @@
<div>
<p class="tip">树结构筛选</p>
<vxe-toolbar ref="xToolbar" export print custom></vxe-toolbar>
<vxe-table
ref="xTree"
ref="xTable"
height="400"
:print-config="{}"
:data="demo1.tableData"
:tree-config="{transform: true}"
:scroll-y="{gt: 1000}">
<vxe-column type="seq"></vxe-column>
<vxe-column field="name" title="名称" tree-node></vxe-column>
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column type="seq" tree-node></vxe-column>
<vxe-column field="name" title="名称"></vxe-column>
<vxe-column field="size" title="大小" width="140"></vxe-column>
<vxe-column field="type" title="类型" width="140" :filters="[{label: 'js', value: 'js'}, {label: 'mp3', value: 'mp3'}, {label: 'avi', value: 'avi'}]"></vxe-column>
<vxe-column field="date" title="修改日期" width="260"></vxe-column>
</vxe-table>
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
<pre>
<pre-code class="xml">{{ demoCodes[0] }}</pre-code>
<pre-code class="typescript">{{ demoCodes[1] }}</pre-code>
</pre>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { VxeTableInstance } from '../../../../types/index'
import { defineComponent, reactive, ref, nextTick } from 'vue'
import { VxeTableInstance, VxeToolbarInstance } from '../../../../types/index'
export default defineComponent({
setup () {
const xTree = ref({} as VxeTableInstance)
const xTable = ref({} as VxeTableInstance)
const xToolbar = ref({} as VxeToolbarInstance)
const demo1 = reactive({
tableData: [
@@ -58,109 +57,17 @@ export default defineComponent({
]
})
nextTick(() => {
// 将表格和工具栏进行关联
const $table = xTable.value
const $toolbar = xToolbar.value
$table.connect($toolbar)
})
return {
xTree,
demo1,
demoCodes: [
`
<vxe-table
ref="xTree"
max-height="600"
:loading="demo1.loading"
:data="demo1.tableData"
:tree-config="{children: 'children'}">
<vxe-column field="name" title="名称" tree-node>
<template #header>
<div>名称</div>
<input v-model="demo1.filterName" type="type" placeholder="Filter" @keyup="searchEvent">
</template>
</vxe-column>
<vxe-column field="size" title="大小" width="140"></vxe-column>
<vxe-column field="type" title="类型" width="140"></vxe-column>
<vxe-column field="date" title="修改日期" width="260"></vxe-column>
</vxe-table>
`,
`
import { defineComponent, reactive, ref, nextTick } from 'vue'
import { VxeTableInstance } from 'vxe-table'
import XEUtils from 'xe-utils'
export default defineComponent({
setup () {
const xTree = ref({} as VxeTableInstance)
const demo1 = reactive({
filterName: '',
loading: false,
originData: [] as any[],
tableData: [] as any[]
})
const handleSearch = () => {
const filterName = XEUtils.toValueString(demo1.filterName).trim()
if (filterName) {
const options = { children: 'children' }
const searchProps = ['name']
demo1.tableData = XEUtils.searchTree(demo1.originData, item => searchProps.some(key => XEUtils.toValueString(item[key]).indexOf(filterName) > -1), options)
// 搜索之后默认展开所有子节点
nextTick(() => {
const $table = xTree.value
$table.setAllTreeExpand(true)
})
} else {
demo1.tableData = demo1.originData
}
}
// 创建一个防防抖函数，调用频率间隔 500 毫秒
const searchEvent = XEUtils.debounce(function () {
handleSearch()
}, 500, { leading: false, trailing: true })
demo1.loading = true
setTimeout(() => {
const list = [
{ id: 1000, name: 'test abc1', type: 'mp3', size: 1024, date: '2020-08-01' },
{
id: 1005,
name: 'Test2',
type: 'mp4',
size: null,
date: '2021-04-01',
children: [
{ id: 24300, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
{ id: 20045, name: 'test abc4', type: 'html', size: 600, date: '2021-04-01' },
{
id: 10053,
name: 'test abc96',
type: 'avi',
size: null,
date: '2021-04-01',
children: [
{ id: 24330, name: 'test abc5', type: 'txt', size: 25, date: '2021-10-01' },
{ id: 21011, name: 'Test6', type: 'pdf', size: 512, date: '2020-01-01' },
{ id: 22200, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' }
]
}
]
},
{ id: 23666, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01' },
{ id: 24555, name: 'test abc9', type: 'avi', size: 224, date: '2020-10-01' }
]
demo1.loading = false
demo1.originData = list
handleSearch()
}, 300)
return {
xTree,
demo1,
searchEvent
}
}
})
`
]
xTable,
xToolbar,
demo1
}
}
})

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "vxe-table",
"version": "4.1.10",
"version": "4.1.11-beta.1",
"description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
"scripts": {
"serve": "vue-cli-service serve",

13
packages/export/src/hook.ts
View File

@@ -2,7 +2,7 @@ import { inject, nextTick } from 'vue'
import XEUtils from 'xe-utils'
import GlobalConfig from '../../v-x-e-table/src/conf'
import { VXETable } from '../../v-x-e-table'
import { isColumnInfo, mergeBodyMethod, getCellValue, toTreePathSeq } from '../../table/src/util'
import { isColumnInfo, mergeBodyMethod, getCellValue } from '../../table/src/util'
import { errLog, warnLog, parseFile, formatText } from '../../tools/utils'
import { readLocalFile, handlePrint, saveLocalFile, createHtmlPage, getExportBlobByContent } from './util'
@@ -295,16 +295,13 @@ const tableExportHook: VxeGlobalHooksHandles.HookOptions = {
return row[treeOpts.children] && row[treeOpts.children].length
}
const getSeq = (row: any, rowIndex: any, column: any, columnIndex: any, path: string[] | null) => {
const getSeq = (row: any, rowIndex: any, column: any, columnIndex: any) => {
const seqOpts = computeSeqOpts.value
const seqMethod = seqOpts.seqMethod || column.seqMethod
if (seqMethod) {
return seqMethod({ row, rowIndex, column, columnIndex })
}
if (path) {
return toTreePathSeq(path)
}
return seqOpts.startIndex + rowIndex + 1
return $xetable.getRowSeq(row)
}
const toBooleanValue = (cellValue: any) => {
@@ -350,7 +347,7 @@ const tableExportHook: VxeGlobalHooksHandles.HookOptions = {
} else {
switch (column.type) {
case 'seq':
cellValue = getSeq(row, rowIndex, column, columnIndex, path)
cellValue = getSeq(row, rowIndex, column, columnIndex)
break
case 'checkbox':
cellValue = toBooleanValue($xetable.isCheckedByCheckboxRow(row))
@@ -406,7 +403,7 @@ const tableExportHook: VxeGlobalHooksHandles.HookOptions = {
} else {
switch (column.type) {
case 'seq':
cellValue = getSeq(row, rowIndex, column, columnIndex, [])
cellValue = getSeq(row, rowIndex, column, columnIndex)
break
case 'checkbox':
cellValue = toBooleanValue($xetable.isCheckedByCheckboxRow(row))

2
packages/table/src/table.ts
View File

@@ -1159,7 +1159,7 @@ export default defineComponent({
fullAllDataRowIdData[rowid] = { row, rowid, seq, index: -1, $index: -1, _index: index, items: [], parent: null, level: 0 }
fullDataRowIdData[rowid] = { row, rowid, seq, index: -1, $index: -1, _index: index, items: [], parent: null, level: 0 }
}
}, treeOpts)
}, { children: treeOpts.mapChildren })
} else {
afterFullData.forEach((row, index) => {
const rowid = getRowid($xetable, row)