vue-virtualized-table-booway
Version:
The second version of implementation of `vue-virtual-table` component, it was inspired from [rc-table](https://github.com/react-component/table) and [ant-table](https://ant.design/components/table), API design is 60%+ consistent. Or you could think I tran
262 lines (236 loc) • 7.28 kB
JSX
/* eslint-disable vue/require-default-prop */
import {FUNC_PROP, OBJECT_PROP} from '../interface'
import {
isArray,
isString,
isNumber,
isObject,
isFunction, noop
} from '../utils/type'
export default {
name: 'Cell',
// functional: true,
inject: {
store: OBJECT_PROP,
scopedSlots: OBJECT_PROP,
onColumnResize: FUNC_PROP,
rowHeight: {
type: [String, Number]
}
},
props: {
prefixCls: String,
record: Object,
column: Object,
/** `record` index. Not `column` index. */
index: Number,
prop: String,
component: String,
children: [Array, Object],
colSpan: Number,
rowSpan: Number,
ellipsis: Boolean,
align: String,
shouldCellUpdate: Function,
// Fixed
fixLeft: [Number, Boolean],
fixRight: [Number, Boolean],
firstFixLeft: Boolean,
lastFixLeft: Boolean,
firstFixRight: Boolean,
lastFixRight: Boolean,
// Additional
/** @private Used for `expandable` with nest tree */
appendNode: [Object, Array],
rowType: String // 'header' | 'body' | 'footer',
},
updated() {
// this.Controlwidth()
},
methods: {
Controlwidth() {
const _this = this;
let tTD; // 用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
let table = document.querySelector(".ant-table-thead");
console.log(table.rows[0].cells.length)
// console.log(table.rows[0].cells)
for (let j = 0; j < table.rows[0].cells.length; j++) {
table.rows[0].cells[j].onmousedown = function () {
console.log(table.rows[0].cells[j])// 记录单元格
tTD = this;
if (event.offsetX > tTD.offsetWidth - 10) {
tTD.mouseDown = true;
tTD.oldX = event.x;
tTD.oldWidth = tTD.offsetWidth;
}
// 记录Table宽度
table = tTD; while (table.tagName !== 'TABLE') table = table.parentElement;
tTD.tableWidth = table.offsetWidth;
};
table.rows[0].cells[j].onmouseup = function () {// 结束宽度调整
if (tTD === undefined) tTD = this;
tTD.mouseDown = false;
tTD.style.cursor = 'default';
};
table.rows[0].cells[j].onmousemove = function () {// 更改鼠标样式
if (event.offsetX > this.offsetWidth - 10)
this.style.cursor = 'col-resize';
else
this.style.cursor = 'default';// 取出暂存的Table Cell
if (tTD === undefined) tTD = this;// 调整宽度
if (tTD.mouseDown != null && tTD.mouseDown === true) {
tTD.style.cursor = 'default';
if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
tTD.width = tTD.oldWidth + (event.x - tTD.oldX);// 调整列宽
tTD.style.width = tTD.width;
tTD.style.cursor = 'col-resize';// 调整该列中的每个Cell
table = tTD;// console.log(tTD.width)
while (table.tagName !== 'TABLE') table = table.parentElement;// console.log()
table.rows[0].cells[j].style.width = tTD.width + "px"
_this.onColumnResize(j,tTD.width)
// border = "1px solid #000"
// console.log(table.rows[0].cells[j].style.width)
// console.log()
// for (let j = 0; j < table.rows.length; j++) {
// // console.log(tTD.width)
// }
// 调整整个表
table.width = tTD.tableWidth + tTD.offsetWidth - tTD.oldWidth;
table.style.width = table.width;
}
};
}
}
},
render(h) {
const {
index,
column,
prefixCls,
record = {},
prop = '',
children,
component: Component = 'td',
colSpan,
rowSpan,
fixLeft,
fixRight,
firstFixLeft,
lastFixLeft,
firstFixRight,
lastFixRight,
appendNode,
additionalProps = {},
ellipsis,
align,
rowType
} = this
const {store, rowHeight, scopedSlots} = this
const isHeader = rowType === 'header'
const cellPrefixCls = `${prefixCls}-cell`
const value = record[prop]
let childNode = children || value || ''
if (isHeader) {
if (isObject(column) && isFunction(column.renderHeader)) {
childNode = column.renderHeader(h, {
store: store,
row: record,
column,
value,
index
})
}
} else {
if (isObject(column) && isFunction(column.render)) {
childNode = column.render(h, {
store: store,
value,
row: record,
column,
index
})
}
}
if (ellipsis && (lastFixLeft || firstFixRight)) {
childNode = <span class={`${cellPrefixCls}-content`}>{childNode}</span>
}
const fixedStyle = {}
const isFixLeft = typeof fixLeft === 'number'
const isFixRight = typeof fixRight === 'number'
if (isFixLeft) {
fixedStyle.position = 'sticky'
fixedStyle.left = fixLeft + 'px'
}
if (isFixRight) {
fixedStyle.position = 'sticky'
fixedStyle.right = fixRight + 'px'
}
const alignStyle = {}
if (align) {
alignStyle.textAlign = align
}
let title
const ellipsisConfig = ellipsis === true ? {showTitle: true} : ellipsis
if (ellipsisConfig && (ellipsisConfig.showTitle || isHeader)) {
if (childNode && isArray(childNode) && childNode.length === 1) {
childNode = childNode[0]
}
if (typeof childNode === 'string' || typeof childNode === 'number') {
title = childNode.toString()
}
if (!isString('' + title)) {
title = record[prop] || ''
}
}
if (colSpan === 0 || rowSpan === 0) {
return null
}
const componentProps = {
attrs: {
title,
...additionalProps,
colSpan: colSpan !== 1 ? colSpan : null,
rowSpan: rowSpan !== 1 ? rowSpan : null
},
class: [
cellPrefixCls,
column ? [column.class, column.className] : [],
{
[`${cellPrefixCls}-fix-left`]: isFixLeft,
[`${cellPrefixCls}-fix-left-first`]: firstFixLeft,
[`${cellPrefixCls}-fix-left-last`]: lastFixLeft,
[`${cellPrefixCls}-fix-right`]: isFixRight,
[`${cellPrefixCls}-fix-right-first`]: firstFixRight,
[`${cellPrefixCls}-fix-right-last`]: lastFixRight,
[`${cellPrefixCls}-ellipsis`]: ellipsis,
[`${cellPrefixCls}-with-append`]: appendNode
}
],
style: {
...additionalProps.style,
...alignStyle,
...fixedStyle,
height: !isHeader && isNumber(+rowHeight) ? rowHeight + 'px' : rowHeight
},
ref: null
}
let scopedSlots1 = null
if (column['slot']) {
if (record.name) {
scopedSlots1 = scopedSlots()['item']({item: record})
} else {
scopedSlots1 = childNode;
}
} else {
scopedSlots1 = childNode;
}
let onDblClick = noop
onDblClick = (event) => store.toggleColumnSelection(record, event)
return (
<Component {...componentProps} onDblclick={onDblClick}>
{appendNode}
{scopedSlots1}
</Component>
)
}
}