diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 82aac931784..3190754cad7 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -8,11 +8,13 @@ ### ⚡ Performance Improvements - 优化首屏体积大小 +- 优化 TableAction 组件 ### 🐛 Bug Fixes - 修复一级菜单折叠显示菜单名问题 - 修复预览命令不打包问题 +- 修复表格 actionColOptions 参数不生效问题 # 2.0.0-rc.3 (2020-10-19) diff --git a/src/components/Table/src/components/CellResize.tsx b/src/components/Table/src/components/CellResize.tsx deleted file mode 100644 index e485074e503..00000000000 --- a/src/components/Table/src/components/CellResize.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { defineComponent, ref, computed, unref } from 'vue'; -import { injectTable } from '../hooks/useProvinceTable'; -import { getSlot } from '/@/utils/helper/tsxHelper'; - -import VueDraggableResizable from 'vue-draggable-resizable'; -export default defineComponent({ - name: 'DragResize', - setup(props, { slots, attrs }) { - const elRef = ref(null); - const draggingMapRef = ref<{ [key in string]: number | string }>({}); - - const tableInstance = injectTable(); - - const getColumnsRef = computed(() => { - const columns = tableInstance.getColumns(); - columns.forEach((col) => { - const { key } = col; - if (key) { - draggingMapRef.value[key] = col.width as number; - } - }); - return columns; - }); - - return () => { - const { key = '', ...restProps } = { ...attrs }; - const col = unref(getColumnsRef).find((col) => { - const k = col.dataIndex || col.key; - return k === key; - }); - if (!col || !col.width) { - return {getSlot(slots, 'default')}; - } - const onDrag = (x: number) => { - draggingMapRef.value[key] = 0; - col.width = Math.max(x, 1); - }; - - const onDragstop = () => { - const el = unref(elRef); - if (!el) { - return; - } - draggingMapRef.value[key] = el.getBoundingClientRect().width; - }; - return ( - - {getSlot(slots, 'default')} - - - ); - }; - }, -}); diff --git a/src/components/Table/src/components/TableAction.tsx b/src/components/Table/src/components/TableAction.tsx index 7cd9fac1230..0341acd043a 100644 --- a/src/components/Table/src/components/TableAction.tsx +++ b/src/components/Table/src/components/TableAction.tsx @@ -16,114 +16,93 @@ export default defineComponent({ type: Array as PropType, default: null, }, + + moreText: { + type: String as PropType, + default: '更多', + }, }, setup(props) { + function renderButton(action: ActionItem, index: number) { + const { disabled = false, label, icon, color = '', type = 'link' } = action; + const button = ( + + ); + return button; + } + + function renderPopConfirm(action: ActionItem, index: number) { + const { popConfirm = null } = action; + if (!popConfirm) { + return renderButton(action, index); + } + const { + title, + okText = '确定', + cancelText = '取消', + confirm = () => {}, + cancel = () => {}, + icon = '', + } = popConfirm; + return ( + + {() => renderButton(action, index)} + + ); + } + + const dropdownDefaultSLot = () => ( + + ); + // 增加按钮的TYPE和COLOR return () => { const { dropDownActions = [], actions } = props; return (
- {actions && - actions.length && - actions.map((action, index) => { - const { - disabled = false, - label, - icon, - color = '', - type = 'link', - popConfirm = null, - } = action; - const button = ( - - ); - if (popConfirm !== null) { - const { - title, - okText = '确定', - cancelText = '取消', - confirm = () => {}, - cancel = () => {}, - icon = '', - } = popConfirm; - return ( - - {() => button} - - ); - } - return button; - })} - {dropDownActions && dropDownActions.length && ( + {actions?.map((action, index) => { + return renderPopConfirm(action, index); + })} + {dropDownActions?.length && ( {{ - default: () => ( - - ), + default: dropdownDefaultSLot, overlay: () => { return ( {{ default: () => { return dropDownActions.map((action, index) => { - const { - disabled = false, - label, - icon, - color = '', - type = 'link', - } = action; + const { disabled = false } = action; return ( - {() => ( - - )} + {() => { + return renderPopConfirm(action, index); + }} ); }); diff --git a/src/components/Table/src/components/renderEditableCell.tsx b/src/components/Table/src/components/renderEditableCell.tsx index a803932849f..ea0e1519072 100644 --- a/src/components/Table/src/components/renderEditableCell.tsx +++ b/src/components/Table/src/components/renderEditableCell.tsx @@ -46,7 +46,7 @@ const EditableCell = defineComponent({ const currentValueRef = ref(props.value); function handleChange(e: ChangeEvent | string | boolean) { - if ((e as ChangeEvent).target && Reflect.has((e as ChangeEvent).target, 'value')) { + if (Reflect.has((e as ChangeEvent)?.target, 'value')) { currentValueRef.value = (e as ChangeEvent).target.value; } if (isString(e) || isBoolean(e)) { @@ -58,7 +58,7 @@ const EditableCell = defineComponent({ isEditRef.value = true; nextTick(() => { const el = unref(elRef); - el && el.focus && el.focus(); + el?.focus(); }); }