feat(pro:table): support scrollTo

disabled columns should not be changed when check all

package.json

@@ -69,7 +69,6 @@
     "@types/lodash-es": "^4.17.6",
     "@types/marked": "^4.0.3",
     "@types/node": "^17.0.45",
-    "@types/parse5": "^7.0.0",
     "@types/prismjs": "^1.26.0",
     "@types/svgo": "^2.6.3",
     "@types/yaml-front-matter": "^4.1.0",

packages/cdk/types.d.ts

@@ -23,7 +23,7 @@ declare module 'vue' {
   }
 
   export interface GlobalDirectives {
-    VClickOutside: ClickOutsideDirective
+    vClickOutside: ClickOutsideDirective
   }
 }
 

packages/components/table/docs/Api.zh.md

@@ -95,10 +95,10 @@ export type TableColumn<T = any, V = any> =
 | `onChange` | 选中状态发生变化时触发 | `(selectedRowKeys: (string \| number)[], selectedRecords: T[]) => void` | - | - | - |
 | `onMenuClick` | 点击下拉菜单时触发 | `(options: MenuClickOptions, currentPageRowKeys: VKey[]) => void` | - | - | 如果点击时预设的值, 则不会触发该回调（例如：`all`, 那么触发的是 `onSelectAll`） |
 | `onSelect` | 点击选择框，或通过 `trigger` 触发 | `(selected: boolean, record: T) => void` | - | - | - |
-| `onSelectAll` | 点击全选所有时触发 | `(selectedRowKeys: (string \| number)[]) => void` | - | - | - |
-| `onSelectInvert` | 点击反选所有时触发 | `(selectedRowKeys: (string \| number)[]) => void` | - | - | - |
-| `onSelectNone` | 点击清空所有时触发 | `() => void` | - | - | - |
-| `onSelectPageInvert` | 点击反选当页所有时触发 | `() => void` | - | - | - |
+| `onSelectAll` | 点击全选所有时触发 | `(selectedRowKeys: (string \| number)[]) => void` | - | - | 配置 `menus= ['all']` 时生效 |
+| `onSelectInvert` | 点击反选所有时触发 | `(selectedRowKeys: (string \| number)[]) => void` | - | - | 配置 `menus= ['invert']` 时生效 |
+| `onSelectNone` | 点击清空所有时触发 | `() => void` | - | - | 配置 `menus= ['none']` 时生效 |
+| `onSelectPageInvert` | 点击反选当页所有时触发 | `() => void` | - | - | 配置 `menus= ['pageInvert']` 时生效 |
 
 ##### TableColumnSortable
 

packages/pro/table/docs/Api.zh.md

@@ -85,4 +85,8 @@ export const defaultConfig: ProGlobalConfig = {
 
 ### IxProTableLayoutTool
 
-表格布局设置组件，通常在自定义 `header` 的时候设置它, 参见 [自定义头部](#pro-table-demo-CustomHeader).
+表格布局设置组件，大部分情况下，你都不需要使用它。
+
+只有当你设置了 `layoutTool='false'` 时，并需要在表格的其他位置来控制表格的布局时使用。
+
+例如: 在自定义 `header` 的时候设置它, 参见 [自定义头部](#pro-table-demo-CustomHeader).

packages/pro/table/src/ProTable.tsx

@@ -11,9 +11,10 @@ import { computed, defineComponent, provide, ref } from 'vue'
 
 import { isString } from 'lodash-es'
 
+import { type VirtualScrollToOptions } from '@idux/cdk/scroll'
 import { IxHeader } from '@idux/components/header'
 import { IxSpace } from '@idux/components/space'
-import { IxTable, type TableCustomAdditional, type TableCustomTag } from '@idux/components/table'
+import { IxTable, type TableCustomAdditional, type TableCustomTag, type TableInstance } from '@idux/components/table'
 import { useGlobalConfig } from '@idux/pro/config'
 
 import ProTableLayoutTool from './ProTableLayoutTool'
@@ -26,7 +27,7 @@ import { proTableProps } from './types'
 export default defineComponent({
   name: 'IxProTable',
   props: proTableProps,
-  setup(props, { slots }) {
+  setup(props, { slots, expose }) {
     const common = useGlobalConfig('common')
     const config = useGlobalConfig('table')
     const locale = useGlobalConfig('locale')
@@ -44,6 +45,11 @@ export default defineComponent({
       ...columnsContext,
     })
 
+    const tableRef = ref<TableInstance>()
+    expose({
+      scrollTo: (option?: number | VirtualScrollToOptions) => tableRef.value?.scrollTo(option),
+    })
+
     const headElementRef = ref<HTMLElement>()
     const layoutToolStyle = computed(() => {
       const headElement = headElementRef.value
@@ -108,6 +114,7 @@ export default defineComponent({
 
       return (
         <IxTable
+          ref={tableRef}
           v-slots={{ ...slots, header: renderHeader, default: renderLayoutTool }}
           {...restProps}
           class={mergedPrefixCls.value}

packages/pro/table/src/ProTableLayoutTool.tsx

@@ -28,7 +28,14 @@ export default defineComponent({
 
     // 只需要判断第一层的即可
     const hiddenColumns = computed(() => mergedColumns.value.filter(column => column.visible === false))
-    const handleCheckAll = (checked: boolean) => loopColumns(mergedColumns.value, column => (column.visible = checked))
+
+    const handleCheckAll = (checked: boolean) =>
+      loopColumns(mergedColumns.value, column => {
+        // undefined or true
+        if (column.changeVisible !== false) {
+          column.visible = checked
+        }
+      })
 
     const renderHeader = () => {
       const settingLength = mergedColumns.value.length