@xuekl/cli-components 1.8.0 → 1.9.145

package/XklVirtualTable.vue

@@ -0,0 +1,161 @@
+<template>
+    <div ref="XklVirtualTable">
+        <xkl-virtual-scroll target=".el-scrollbar__wrap" item-target=".el-table__body > tbody > .el-table__row"
+            :data="table.list" :height="40" :key-prop="rowKey" @change="render">
+            <xkl-table ref="XklTableRefer" :row-key="rowKey" :table="table" @virtual-select="select"
+                @virtual-select-all="selectAll">
+                <template v-for="slotCol in slotCols" v-slot:[slotCol.prop]="{ row }">
+                    <slot :name="slotCol.prop" :row="row"></slot>
+                </template>
+                <template #_operation="{ row }">
+                    <slot name="_operation" :row="row"></slot>
+                </template>
+            </xkl-table>
+        </xkl-virtual-scroll>
+    </div>
+</template>
+<script lang="ts">
+export default {
+    name: 'XklVirtualTable'
+}
+</script>
+<script setup lang="ts">
+import { Ref, computed, onMounted, ref, watch } from 'vue';
+const props = defineProps(['table', 'data', 'rowKey'])
+const emit = defineEmits(['select', 'select-all', 'selection-change'])
+const { table, rowKey } = props
+table.selectionConfig.reserveSelection = true
+table.virtual = true
+
+const slotCols = computed(() => table.columns.filter(col => col.slot))
+
+const XklVirtualTable = ref(null)
+const XklTableRefer: Ref<any> = ref({})
+
+const state = {
+    isSelectAll: false,
+    isIndeterminate: false
+}
+
+const select = (row) => {
+    if (row.selected) {
+        table.selectedData = table.selectedData.concat(row)
+    } else {
+        table.selectedData = table.selectedData.filter(item => item[props.rowKey] !== row[props.rowKey])
+    }
+    state.isSelectAll = table.selectedData.length === table.list.length
+    const checkedCount = table.selectedData.length
+    state.isIndeterminate = checkedCount > 0 && checkedCount !== table.list.length
+    setCheckboxState(state.isSelectAll, state.isIndeterminate)
+    emit('select', table.selectedData, row)
+    emit('selection-change', table.selectedData)
+}
+
+let setCheckboxState: (flag1: boolean, flag2: boolean) => void = (flag) => { }
+
+const selectAll = (isSelectAll, call) => {
+    state.isSelectAll = isSelectAll
+    // setCheckboxState = call
+    if (state.isSelectAll) {
+        table.virtualList.forEach(item => item.selected = true)
+        table.selectedData = table.selectedData.concat(table.list)
+        let selectedKeys = table.selectedData.map(item => item[props.rowKey])
+        selectedKeys = Array.from(new Set(selectedKeys))
+        table.selectedData = selectedKeys.map(key => table.selectedData.find(item => item[props.rowKey] === key))
+    } else {
+        const listKeys = table.list.map(item => item[props.rowKey])
+        table.selectedData = table.selectedData.filter(item => !listKeys.includes(item[props.rowKey]))
+        table.virtualList.forEach(item => item.selected = false)
+    }
+    const checkedCount = table.selectedData.length
+    state.isIndeterminate = checkedCount > 0 && checkedCount !== table.list.length
+
+    setCheckboxState(state.isSelectAll, state.isIndeterminate)
+    emit('select-all', table.selectedData)
+    emit('selection-change', table.selectedData)
+}
+
+watch(() => table.list, () => {
+    const checkedCount = table.selectedData.length
+    //这里不是准确的判断，通过key循环判断太耗性能，有需要再做
+    const selectedKeys = table.selectedData.map(item => item[props.rowKey])
+    const listKeys = table.list.map(item => item[props.rowKey])
+
+    // state.isSelectAll = checkedCount > 0 && checkedCount >= table.list.length
+    state.isSelectAll = checkedCount > 0 && listKeys.every(key => selectedKeys.includes(key))
+    state.isIndeterminate = checkedCount > 0 && checkedCount < table.totalCount
+    setCheckboxState(state.isSelectAll, state.isIndeterminate)
+})
+
+const render = (list) => {
+    table.virtualList = list
+    if (state.isSelectAll) {
+        table.virtualList.forEach(item => {
+            item.selected = true
+        })
+    } else {
+
+        table.virtualList.forEach(item => {
+            const keys = table.selectedData.map(inner => inner[props.rowKey])
+            item.selected = keys.includes(item[props.rowKey])
+        })
+
+    }
+}
+
+const clearSelection = () => {
+    state.isSelectAll = false
+    state.isIndeterminate = false
+    table.selectedData = []
+    table.virtualList.forEach(item => item.selected = false)
+    setCheckboxState(state.isSelectAll, state.isIndeterminate)
+}
+
+// table.getRef = () => ({
+//     ...XklTableRefer.value.getRef(),
+//     clearSelection
+// })
+
+onMounted(() => {
+    const refer = XklTableRefer.value
+    setCheckboxState = refer.setCheckboxState
+    const getRef = refer.getRef()
+    const clearSort = getRef.clearSort
+    const getSelectionRows = () => {
+        return table.selectedData
+    }
+    const toggleRowSelection = (row, flag) => {
+        if (typeof flag === 'undefined') {
+            row.selected = !row.selected
+            select(row)
+        } else {
+            if (row.selected && flag) {
+                return
+            }
+            //列表更换后，选中的item已经不在list中，此时把list中与之相同id的数据，找出来，取消选中
+            if (!table.list.includes(row)) {
+                const item = table.list.find(res => res[props.rowKey] === row[props.rowKey])
+                if (item) {
+                    item.selected = flag
+                }
+            }
+            row.selected = flag
+            select(row)
+        }
+    }
+    const toggleAllSelection = getRef.toggleAllSelection
+    const clearFilter = getRef.clearFilter
+    const setCurrentRow = getRef.setCurrentRow
+    table.getRef = () => ({
+        clearSort,
+        clearSelection,
+        getSelectionRows,
+        toggleRowSelection,
+        toggleAllSelection,
+        clearFilter,
+        setCurrentRow
+    })
+})
+
+defineExpose({ clearSelection })
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xuekl/cli-components",
-  "version": "1.8.0",
+  "version": "1.9.145",
   "description": "element-plus 组件二次封装",
   "main": "index.ts",
   "scripts": {