Table column add prop: resizable, Table add event @on-column-width-resize
This commit is contained in:
梁灏
parent
f8e7e08720
commit
aa14a697fb
4 changed files with 136 additions and 0 deletions
|
|
@ -6,6 +6,7 @@ export default {
|
|||
cellClassName = row.cellClassName[column.key];
|
||||
}
|
||||
return [
|
||||
`${this.prefixCls}-column-${column.__id}`,
|
||||
{
|
||||
[`${cellClassName}`]: cellClassName, // cell className
|
||||
[`${column.className}`]: column.className, // column className
|
||||
|
|
|
|||
|
|
@ -60,6 +60,13 @@
|
|||
</Poptip>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
v-if="column.resizable"
|
||||
class="ivu-table-header-resizable"
|
||||
@mousedown="handleMouseDown(column, $event)"
|
||||
@mousemove="handleMouseMove(column, $event)"
|
||||
@mouseout="handleMouseOut"
|
||||
></div>
|
||||
</th>
|
||||
|
||||
<th v-if="$parent.showVerticalScrollBar && rowIndex===0" :class='scrollBarCellClass()' :rowspan="headRows.length"></th>
|
||||
|
|
@ -94,6 +101,13 @@
|
|||
columnRows: Array,
|
||||
fixedColumnRows: Array
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
draggingColumn: null,
|
||||
dragging: false,
|
||||
dragState: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
styles () {
|
||||
const style = Object.assign({}, this.styleObject);
|
||||
|
|
@ -222,6 +236,100 @@
|
|||
} else {
|
||||
return this.headRows[rowIndex][index];
|
||||
}
|
||||
},
|
||||
handleMouseDown (column, event) {
|
||||
if (this.$isServer) return;
|
||||
|
||||
if (this.draggingColumn) {
|
||||
this.dragging = true;
|
||||
|
||||
const table = this.$parent;
|
||||
const tableEl = table.$el;
|
||||
const tableLeft = tableEl.getBoundingClientRect().left;
|
||||
const columnEl = this.$el.querySelector(`th.ivu-table-column-${column.__id}`);
|
||||
const columnRect = columnEl.getBoundingClientRect();
|
||||
const minLeft = columnRect.left - tableLeft + 30;
|
||||
|
||||
table.showResizeLine = true;
|
||||
|
||||
this.dragState = {
|
||||
startMouseLeft: event.clientX,
|
||||
startLeft: columnRect.right - tableLeft,
|
||||
startColumnLeft: columnRect.left - tableLeft,
|
||||
tableLeft
|
||||
};
|
||||
|
||||
const resizeProxy = table.$refs.resizeLine;
|
||||
resizeProxy.style.left = this.dragState.startLeft + 'px';
|
||||
|
||||
document.onselectstart = function() { return false; };
|
||||
document.ondragstart = function() { return false; };
|
||||
|
||||
const handleMouseMove = (event) => {
|
||||
const deltaLeft = event.clientX - this.dragState.startMouseLeft;
|
||||
const proxyLeft = this.dragState.startLeft + deltaLeft;
|
||||
|
||||
resizeProxy.style.left = Math.max(minLeft, proxyLeft) + 'px';
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
if (this.dragging) {
|
||||
const {
|
||||
startColumnLeft,
|
||||
startLeft
|
||||
} = this.dragState;
|
||||
|
||||
const finalLeft = parseInt(resizeProxy.style.left, 10);
|
||||
const columnWidth = finalLeft - startColumnLeft;
|
||||
|
||||
const _column = table.columns.find(item => item.__id === column.__id);
|
||||
if (_column) _column.width = columnWidth;
|
||||
table.$emit('on-column-width-resize', column.width, startLeft - startColumnLeft, column, event);
|
||||
|
||||
document.body.style.cursor = '';
|
||||
this.dragging = false;
|
||||
this.draggingColumn = null;
|
||||
this.dragState = {};
|
||||
|
||||
table.showResizeLine = false;
|
||||
}
|
||||
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
document.onselectstart = null;
|
||||
document.ondragstart = null;
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
}
|
||||
},
|
||||
handleMouseMove (column, event) {
|
||||
let target = event.target;
|
||||
|
||||
while (target && target.tagName !== 'TH') {
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
if (!column || !column.resizable) return;
|
||||
|
||||
if (!this.dragging) {
|
||||
let rect = target.getBoundingClientRect();
|
||||
|
||||
const bodyStyle = document.body.style;
|
||||
|
||||
if (rect.width > 12 && rect.right - event.pageX < 8) {
|
||||
bodyStyle.cursor = 'col-resize';
|
||||
this.draggingColumn = column;
|
||||
} else if (!this.dragging) {
|
||||
bodyStyle.cursor = '';
|
||||
this.draggingColumn = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
handleMouseOut () {
|
||||
if (this.$isServer) return;
|
||||
document.body.style.cursor = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@
|
|||
<div :class="[prefixCls + '-fixed-right-header']" :style="fixedRightHeaderStyle" v-if="isRightFixed"></div>
|
||||
<div :class="[prefixCls + '-footer']" v-if="showSlotFooter" ref="footer"><slot name="footer"></slot></div>
|
||||
</div>
|
||||
<div class="ivu-table-resize-line" v-show="showResizeLine" ref="resizeLine"></div>
|
||||
<Spin fix size="large" v-if="loading">
|
||||
<slot name="loading"></slot>
|
||||
</Spin>
|
||||
|
|
@ -235,6 +236,7 @@
|
|||
showHorizontalScrollBar:false,
|
||||
headerWidth:0,
|
||||
headerHeight:0,
|
||||
showResizeLine: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -25,6 +25,15 @@
|
|||
box-sizing: border-box;
|
||||
//position: relative;
|
||||
|
||||
&-resize-line{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
border-right: 1px dashed @border-color-split;
|
||||
}
|
||||
|
||||
&-hide{
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -75,6 +84,22 @@
|
|||
|
||||
&-header{
|
||||
overflow: hidden;
|
||||
thead{
|
||||
tr{
|
||||
th{
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-resizable{
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
right: -5px;
|
||||
cursor: col-resize;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
&-body{
|
||||
//overflow: auto;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue