From 4d15d69be159b87f3c71fd36627f94f4a81b68ac Mon Sep 17 00:00:00 2001
From: qianlishi <1432731663@qq.com>
Date: Sat, 11 Jan 2025 23:57:29 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E8=A1=8C=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E8=B6=85=E8=BF=872=E4=B8=AA=E5=87=BA?=
 =?UTF-8?q?=E7=8E=B0=E6=9B=B4=E5=A4=9A=E4=B8=8B=E6=8B=89=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Jsq-tableActiion.vue       | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 Report-V3-TS/src/components/Base/Jsq-crud/src/components/Jsq-tableActiion.vue

diff --git a/Report-V3-TS/src/components/Base/Jsq-crud/src/components/Jsq-tableActiion.vue b/Report-V3-TS/src/components/Base/Jsq-crud/src/components/Jsq-tableActiion.vue
new file mode 100644
index 00000000..e1b8579e
--- /dev/null
+++ b/Report-V3-TS/src/components/Base/Jsq-crud/src/components/Jsq-tableActiion.vue
@@ -0,0 +1,61 @@
+<!--
+ * @Description: 使用于，表格行按钮超过2列出现更多展示按钮 
+ * @Author: qianlishi
+ * @Date: 2025-01-11 22:50:26
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2025-01-11 23:51:23
+-->
+<template>
+  <div class="flex items-center justify-center">
+    <template v-if="getActions.length <= 2">
+        <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
+          <n-button v-bind="action" class="mx-1">
+            {{ action.label }}
+          </n-button>
+        </template>
+      </template>
+      <template v-else>
+        <n-button v-bind="getActions[0]" class="mx-1">
+            {{ getActions[0].label }}
+        </n-button>
+        <n-dropdown trigger="hover" @select="select" :options="getActions.filter((item, index) => index > 0)">
+          <n-button quaternary type="primary" icon-placement="right">
+            更多
+            <template #icon>
+              <jsqIcon name="icon-zhankai" color="#3b82f680" :size='12'/>
+            </template>
+          </n-button>
+        </n-dropdown> 
+      </template>
+  </div>
+</template>
+<script lang='ts' setup>
+import { computed } from 'vue'
+import jsqIcon from '@/components/Base/Jsq-icon/index.vue'
+
+interface action {
+  label: string; // 按钮文本
+  key?: string | number, // 按钮标记
+  onClick: () => void; // 按钮点击事件
+  isShow?: (row?: object) => boolean; // 根据业务场景按钮是否显示 row当前行数据
+  permission?: string; // 目前只考虑一个按钮只绑定一个权限码
+}
+
+interface actionsProps {
+  actions: {
+    type: action[],
+    default: []
+  },
+  select: {
+    type: Function,
+    default: () => void,
+  },
+} 
+const props =  defineProps<actionsProps>()
+  console.log('111', props.actions)
+const getActions = computed<action[]>(() => {
+  return props.actions
+})
+
+</script>
+<style lang='less' scoped></style>