lxm_front/vxe-table
1
0
Fork 0
mirror of synced 2025-12-08 22:58:56 +08:00
Code Issues Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
xuliangzhan
2019-04-28 19:48:46 +08:00
parent d23a5ff96d
commit 2ddb07f4ab
13 changed files with 37 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -16,7 +16,7 @@ A very powerful Vue table component.
* [带边框](https://jsrun.net/QrXKp/play) * [带边框](https://jsrun.net/QrXKp/play)
* [单元格样式](https://jsrun.net/EmXKp/play) * [单元格样式](https://jsrun.net/EmXKp/play)
* [列宽拖动](https://jsrun.net/5AXKp/play) * [列宽拖动](https://jsrun.net/5AXKp/play)
* 流体高度 * [流体高度](https://jsrun.net/smXKp/play)
* [固定表头](https://jsrun.net/JrXKp/play) * [固定表头](https://jsrun.net/JrXKp/play)
* [固定列](https://jsrun.net/TrXKp/play) * [固定列](https://jsrun.net/TrXKp/play)
* [固定表头和列](https://jsrun.net/8rXKp/play) * [固定表头和列](https://jsrun.net/8rXKp/play)
@@ -99,8 +99,8 @@ Vue.use(VXETable)
|------|------|-----|------|-----| |------|------|-----|------|-----|
| data | 显示的数据 | Array | — | — | | data | 显示的数据 | Array | — | — |
| customs | 初始化绑定动态列 | Array | — | — | | customs | 初始化绑定动态列 | Array | — | — |
| height | 表格的高度 | String | — | — | | height | 表格的高度 | Number | — | — |
| maxHeight | 表格的最大高度 | String | — | — | | maxHeight | 表格的最大高度 | Number | — | — |
| stripe | 是否带有斑马纹 | Boolean | — | false | | stripe | 是否带有斑马纹 | Boolean | — | false |
| border | 是否带有纵向边框 | Boolean | — | false | | border | 是否带有纵向边框 | Boolean | — | false |
| size | 表格的尺寸 | String | medium / small / mini | — | | size | 表格的尺寸 | String | medium / small / mini | — |

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.2c10e9a0.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.d11fbeb7.js rel=preload as=script><link href=/vxe-table/static/css/index.2c10e9a0.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.d11fbeb7.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.5d605309.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.9fa78522.js rel=preload as=script><link href=/vxe-table/static/css/index.5d605309.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.9fa78522.js></script></body></html>

1
docs/static/css/index.2c10e9a0.css vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

1
docs/static/js/index.d11fbeb7.js vendored
View File

File diff suppressed because one or more lines are too long

9
examples/views/Table1.vue
View File

@@ -32,7 +32,7 @@
</vxe-table> --> </vxe-table> -->
<vxe-table <vxe-table
height="300" max-height="300"
border border
:data.sync="tableData" :data.sync="tableData"
:customs.sync="customColumns" :customs.sync="customColumns"
@@ -46,7 +46,7 @@
<vxe-table-column prop="address" label="地址" width="300" fixed="right"></vxe-table-column> <vxe-table-column prop="address" label="地址" width="300" fixed="right"></vxe-table-column>
</vxe-table> </vxe-table>
<vxe-table <!-- <vxe-table
height="300" height="300"
border border
:data.sync="tableData"> :data.sync="tableData">
@@ -64,11 +64,10 @@
<vxe-table-column prop="date" label="日期" min-width="200"></vxe-table-column> <vxe-table-column prop="date" label="日期" min-width="200"></vxe-table-column>
</vxe-table-column> </vxe-table-column>
<vxe-table-column prop="sex" label="性别" width="200"></vxe-table-column> <vxe-table-column prop="sex" label="性别" width="200"></vxe-table-column>
</vxe-table> </vxe-table> -->
<!-- <vxe-table <!-- <vxe-table
border border
height="400"
:data.sync="tableData"> :data.sync="tableData">
<vxe-table-column type="index" width="60" fixed="left"></vxe-table-column> <vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>
<vxe-table-column type="radio" width="60"></vxe-table-column> <vxe-table-column type="radio" width="60"></vxe-table-column>
@@ -97,7 +96,7 @@ export default {
}, },
created () { created () {
window.test = this window.test = this
let list = window.CACHE_DATA_LIST.slice(0, 100) let list = window.CACHE_DATA_LIST.slice(0, 5)
this.tableData = list this.tableData = list
}, },
methods: { methods: {

15
lib/index.common.js
View File

@@ -3378,7 +3378,6 @@ function getNodeOffset(elem, container, rest) {
/** /**
* 渲染列 * 渲染列
*/ */
@@ -3517,6 +3516,7 @@ function syncBodyScroll(scrollTop, elem1, elem2) {
fixedType = this.fixedType; fixedType = this.fixedType;
var highlightHoverRow = $table.highlightHoverRow, var highlightHoverRow = $table.highlightHoverRow,
rowKey = $table.rowKey, rowKey = $table.rowKey,
maxHeight = $table.maxHeight,
height = $table.height, height = $table.height,
rowClassName = $table.rowClassName, rowClassName = $table.rowClassName,
tableData = $table.tableData, tableData = $table.tableData,
@@ -3532,11 +3532,13 @@ function syncBodyScroll(scrollTop, elem1, elem2) {
var leftList = columnStore.leftList, var leftList = columnStore.leftList,
rightList = columnStore.rightList; rightList = columnStore.rightList;
var overflow = optimizeConfig.overflow; var overflow = optimizeConfig.overflow;
var customHeight = isNaN(height) ? 0 : parse_float_default()(height); var customHeight = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default.a.toNumber(height);
var style = {}; var style = {};
if (customHeight) { if (customHeight) {
style.height = "".concat(fixedType ? (customHeight || tableHeight) - scrollXHeight : customHeight, "px"); style.height = "".concat(fixedType ? (customHeight || tableHeight) - scrollXHeight : customHeight, "px");
} else if (maxHeight) {
style['max-height'] = "".concat(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default.a.toNumber(maxHeight), "px");
} // 如果是使用优化模式 } // 如果是使用优化模式
@@ -3738,7 +3740,8 @@ var convertToRows = function convertToRows(originColumns) {
headerColumn = this.headerColumn, headerColumn = this.headerColumn,
tableColumn = this.tableColumn, tableColumn = this.tableColumn,
resizeMousedown = this.resizeMousedown; resizeMousedown = this.resizeMousedown;
var headerRowClassName = $table.headerRowClassName, var border = $table.border,
headerRowClassName = $table.headerRowClassName,
headerCellClassName = $table.headerCellClassName, headerCellClassName = $table.headerCellClassName,
tableWidth = $table.tableWidth, tableWidth = $table.tableWidth,
scrollYWidth = $table.scrollYWidth; scrollYWidth = $table.scrollYWidth;
@@ -3802,7 +3805,7 @@ var convertToRows = function convertToRows(originColumns) {
columnIndex: columnIndex, columnIndex: columnIndex,
fixed: fixedType, fixed: fixedType,
isHidden: fixedHiddenColumn isHidden: fixedHiddenColumn
})), !isGroup ? h('div', { })), border && !fixedType && !isGroup ? h('div', {
class: ['vxe-resize'], class: ['vxe-resize'],
on: { on: {
mousedown: function mousedown(evnt) { mousedown: function mousedown(evnt) {
@@ -4032,9 +4035,9 @@ function renderFixed(h, $table, fixedType) {
// 初始化绑定动态列 // 初始化绑定动态列
customs: Array, customs: Array,
// 表格的高度 // 表格的高度
height: String, height: [Number, String],
// 表格的最大高度 // 表格的最大高度
maxHeight: String, maxHeight: [Number, String],
// 是否带有斑马纹 // 是否带有斑马纹
stripe: Boolean, stripe: Boolean,
// 是否带有纵向边框 // 是否带有纵向边框

15
lib/index.umd.js
View File

@@ -3387,7 +3387,6 @@ function getNodeOffset(elem, container, rest) {
/** /**
* 渲染列 * 渲染列
*/ */
@@ -3526,6 +3525,7 @@ function syncBodyScroll(scrollTop, elem1, elem2) {
fixedType = this.fixedType; fixedType = this.fixedType;
var highlightHoverRow = $table.highlightHoverRow, var highlightHoverRow = $table.highlightHoverRow,
rowKey = $table.rowKey, rowKey = $table.rowKey,
maxHeight = $table.maxHeight,
height = $table.height, height = $table.height,
rowClassName = $table.rowClassName, rowClassName = $table.rowClassName,
tableData = $table.tableData, tableData = $table.tableData,
@@ -3541,11 +3541,13 @@ function syncBodyScroll(scrollTop, elem1, elem2) {
var leftList = columnStore.leftList, var leftList = columnStore.leftList,
rightList = columnStore.rightList; rightList = columnStore.rightList;
var overflow = optimizeConfig.overflow; var overflow = optimizeConfig.overflow;
var customHeight = isNaN(height) ? 0 : parse_float_default()(height); var customHeight = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default.a.toNumber(height);
var style = {}; var style = {};
if (customHeight) { if (customHeight) {
style.height = "".concat(fixedType ? (customHeight || tableHeight) - scrollXHeight : customHeight, "px"); style.height = "".concat(fixedType ? (customHeight || tableHeight) - scrollXHeight : customHeight, "px");
} else if (maxHeight) {
style['max-height'] = "".concat(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default.a.toNumber(maxHeight), "px");
} // 如果是使用优化模式 } // 如果是使用优化模式
@@ -3747,7 +3749,8 @@ var convertToRows = function convertToRows(originColumns) {
headerColumn = this.headerColumn, headerColumn = this.headerColumn,
tableColumn = this.tableColumn, tableColumn = this.tableColumn,
resizeMousedown = this.resizeMousedown; resizeMousedown = this.resizeMousedown;
var headerRowClassName = $table.headerRowClassName, var border = $table.border,
headerRowClassName = $table.headerRowClassName,
headerCellClassName = $table.headerCellClassName, headerCellClassName = $table.headerCellClassName,
tableWidth = $table.tableWidth, tableWidth = $table.tableWidth,
scrollYWidth = $table.scrollYWidth; scrollYWidth = $table.scrollYWidth;
@@ -3811,7 +3814,7 @@ var convertToRows = function convertToRows(originColumns) {
columnIndex: columnIndex, columnIndex: columnIndex,
fixed: fixedType, fixed: fixedType,
isHidden: fixedHiddenColumn isHidden: fixedHiddenColumn
})), !isGroup ? h('div', { })), border && !fixedType && !isGroup ? h('div', {
class: ['vxe-resize'], class: ['vxe-resize'],
on: { on: {
mousedown: function mousedown(evnt) { mousedown: function mousedown(evnt) {
@@ -4041,9 +4044,9 @@ function renderFixed(h, $table, fixedType) {
// 初始化绑定动态列 // 初始化绑定动态列
customs: Array, customs: Array,
// 表格的高度 // 表格的高度
height: String, height: [Number, String],
// 表格的最大高度 // 表格的最大高度
maxHeight: String, maxHeight: [Number, String],
// 是否带有斑马纹 // 是否带有斑马纹
stripe: Boolean, stripe: Boolean,
// 是否带有纵向边框 // 是否带有纵向边框

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

File diff suppressed because one or more lines are too long

6
packages/table/src/body.js
View File

@@ -95,13 +95,15 @@ export default {
}, },
render (h) { render (h) {
let { _e, $parent: $table, fixedType } = this let { _e, $parent: $table, fixedType } = this
let { highlightHoverRow, rowKey, height, rowClassName, tableData, tableColumn, tableHeight, tableWidth, scrollXHeight, selectRow, hoverRow, overflowX, columnStore, optimizeConfig } = $table let { highlightHoverRow, rowKey, maxHeight, height, rowClassName, tableData, tableColumn, tableHeight, tableWidth, scrollXHeight, selectRow, hoverRow, overflowX, columnStore, optimizeConfig } = $table
let { leftList, rightList } = columnStore let { leftList, rightList } = columnStore
let { overflow } = optimizeConfig let { overflow } = optimizeConfig
let customHeight = isNaN(height) ? 0 : parseFloat(height) let customHeight = XEUtils.toNumber(height)
let style = {} let style = {}
if (customHeight) { if (customHeight) {
style.height = `${fixedType ? (customHeight || tableHeight) - scrollXHeight : customHeight}px` style.height = `${fixedType ? (customHeight || tableHeight) - scrollXHeight : customHeight}px`
} else if (maxHeight) {
style['max-height'] = `${XEUtils.toNumber(maxHeight)}px`
} }
// 如果是使用优化模式 // 如果是使用优化模式
if (fixedType && overflow) { if (fixedType && overflow) {

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

@@ -74,7 +74,7 @@ export default {
}, },
render (h) { render (h) {
let { _e, $parent: $table, fixedType, headerColumn, tableColumn, resizeMousedown } = this let { _e, $parent: $table, fixedType, headerColumn, tableColumn, resizeMousedown } = this
let { headerRowClassName, headerCellClassName, tableWidth, scrollYWidth } = $table let { border, headerRowClassName, headerCellClassName, tableWidth, scrollYWidth } = $table
return h('div', { return h('div', {
class: [fixedType ? `vxe-table--fixed-${fixedType}-header-wrapper` : 'vxe-table--header-wrapper'] class: [fixedType ? `vxe-table--fixed-${fixedType}-header-wrapper` : 'vxe-table--header-wrapper']
}, [ }, [
@@ -128,7 +128,7 @@ export default {
h('div', { h('div', {
class: ['vxe-cell'] class: ['vxe-cell']
}, column.renderHeader(h, { $table, column, columnIndex, fixed: fixedType, isHidden: fixedHiddenColumn })), }, column.renderHeader(h, { $table, column, columnIndex, fixed: fixedType, isHidden: fixedHiddenColumn })),
!isGroup ? h('div', { border && !fixedType && !isGroup ? h('div', {
class: ['vxe-resize'], class: ['vxe-resize'],
on: { on: {
mousedown: evnt => { mousedown: evnt => {

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

@@ -58,9 +58,9 @@ export default {
// 初始化绑定动态列 // 初始化绑定动态列
customs: Array, customs: Array,
// 表格的高度 // 表格的高度
height: String, height: [Number, String],
// 表格的最大高度 // 表格的最大高度
maxHeight: String, maxHeight: [Number, String],
// 是否带有斑马纹 // 是否带有斑马纹
stripe: Boolean, stripe: Boolean,
// 是否带有纵向边框 // 是否带有纵向边框