lilei 6 月之前
父节点
当前提交
c2bd6fc54e
共有 1 个文件被更改,包括 36 次插入7 次删除
  1. 36 7
      src/components/VTable/index.vue

+ 36 - 7
src/components/VTable/index.vue

@@ -157,7 +157,8 @@ export default {
         showQuickJumper: false
       }, this.pagination),
       // 选中的项
-      selectedRowKeys: []
+      selectedRowKeys: [],
+      selectedRows: []
     }
   },
   created () {
@@ -168,20 +169,48 @@ export default {
   methods: {
     // 选择单元格
     selectedRowChange ({ row, isSelected, selectedRowKeys }) {
+      console.log(isSelected, selectedRowKeys)
+      // 选中
+      if (isSelected) {
+        this.selectedRows.push(row)
+      } else {
+        // 取消
+        this.selectedRows = this.selectedRows.filter(item => item[this.rowKeyName] !== row[this.rowKeyName])
+      }
       this.selectedRowKeys = selectedRowKeys
       this.onRowSelection()
       this.$emit('selectRowChange', { row, isSelected, selectedRowKeys })
     },
-    // 全选行
+    // 全选或取消本页
     selectedAllChange ({ isSelected, selectedRowKeys }) {
-      this.selectedRowKeys = selectedRowKeys
+      console.log(isSelected, selectedRowKeys)
+      // 全选
+      if (isSelected) {
+        // 合并数组,并去重
+        this.selectedRowKeys = this.selectedRowKeys.concat(selectedRowKeys).reduce((prev, next) => {
+          if (!prev.find(item => item === next)) {
+            prev.push(next)
+          }
+          return prev
+        }, [])
+        this.selectedRows = this.selectedRows.concat(this.localDataSource).reduce((prev, next) => {
+          if (!prev.find(item => item[this.rowKeyName] === next[this.rowKeyName])) {
+            prev.push(next)
+          }
+          return prev
+        }, [])
+      } else {
+        // 取消全选,删除当前页选项
+        const changeRowKeys = this.localDataSource.map(item => item[this.rowKeyName])
+        this.selectedRowKeys = this.selectedRowKeys.filter(item => !changeRowKeys.includes(item))
+        this.selectedRows = this.selectedRows.filter(item => !changeRowKeys.includes(item[this.rowKeyName]))
+      }
       this.onRowSelection()
       this.$emit('selectAllRowChange', { isSelected, selectedRowKeys })
     },
     // 触发已选项事件
     onRowSelection () {
-      const selectedRows = this.localDataSource.filter(item => this.selectedRowKeys.includes(item[this.rowKeyName]))
-      this.$emit('rowSelection', { selectedRows: selectedRows, selectedRowKeys: this.selectedRowKeys })
+      this.$emit('rowSelection', { selectedRows: this.selectedRows, selectedRowKeys: this.selectedRowKeys })
     },
     // 通过key.key...获取属性值
     getNestedPropertyValue (obj, path) {
@@ -222,7 +251,7 @@ export default {
           scopedSlotsKey: item.scopedSlots && item.scopedSlots.customRender,
           hasEllipsis: item.ellipsis,
           renderBodyCell: ({ row, column, rowIndex }, h) => {
-            // 如果filed 是obj.objkey.objkey...形式
+            // 如果field 是obj.objkey.objkey...形式
             const text = column.field ? (column.field.indexOf('.') >= 0 ? _this.getNestedPropertyValue(row, column.field) : row[column.field]) : null
             // 有自定义单元格
             if (column.scopedSlotsKey) {
@@ -244,7 +273,7 @@ export default {
         })
       }
       // 判断是否开启多选框
-      const hasCheckbox = columns.find(item => item.type == 'checkbox')
+      const hasCheckbox = ret.find(item => item.type == 'checkbox')
       // 兼容老版本表格
       if (!hasCheckbox && this.rowSelection) {
         ret.unshift({ title: '', field: 'checkbox', key: 'checkbox', width: 30, type: 'checkbox', align: 'center' })