diff --git a/src/components/CustomTable/index.vue b/src/components/CustomTable/index.vue index 2f07a5a..c2eb0b5 100644 --- a/src/components/CustomTable/index.vue +++ b/src/components/CustomTable/index.vue @@ -2,6 +2,7 @@ @@ -58,10 +59,16 @@ export default { type: Boolean, default: true, }, + // 多选 multiple: { type: Boolean, default: false, }, + // 鼠标移动选择 + mouseMoveSelect: { + type: Boolean, + default: true, + }, }, data() { return { @@ -69,6 +76,14 @@ export default { innerSelectedRows: [], } }, + mounted() { + if (this.canSelect && this.multiple && this.mouseMoveSelect) { + const tbody = this.$el.querySelector('.ant-table-tbody') + tbody.addEventListener('mouseleave', () => { + this.mouseMoveStartIndex = undefined + }) + } + }, methods: { // 实现单击选中/反选功能 customRow(record, index) { @@ -105,6 +120,34 @@ export default { }, } }, + + // 实现鼠标拖移动多选功能 + customMouseMoveSelectRow(record, index) { + const key = record[this.rowKey] + return { + class: this.innerSelectedRowKeys.includes(key) ? 'ant-table-row-selected' : '', + on: { + mousedown: () => { + this.innerSelectedRowKeys = [] + this.mouseMoveStartIndex = index + }, + mouseenter: () => { + if (this.mouseMoveStartIndex !== undefined) { + const indexes = [this.mouseMoveStartIndex, index].sort((a, b) => a - b) + this.innerSelectedRowKeys = this.list.slice(indexes[0], indexes[1] + 1).map((item) => item[this.rowKey]) + } + }, + mouseup: () => { + // 开始和结束在同一个,相当于click + if (this.mouseMoveStartIndex == index) { + this.innerSelectedRowKeys = [key] + } + this.mouseMoveStartIndex = undefined + }, + }, + } + }, + handleTableChange(pagination, filters, sorter) { this.$emit('change', pagination, filters, sorter) }, @@ -136,8 +179,20 @@ export default { }, } - diff --git a/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue b/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue index 67b9c98..fae8149 100644 --- a/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue +++ b/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue @@ -13,6 +13,7 @@ :list="dataSource" :loading="loading" :canSelect="false" + :scroll="{ y: 390 }" >