drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

save

Browse source
This commit is contained in:
prefert 2020-09-03 15:53:31 +08:00
parent 8f9d3604e6
commit 5bb83ff8e5
258 changed files with 12974 additions and 7838 deletions
Download patch file Download diff file Expand all files Collapse all files

180
src/components/table/table-head.vue
View file

@ -30,6 +30,7 @@
placement="bottom"
popper-class="ivu-table-popper"
transfer
:capture="false"
@on-popper-hide="handleFilterHide(getColumn(rowIndex, index)._index)">
<span :class="[prefixCls + '-filter']">
<i class="ivu-icon ivu-icon-ios-funnel" :class="{on: getColumn(rowIndex, index)._isFiltered}"></i>
@ -60,6 +61,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 +102,13 @@
columnRows: Array,
fixedColumnRows: Array
},
data () {
return {
draggingColumn: null,
dragging: false,
dragState: {}
};
},
computed: {
styles () {
const style = Object.assign({}, this.styleObject);
@ -104,13 +119,25 @@
isSelectAll () {
let isSelectAll = true;
if (!this.data.length) isSelectAll = false;
if (!this.data.find(item => !item._disabled)) isSelectAll = false; // #1751
for (let i = 0; i < this.data.length; i++) {
if (!this.objData[this.data[i]._index]._isChecked && !this.objData[this.data[i]._index]._isDisabled) {
// 全部disabled且全false，#1751
let isAllDisabledAndUnSelected = true;
for (let i in this.objData) {
const objData = this.objData[i];
if (!objData._isChecked && !objData._isDisabled) {
isSelectAll = false;
break;
} else if (objData.children && objData.children.length) {
isSelectAll = this.isChildrenSelected(objData, isSelectAll);
}
if (!(objData._isDisabled && !objData._isChecked)) {
isAllDisabledAndUnSelected = false;
} else if (objData.children && objData.children.length) {
isAllDisabledAndUnSelected = this.isChildrenAllDisabledAndUnSelected(objData, isAllDisabledAndUnSelected);
}
}
if (isAllDisabledAndUnSelected) isSelectAll = false;
return isSelectAll;
},
@ -123,9 +150,17 @@
}
},
isSelectDisabled () {
let isSelectDisabled = false;
if (!this.data.length) isSelectDisabled = true;
if (!this.data.find(item => !item._disabled)) isSelectDisabled = true;
let isSelectDisabled = true;
if (this.data.length) {
for (let i in this.objData) {
const objData = this.objData[i];
if (!objData._isDisabled) {
isSelectDisabled = false;
} else if (objData.children && objData.children.length) {
isSelectDisabled = this.isChildrenDisabled(objData, isSelectDisabled);
}
}
}
return isSelectDisabled;
}
},
@ -222,6 +257,139 @@
} 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 = '';
},
isChildrenSelected (objData, isSelectAll) {
let status = isSelectAll;
if (objData.children && objData.children.length) {
objData.children.forEach(row => {
if (!row._isChecked && !row._isDisabled) {
status = false;
} else if (row.children && row.children.length) {
status = this.isChildrenSelected(row, status);
}
});
}
return status;
},
isChildrenAllDisabledAndUnSelected (objData, isAllDisabledAndUnSelected) {
let status = isAllDisabledAndUnSelected;
if (objData.children && objData.children.length) {
objData.children.forEach(row => {
if (!(row._isDisabled && !row._isChecked)) {
status = false;
} else if (row.children && row.children.length) {
status = this.isChildrenAllDisabledAndUnSelected(row, status);
}
});
}
return status;
},
isChildrenDisabled (objData, isSelectDisabled) {
let status = isSelectDisabled;
if (objData.children && objData.children.length) {
objData.children.forEach(row => {
if (!row._isDisabled) {
status = false;
} else if (row.children && row.children.length) {
status = this.isChildrenDisabled(row, status);
}
});
}
return status;
}
}
};