feat: Table options 更改 | 添加 table slot

ColeWang · Jun 27, 2024 · 4c3e2f4 · 4c3e2f4
1 parent f327c3d
commit 4c3e2f4
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 38 deletions.
diff --git a/src/packages/table/__tests__/Table.test.jsx b/src/packages/table/__tests__/Table.test.jsx
@@ -73,7 +73,10 @@ describe('Table', () => {
 
     it(`test Table Toolbar`, async () => {
         const wrapper = mount(Table, {
-            props: { search: false, options: { export: true } }
+            props: {
+                search: false,
+                toolbar: { options: { export: true } }
+            }
         })
         const toolbar = wrapper.findComponent(Toolbar)
         const buttonAll = toolbar.findAll('button')

diff --git a/src/packages/table/compatible/toolbar/index.jsx b/src/packages/table/compatible/toolbar/index.jsx
@@ -27,14 +27,14 @@ const defaultOptions = {
 export default defineComponent({
     inheritAttrs: false,
     props: {
-        options: {
-            type: [Object, Boolean],
-            default: () => ({})
-        },
         title: {
             type: Function,
             default: undefined
         },
+        options: {
+            type: [Object, Boolean],
+            default: () => ({})
+        },
         actions: {
             type: Function,
             default: undefined

diff --git a/src/packages/table/editable-table/index.jsx b/src/packages/table/editable-table/index.jsx
@@ -1,13 +1,16 @@
-import { defineComponent, reactive } from 'vue'
+import { defineComponent, reactive, watch } from 'vue'
 import { Form } from '@/packages/form'
 import Table from '../table'
 
 const editable = {
     type: 'multiple', // 可编辑表格的类型，单行编辑或者多行编辑
     editableKeys: [], // 正在编辑的行，受控属性。 默认 key 会使用 rowKey 的配置
-    onChange: (editableKeys, editableRows) => {},
-    onSave: (key, row, originRow, newLine) => {}, // Promise
-    onDelete: (key, row) => {}, // Promise
+    onChange: (editableKeys, editableRows) => {
+    },
+    onSave: (key, row, originRow, newLine) => {
+    }, // Promise
+    onDelete: (key, row) => {
+    }, // Promise
 }
 
 export default defineComponent({
@@ -22,16 +25,19 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
-        onChange: {
-
-        }
+        onChange: {}
     },
-    setup (props, { slots }) {
-        const modelRef = reactive(props.dataSource || [])
+    emits: ['update:value'],
+    setup (props, { emit, slots }) {
+        const model = reactive(props.dataSource || [])
+
+        watch(model, (value) => {
+            emit('update:value', value)
+        }, { deep: true, immediate: true })
 
         return () => {
             return (
-                <Form layout={'vertical'}>
+                <Form model={model} layout={'vertical'}>
                     <Table
                         search={false}
                         options={false}

diff --git a/src/packages/table/table/index.jsx b/src/packages/table/table/index.jsx
@@ -169,7 +169,7 @@ export default defineComponent({
 
         return () => {
             const { search: propsSearch, columns: propsColumns, manualRequest } = props
-            const { toolbar: propsToolbar, options: propsOptions, rowSelection: propsRowSelection } = props
+            const { toolbar: propsToolbar, rowSelection: propsRowSelection } = props
 
             const renderSearch = () => {
                 const searchProps = {
@@ -180,30 +180,30 @@ export default defineComponent({
                     onFinish: onFinish,
                     onReset: onReset
                 }
+                // custom search 只有插槽的形式
                 const customSearch = getSlotVNode(slots, {}, 'search', searchProps)
                 return customSearch || <Search {...searchProps}/>
             }
 
             const renderToolbar = () => {
-                const titleSlot = getSlot(slots, props, 'title')
-                const actionsSlot = getSlot(slots, props, 'actions')
-                const settingsSlot = getSlot(slots, props, 'settings')
+                const { options } = propsToolbar || {}
                 const toolbarSlots = {
-                    title: titleSlot,
-                    actions: actionsSlot,
-                    settings: settingsSlot
+                    title: getSlot(slots, props, 'title'),
+                    actions: getSlot(slots, props, 'actions'),
+                    settings: getSlot(slots, props, 'settings')
                 }
                 const toolbarProps = {
-                    options: propsOptions,
+                    options: options,
                     onExport: onExport
                 }
                 return <Toolbar {...toolbarProps} v-slots={toolbarSlots}/>
             }
 
             const renderAlert = () => {
-                const alertSlot = getSlot(slots, props, 'alert')
-                const alertOptionsSlot = getSlot(slots, props, 'alertOptions')
-                const alertSlots = { default: alertSlot, options: alertOptionsSlot }
+                const alertSlots = {
+                    default: getSlot(slots, props, 'alert'),
+                    options: getSlot(slots, props, 'alertOptions')
+                }
                 const alertProps = {
                     selectedRowKeys: rowSelection.selectedRowKeys,
                     selectedRows: rowSelection.selectedRows,
@@ -212,7 +212,7 @@ export default defineComponent({
                 return <Alert {...alertProps} v-slots={alertSlots}/>
             }
 
-            const cardBodyStyle = propsToolbar ? ({
+            const cardBodyStyle = propsToolbar !== false ? ({
                 paddingBlock: '16px',
                 paddingBlockStart: '0'
             }) : ({
@@ -231,24 +231,29 @@ export default defineComponent({
 
             const needTableSlots = omit(slots, ['search', 'extra', 'title', 'actions', 'settings', 'alert', 'alertOptions'])
 
-            const extraSlotScope = {
+            const baseTableDom = <Table {...needTableProps} v-slots={needTableSlots}/>
+            const tableDom = getSlotVNode(slots, props, 'table', {
+                props: needTableProps,
+                dom: baseTableDom
+            })
+
+            const extraDom = getSlotVNode(slots, props, 'extra', {
                 loading: requestProps.loading,
                 pageData: requestProps.dataSource,
                 pagination: requestProps.pagination
-            }
-            const extraDom = getSlotVNode(slots, props, 'extra', extraSlotScope)
+            })
 
             return (
                 <div class={cx('table')}>
                     {propsSearch !== false && renderSearch()}
                     {extraDom && <Extra>{extraDom}</Extra>}
                     <Card bodyStyle={cardBodyStyle}>
-                        {propsToolbar && renderToolbar()}
+                        {propsToolbar !== false && renderToolbar()}
                         {propsRowSelection !== false && renderAlert()}
                         <ConfigProvider getPopupContainer={getPopupContainer}>
                             <div class={cx('popup-container')} ref={popupContainer}>
                                 <div class={cx('table-wrapper')} ref={tableRef}>
-                                    <Table {...needTableProps} v-slots={needTableSlots}/>
+                                    {tableDom || baseTableDom}
                                 </div>
                             </div>
                         </ConfigProvider>

diff --git a/src/packages/table/table/props.js b/src/packages/table/table/props.js
@@ -51,12 +51,8 @@ const tableProps = {
         default: undefined
     },
     toolbar: {
-        type: Boolean,
-        default: true
-    },
-    options: {
         type: [Object, Boolean],
-        default: undefined
+        default: true
     },
     actions: {
         type: Function,
@@ -78,6 +74,10 @@ const tableProps = {
         type: Function,
         default: undefined
     },
+    table: {
+        type: Function,
+        default: undefined
+    },
     onChange: {
         type: Function,
         default: undefined

diff --git a/src/views/Home.jsx b/src/views/Home.jsx
@@ -112,7 +112,7 @@ export default defineComponent({
                 columns: unref(columns),
                 request: request,
                 search: { showCollapse: true },
-                options: { export: true },
+                toolbar: { options: { export: true } },
                 rowSelection: true,
                 onExport: onExport
             }