diff --git a/src/components/RayTable/src/components/TableScreenfull/index.scss b/src/components/RayTable/src/components/TableScreenfull/index.scss
new file mode 100644
index 00000000..140e4402
--- /dev/null
+++ b/src/components/RayTable/src/components/TableScreenfull/index.scss
@@ -0,0 +1,20 @@
+@keyframes scaleScreenfull {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.3);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+.tay-table-icon__screenfull {
+ transition: transform 0.3s var(--r-bezier);
+
+ &:hover {
+ animation: scaleScreenfull 0.3s linear;
+ animation-direction: alternate;
+ }
+}
diff --git a/src/components/RayTable/src/components/TableScreenfull/index.tsx b/src/components/RayTable/src/components/TableScreenfull/index.tsx
index 086e3c6b..e8d55abe 100644
--- a/src/components/RayTable/src/components/TableScreenfull/index.tsx
+++ b/src/components/RayTable/src/components/TableScreenfull/index.tsx
@@ -9,6 +9,8 @@
* @remark 今天也是元气满满撸代码的一天
*/
+import './index.scss'
+
import { NPopover } from 'naive-ui'
import RayIcon from '@/components/RayIcon/index'
@@ -51,7 +53,7 @@ const TableScreenfull = defineComponent({
),
diff --git a/src/components/RayTable/src/components/TableSetting/index.tsx b/src/components/RayTable/src/components/TableSetting/index.tsx
index 14e64ab5..5e72c9a7 100644
--- a/src/components/RayTable/src/components/TableSetting/index.tsx
+++ b/src/components/RayTable/src/components/TableSetting/index.tsx
@@ -9,11 +9,19 @@
* @remark 今天也是元气满满撸代码的一天
*/
+/**
+ *
+ * 依赖 table columns 属性操作
+ *
+ * 支持拖拽修改列顺序、动态修改列宽度、固定(锁列)
+ */
+
import './index.scss'
import { NCard, NPopover, NEllipsis } from 'naive-ui'
import RayIcon from '@/components/RayIcon/index'
import VueDraggable from 'vuedraggable'
+
import { setupSettingOptions } from './hook'
import { useSetting } from '@/store'
@@ -28,17 +36,19 @@ const TableSetting = defineComponent({
name: 'TableSetting',
emits: ['columnsUpdate'],
setup(_, { emit }) {
- const settingStore = useSetting()
const tableSettingProvider = inject(
'tableSettingProvider',
{} as TableSettingProvider,
)
+ const settingStore = useSetting()
+
const settingOptions = ref(
setupSettingOptions(tableSettingProvider.modelColumns.value),
) // 表格表头
const disableDraggable = ref(true) // 拖拽开关(暂时弃用)
const { themeValue } = storeToRefs(settingStore)
+ /** 拖拽结束后 */
const handleDraggableEnd = () => {
emit('columnsUpdate', settingOptions.value)
}
@@ -99,7 +109,7 @@ const TableSetting = defineComponent({
*
* @param idx 索引
*
- * @remark 动态设置列宽度
+ * @remark 动态设置列宽度, 如果表格并未出现横向滚动条则不会启用拖拽修改列按钮
*/
const handleResizeColumnClick = (idx: number) => {
const value = settingOptions.value[idx]
diff --git a/src/components/RayTable/src/index.scss b/src/components/RayTable/src/index.scss
index 945f5490..7f0ffc75 100644
--- a/src/components/RayTable/src/index.scss
+++ b/src/components/RayTable/src/index.scss
@@ -12,7 +12,7 @@
& .ray-table-header-extra__space {
display: flex;
- gap: 0 1px;
+ gap: 0 12px;
align-items: center;
}
}
diff --git a/src/components/RayTable/src/index.tsx b/src/components/RayTable/src/index.tsx
index c34203ee..ef3880e0 100644
--- a/src/components/RayTable/src/index.tsx
+++ b/src/components/RayTable/src/index.tsx
@@ -26,6 +26,14 @@
* 基于 `xlsx.js` 实现输出 `excel`
*/
+/**
+ *
+ * 为什么有些拓展功能是写在该组件内, 有些则是完全抽离出去呢...
+ * 好问题, 因为我一开始没想到而且我又想偷懒
+ *
+ * 凑合凑合看吧, 等我啥时候有空再抽离出去
+ */
+
import './index.scss'
import { NDataTable, NCard, NDropdown, NDivider } from 'naive-ui'
@@ -49,8 +57,8 @@ const RayTable = defineComponent({
props: props,
emits: ['update:columns', 'menuSelect', 'exportSuccess', 'exportError'],
setup(props, { emit }) {
- const tableUUID = uuid()
- const rayTableUUID = uuid()
+ const tableUUID = uuid() // 表格 id, 用于打印表格
+ const rayTableUUID = uuid() // RayTable id, 用于全屏表格
const modelRightClickMenu = computed(() => props.rightClickMenu)
const modelColumns = computed({
get: () => props.columns,
@@ -73,10 +81,7 @@ const RayTable = defineComponent({
})
const tableSize = ref(props.size)
- /**
- *
- * 右键菜单注入
- */
+ /** 注入相关属性 */
provide('tableSettingProvider', {
modelRightClickMenu,
modelColumns,
@@ -84,6 +89,7 @@ const RayTable = defineComponent({
rayTableUUID,
})
+ /** 拖拽更新后的表格列 */
const handleColumnsUpdate = (arr: ActionOptions[]) => {
modelColumns.value = arr
}
@@ -182,6 +188,7 @@ const RayTable = defineComponent({
print(options)
}
+ /** 更新后的表格尺寸 */
const handleChangeTableSize = (size: ComponentSize) => {
tableSize.value = size
}
@@ -252,7 +259,6 @@ const RayTable = defineComponent({
negativeText={this.printNegativeText}
onPositive={this.handlePrintPositive.bind(this)}
/>
-
{/* 输出为Excel表格 */}
-
{/* 表格尺寸调整 */}
-
{/* 全屏表格 */}
-
{/* 表格列操作 */}