vue3-smart-table 0.0.2 → 1.0.2

package/README.md

@@ -1,4 +1,4 @@
-# CX-SmartTable v0.0.1 使用文档
+# SmartTable 使用文档
 
 ## 概览
 
@@ -55,10 +55,7 @@ export interface ColumnConfig<R = any> {
 
   visible?: boolean
   inControl?: boolean
-
   render?: string
-  editable?: boolean
-  editType?: 'input' | 'number' | 'select'
 
   renderProps?: Record<string, any>
   columnProps?: Record<string, any>
@@ -119,8 +116,12 @@ export interface ButtonConfig<R = any> {
 | `dict` | 字典映射 |
 | `map` | key-value 映射 |
 | `formatter` | 自定义格式化 |
-| `editable` | 可编辑单元格（input / number / select） |
 | `icon` | iconfont / svg / url |
+| `input` | 可编辑单元格 |
+| `input-number` | 可编辑单元格 |
+| `select` | 可编辑单元格 |
+| `button` | 单行按钮 |
+| `link` | 单行链接 |
 
 ### copy 示例
 
@@ -143,12 +144,39 @@ export interface ButtonConfig<R = any> {
   key: 'avatar',
   label: '头像',
   render: 'img',
-  renderProps: { style: 'width:50px;height:50px' }
-}
-
+  columnProps: { minWidth: 150},
+  renderProps: {
+    width: '60px',
+    height: '60px',
+    fit: 'cover',
+    placeholder: '--'
+  }
+},
+{
+  key: 'gallery',
+  label: '相册',
+  render: 'img',
+  columnProps: { minWidth: 150},
+  renderProps: {
+    width: '100px',
+    height: '100px'
+  }
+},
+const tableData = reactive([
+  { id: 3, name: 'Charlie', code: '9525', status: 0, map: 1, regionCode:'海外', orderNum: 1, selectId: 2, 
+    avatar: 'https://iconfont.alicdn.com/p/illus_3d/file/UMAqlm6KX5gw/8e357f00-9a4e-44c4-b0c5-bbed255cff24.png' ,
+    gallery: [
+      'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
+      'https://iconfont.alicdn.com/p/illus_3d/file/UMAqlm6KX5gw/8e357f00-9a4e-44c4-b0c5-bbed255cff24.png',
+    ],
+  },
+])
 ```
-- 支持图片预览
-- 可传入 previewSrcList、fit、style 等 renderProps
+- 单张图片：正常显示并支持预览
+- 多张图片：显示第一张，右侧显示剩余数量（如：+2）
+- 支持 previewSrcList 自定义预览列表
+- 支持图片大小（width/height）、填充模式（fit）配置
+- 无图片时显示占位符或空内容
 
 ### map 示例
 
@@ -208,23 +236,21 @@ const Enables = [
 ```
 - 使用自定义函数格式化显示内容
 
-### editable 渲染器
+### 编辑型 渲染器
 
 ```ts
 {
   key: 'age',
   label: '年龄',
-  render: 'editable',
-  editable: true,
-  editType: 'number',
+  render: 'input-number',
   renderProps: { min: 0, max: 120 }
 }
 ```
 - 支持类型：input / number / select
 - 支持事件：
-  - cellChange(row, key) 值变化
-  - cellBlur(row, key) 失去焦点
-  - cellEnter(row, key) 回车事件（input）
+  - cellChange(row, col) 值变化
+  - cellBlur(row, col) 失去焦点
+  - cellEnter(row, col) 回车事件（input）
 ### icon 示例
 ```ts
 {
@@ -237,7 +263,21 @@ const Enables = [
 - 支持网络图片 URL
 - 支持 svg 字符串
 - 支持 iconfont class
+
+### button / link
+```ts
+{ key: 'action', label: '操作', render: 'button', renderProps: { label: '编辑', type: 'text' } }
+{ key: 'url', label: '查看', render: 'link', renderProps: { label: '详情', href: 'https://example.com', blank: true } }
+
+```
+- 支持事件：
+  - cellClick(row, col) 点击事件
+
+
 ## 5. useTableColumns（列显隐缓存）
+```ts
+const { columns } = useTableColumns(defaultColumns, { pageKey: 'user-list', userId: currentUserId })
+```
 
 ### 设计原则
 
@@ -257,26 +297,242 @@ const { columns } = useTableColumns(defaultColumns, {
 - 不传则不启用缓存
 
 ---
+## 6. 事件
+- 支持类型：input / number / select 
+- 支持事件：
+  - cellChange(row, col) 值变化
+  - cellBlur(row, col) 失去焦点
+  - cellEnter(row, col) 回车事件（input）
+  - cellClick(row, col) 点击事件
+
 
-## 6. 使用示例
+## 7. 使用示例
 
 ```vue
+<!-- 全局注册 -->
+import { createApp } from 'vue'
+import App from './App.vue'
+import { SmartTable } from 'vue3-smart-table'
+
+const app = createApp(App)
+app.component('SmartTable', SmartTable)
+app.mount('#app')
+
+<!-- 或者局部注册 -->
+<script setup>
+import { SmartTable } from 'vue3-smart-table'
+</script>
+
 <SmartTable
-  :data="tableData"
   v-model:columns="columns"
-  :permissions="userPermissions"
-  :user-id="userId"
-  page-key="user-list"
+  :border="true" 
+  :loading="loading"
+  :pageKey="route.name"
+  :rowKey="'appId'"
+  :data="tabList"
+  :userId="userInfo?.userId"
+  :permissions="userStore.permissions"
   @cellChange="onCellChange"
-/>
+  @cellBlur="onCellBlur"
+  @cellEnter="onCellEnter"
+  @cellClick="onCellClick" >
+</SmartTable>
+```
+## 完整示例代码
+![DEMO](./demo/assets/dmeo.jpg)
+```vue
+<template>
+    <div class="demo-container" style="padding: 20px;">
+      <h2>Demo</h2>
+      <SmartTable
+        class="h-400px"
+        class-name="table-flex" 
+        :border="true" 
+        :loading="loading"
+        :pageKey="'route.name'"
+        :rowKey="'id'"
+        :data="tableData"
+        v-model:columns="columns"
+        :userId="'userId'"
+        :permissions="permissions"
+        @cell-blur="onCellBlur"
+        @cell-enter="onCellEnter"
+        @cell-change="onCellChange"
+        @cell-click="onCellClick"
+      />
+    </div>
+  </template>
+  
+  <script setup lang="ts" name="APP">
+  import { reactive, ref } from 'vue'
+  import { SmartTable } from 'vue3-smart-table'
+  const loading = ref(false)
+  const Enables = [
+    { label: '启用', value: 1, listClass: 'primary' },
+    { label: '禁用', value: 0, listClass: 'warning' }
+  ]
+  const buttonConfigs = [
+    { permission: 'edit', label: '编辑', type: 'primary', action: (row: any) => console.log(row)},
+    { permission: 'view', label:'删除', type: 'danger', action: (row: any) => console.log(row)},
+    { permission: 'copy', label: '复制', type: 'success', action: (row: any) => console.log(row)},
+  ]
+  const permissions = ['edit', 'view']
+  const columns = ref([
+    { 
+      type: 'selection',
+      key: 'index', 
+      inControl: false,
+    },
+    { 
+      type: 'index',
+      key: 'index', 
+      label: '序号', 
+      inControl: false,
+      columnProps: { width: 60}
+    },
+    {
+      type: 'operation',
+      key: 'opt',
+      label: '操作',
+      inControl: false,
+      buttons: buttonConfigs, 
+      columnProps: {
+        fixed: "right",
+        align: "left"
+      }
+    },
+    {
+      key: 'action',
+      label: '按钮',
+      render: 'button',
+      renderProps: {
+        label: '编辑',
+        type: 'text'
+      }
+    },
+    {
+      key: 'url',
+      label: 'li单元格',
+      render: 'link',
+      renderProps: {
+        label: '查看详情',
+        href: 'https://example.com',
+        blank: true
+      }
+    },
+    { 
+      key: "selectId", 
+      label: "可选单元格", 
+      visible: true,
+      render: 'select',
+      columnProps: { minWidth: 150},
+      renderProps:{
+        options: [
+          {label: '选中-1', value: 1},
+          {label: '选中-2', value: 2},
+        ]
+      }
+    },
+    { 
+      key: "orderNum", 
+      label: "输入单元格", 
+      visible: true,
+      render: 'input-number',
+      columnProps: { minWidth: 150, sortable: true} 
+    },
+    {
+      key: 'avatar',
+      label: '头像',
+      render: 'img',
+      columnProps: { minWidth: 150, sortable: true},
+      renderProps: {
+        width: '60px',
+        height: '60px',
+        fit: 'cover',
+        placeholder: '--'
+      }
+    },
+    {
+      key: 'gallery',
+      label: '相册',
+      render: 'img',
+      columnProps: { minWidth: 150, sortable: true},
+      renderProps: {
+        width: '100px',
+        height: '100px'
+      }
+    },
+    { 
+      key: 'name', 
+      label: 'Name', 
+      visible: true, 
+      render: 'html' 
+    },
+    { 
+      key: "code", 
+      label: "系统标识", 
+      visible: true, 
+      render: "copy",
+      columnProps: { minWidth: 160, sortable: true}
+    },
+    { 
+      key: "status", 
+      label: "状态", 
+      visible: true, 
+      render: "dict",
+      renderProps: {
+        options: Enables,
+      },
+      columnProps: { minWidth: 80, sortable: true}
+    },
+    { 
+      key: 'map', 
+      label: 'Map', 
+      visible: true, 
+      render: 'map', 
+      renderProps: { options: { 1: 'Active', 0: 'Inactive' } } 
+    },
+    { 
+      key: "regionCode", 
+      label: "区域", 
+      visible: true, 
+      render: "formatter",
+      columnProps: { minWidth: 100, sortable: true, align: 'left'},
+      formatter: (val: string) => `${val}-123`,
+    },
+  ])
+
+  const tableData = reactive([
+    { id: 1, name: 'Alice', code: '9527', status: 1, map: 1, regionCode:'海外', orderNum: 1, selectId: 1 },
+    { id: 2, name: 'Bob', code: '9526', status: 1, map: 1, regionCode:'海外', orderNum: 1, selectId: 1 },
+    { id: 3, name: 'Charlie', code: '9525', status: 0, map: 1, regionCode:'海外', orderNum: 1, selectId: 2 },
+    { id: 3, name: 'Charlie', code: '9525', status: 0, map: 1, regionCode:'海外', orderNum: 1, selectId: 2, 
+      avatar: 'https://iconfont.alicdn.com/p/illus_3d/file/UMAqlm6KX5gw/8e357f00-9a4e-44c4-b0c5-bbed255cff24.png' ,
+      gallery: [
+        'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
+        'https://iconfont.alicdn.com/p/illus_3d/file/UMAqlm6KX5gw/8e357f00-9a4e-44c4-b0c5-bbed255cff24.png',
+      ],
+    },
+  ])
+
+  // 编辑单元格回调
+  const onCellBlur = (row: any, col: any) => {
+    console.log('cell blur:', row, col)
+  }
+  const onCellEnter = (row: any, col: any) => {
+    console.log('cell enter:', row, col)
+  }
+  const onCellChange = (row: any, col: any) => {
+    console.log('cell Change:', row, col)
+  }
+  
+  const onCellClick = (row: any, col: any) => {
+    console.log('cell button click:', row, col)
+  }
+  </script>
+  
 ```
 
-## 7. 设计边界说明
-
-- SmartTable **不关心权限系统如何实现**
-- permission 只是 string 比对
-- renderer 只负责 UI，不处理权限
-- 操作列是否显示由 SmartTable 统一决策
 
 
 

package/dist/vue3-smart-table.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),C=require("element-plus"),S=e.defineComponent({__name:"input",props:{row:{},col:{},onCellBlur:{type:Function},onCellEnter:{type:Function}},setup(n){const t=n,l=e.ref(t.row[t.col.key]);e.watch(l,s=>{t.row[t.col.key]=s});const r=()=>{var s;return(s=t.onCellBlur)==null?void 0:s.call(t,t.row,t.col)},o=()=>{var s;return(s=t.onCellEnter)==null?void 0:s.call(t,t.row,t.col)};return(s,c)=>{const m=e.resolveComponent("el-input");return e.openBlock(),e.createBlock(m,e.mergeProps({modelValue:l.value,"onUpdate:modelValue":c[0]||(c[0]=d=>l.value=d)},{placeholder:"",size:"small",clearable:!0,...n.col.renderProps},{onBlur:r,onKeyup:e.withKeys(o,["enter"])}),null,16,["modelValue"])}}}),V=e.defineComponent({__name:"inputNumber",props:{row:{},col:{},onCellChange:{type:Function},onCellBlur:{type:Function},onCellEnter:{type:Function}},setup(n){const t=n,l=e.ref(t.row[t.col.key]);e.watch(l,s=>{var c;t.row[t.col.key]=s,(c=t.onCellChange)==null||c.call(t,t.row,t.col)});const r=()=>{var s;return(s=t.onCellBlur)==null?void 0:s.call(t,t.row,t.col)},o=()=>{var s;return(s=t.onCellEnter)==null?void 0:s.call(t,t.row,t.col)};return(s,c)=>{const m=e.resolveComponent("el-input-number");return e.openBlock(),e.createBlock(m,e.mergeProps({modelValue:l.value,"onUpdate:modelValue":c[0]||(c[0]=d=>l.value=d)},{min:0,max:99999,controls:!1,size:"small",...n.col.renderProps},{onBlur:r,onKeyup:e.withKeys(o,["enter"])}),null,16,["modelValue"])}}}),F=e.defineComponent({__name:"select",props:{row:{},col:{},onCellChange:{type:Function},onCellBlur:{type:Function},onCellEnter:{type:Function}},setup(n){const t=n,l=e.ref(t.row[t.col.key]);e.watch(l,c=>{t.row[t.col.key]=c});const r=()=>{var c;return(c=t.onCellChange)==null?void 0:c.call(t,t.row,t.col)},o=()=>{var c;return(c=t.onCellBlur)==null?void 0:c.call(t,t.row,t.col)},s=()=>{var c;return(c=t.onCellEnter)==null?void 0:c.call(t,t.row,t.col)};return(c,m)=>{const d=e.resolveComponent("el-option"),i=e.resolveComponent("el-select");return e.openBlock(),e.createBlock(i,e.mergeProps({modelValue:l.value,"onUpdate:modelValue":m[0]||(m[0]=f=>l.value=f)},{placeholder:"请选择",size:"small",clearable:!0,...n.col.renderProps},{onChange:r,onBlur:o,onKeyup:e.withKeys(s,["enter"])}),{default:e.withCtx(()=>{var f;return[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(((f=n.col.renderProps)==null?void 0:f.options)||[],u=>(e.openBlock(),e.createBlock(d,{key:u.value,label:u.label,value:u.value},null,8,["label","value"]))),128))]}),_:1},16,["modelValue"])}}}),_=n=>e.defineComponent({props:["row","col","onCellChange","onCellBlur","onCellEnter","onClick"],setup(t){return()=>e.h(n,t)}});function A(n){return typeof n.formatter=="function"}function K(){return{input:_(S),"input-number":_(V),select:_(F),button:n=>{const t=n.col.renderProps||{};return e.h(C.ElButton,{type:t.type||"primary",...t,onClick:()=>{var l;return(l=n.onClick)==null?void 0:l.call(n,n.row,n.col)}},()=>t.label||n.row[n.col.key])},link:n=>{const t=n.col.renderProps||{};return e.h("a",{href:t.href||"#",target:t.blank?"_blank":"_self",style:t.style||"color:#409EFF;cursor:pointer;",onClick:l=>{var r;l.preventDefault(),(r=n.onClick)==null||r.call(n,n.row,n.col)}},t.label||n.row[n.col.key])},html:n=>{var t;return e.h("div",{class:"line-clamp-2",innerHTML:n.row[n.col.key]??"",...((t=n.col)==null?void 0:t.renderProps)||{}})},copy:n=>{const t=n.row[n.col.key]??"";return e.h("div",{class:"copy-wrapper",style:"position: relative; display: inline-block;"},[e.h("span",{class:"copy-text line-clamp-1",style:"padding-right: 20px;"},t),e.h("span",{class:"copy-btn",style:`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),k=require("element-plus"),V=e.defineComponent({__name:"input",props:{row:{},col:{},onCellBlur:{type:Function},onCellEnter:{type:Function}},setup(n){const t=n,r=e.ref(t.row[t.col.key]);e.watch(r,s=>{t.row[t.col.key]=s});const o=()=>{var s;return(s=t.onCellBlur)==null?void 0:s.call(t,t.row,t.col)},l=()=>{var s;return(s=t.onCellEnter)==null?void 0:s.call(t,t.row,t.col)};return(s,c)=>{const a=e.resolveComponent("el-input");return e.openBlock(),e.createBlock(a,e.mergeProps({modelValue:r.value,"onUpdate:modelValue":c[0]||(c[0]=d=>r.value=d)},{placeholder:"",size:"small",clearable:!0,...n.col.renderProps},{onBlur:o,onKeyup:e.withKeys(l,["enter"])}),null,16,["modelValue"])}}}),F=e.defineComponent({__name:"inputNumber",props:{row:{},col:{},onCellChange:{type:Function},onCellBlur:{type:Function},onCellEnter:{type:Function}},setup(n){const t=n,r=e.ref(t.row[t.col.key]);e.watch(r,s=>{var c;t.row[t.col.key]=s,(c=t.onCellChange)==null||c.call(t,t.row,t.col)});const o=()=>{var s;return(s=t.onCellBlur)==null?void 0:s.call(t,t.row,t.col)},l=()=>{var s;return(s=t.onCellEnter)==null?void 0:s.call(t,t.row,t.col)};return(s,c)=>{const a=e.resolveComponent("el-input-number");return e.openBlock(),e.createBlock(a,e.mergeProps({modelValue:r.value,"onUpdate:modelValue":c[0]||(c[0]=d=>r.value=d)},{min:0,max:99999,controls:!1,size:"small",...n.col.renderProps},{onBlur:o,onKeyup:e.withKeys(l,["enter"])}),null,16,["modelValue"])}}}),A=e.defineComponent({__name:"select",props:{row:{},col:{},onCellChange:{type:Function},onCellBlur:{type:Function},onCellEnter:{type:Function}},setup(n){const t=n,r=e.ref(t.row[t.col.key]);e.watch(r,c=>{t.row[t.col.key]=c});const o=()=>{var c;return(c=t.onCellChange)==null?void 0:c.call(t,t.row,t.col)},l=()=>{var c;return(c=t.onCellBlur)==null?void 0:c.call(t,t.row,t.col)},s=()=>{var c;return(c=t.onCellEnter)==null?void 0:c.call(t,t.row,t.col)};return(c,a)=>{const d=e.resolveComponent("el-option"),u=e.resolveComponent("el-select");return e.openBlock(),e.createBlock(u,e.mergeProps({modelValue:r.value,"onUpdate:modelValue":a[0]||(a[0]=f=>r.value=f)},{placeholder:"请选择",size:"small",clearable:!0,...n.col.renderProps},{onChange:o,onBlur:l,onKeyup:e.withKeys(s,["enter"])}),{default:e.withCtx(()=>{var f;return[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(((f=n.col.renderProps)==null?void 0:f.options)||[],p=>(e.openBlock(),e.createBlock(d,{key:p.value,label:p.label,value:p.value},null,8,["label","value"]))),128))]}),_:1},16,["modelValue"])}}}),x=n=>e.defineComponent({props:["row","col","onCellChange","onCellBlur","onCellEnter","onClick"],setup(t){return()=>e.h(n,t)}});function K(n){return typeof n.formatter=="function"}function O(){return{input:x(V),"input-number":x(F),select:x(A),button:n=>{const t=n.col.renderProps||{};return e.h(k.ElButton,{type:t.type||"primary",...t,onClick:()=>{var r;return(r=n.onClick)==null?void 0:r.call(n,n.row,n.col)}},()=>t.label||n.row[n.col.key])},link:n=>{const t=n.col.renderProps||{};return e.h("a",{href:t.href||"#",target:t.blank?"_blank":"_self",style:t.style||"color:#409EFF;cursor:pointer;",onClick:r=>{var o;r.preventDefault(),(o=n.onClick)==null||o.call(n,n.row,n.col)}},t.label||n.row[n.col.key])},html:n=>{var t;return e.h("div",{class:"line-clamp-2",innerHTML:n.row[n.col.key]??"",...((t=n.col)==null?void 0:t.renderProps)||{}})},copy:n=>{const t=n.row[n.col.key]??"";return e.h("div",{class:"copy-wrapper",style:"position: relative; display: inline-block;"},[e.h("span",{class:"copy-text line-clamp-1",style:"padding-right: 20px;"},t),e.h("span",{class:"copy-btn",style:`
                 position: absolute;
                 right: 0;
                 top: 50%;
@@ -8,4 +8,14 @@
                 font-size: 12px;
                 color: #409EFF;
                 user-select: none;
-              `,onClick:()=>{if(t)try{if(navigator.clipboard&&navigator.clipboard.writeText)navigator.clipboard.writeText(t).then(()=>{C.ElMessage.success("复制成功")}).catch(()=>{C.ElMessage.error("复制失败")});else{const l=document.createElement("textarea");l.value=t,l.style.position="fixed",l.style.opacity="0",document.body.appendChild(l),l.select();const r=document.execCommand("copy");document.body.removeChild(l),r?C.ElMessage.success("复制成功"):C.ElMessage.error("复制失败")}}catch{C.ElMessage.error("复制失败")}}},"📋")])},img:n=>{var r;const t=n.row[n.col.key]??"",l=((r=n.col)==null?void 0:r.renderProps)||{};return e.h(C.ElImage,{src:t,previewSrcList:(l==null?void 0:l.previewSrcList)??(Array.isArray(t)?t:[t]),fit:"contain",style:"width:80px;height:80px",...l})},dict:n=>{const t=n.row[n.col.key],l=n.col.renderProps||{},r=l.options??[],o=l.showValue??!1;if(t==null||t==="")return"";const s=Array.isArray(t)?t.map(String):[String(t)],c=r.filter(i=>s.includes(String(i.value))),m=s.filter(i=>!r.some(f=>String(f.value)===i)),d=c.map((i,f)=>e.h(C.ElTag,{key:i.value,type:i.listClass,class:i.cssClass,disableTransitions:!0},{default:()=>i.label+" "}));return o&&m.length>0&&d.push(e.h("span",{},m.join(" "))),e.h("div",{},d)},map:n=>{var r;const t=n.row[n.col.key],l=((r=n.col.renderProps)==null?void 0:r.options)??{};return t!=null?l[t]??"":""},formatter:n=>{var o;const{col:t,row:l}=n,r=l[t.key];return A(t)?(o=t.formatter)==null?void 0:o.call(t,r,l):r??""},icon:n=>{const t=n.row[n.col.key]??"",l=n.col.renderProps||{};return t?/^https?:\/\//.test(t)?e.h(C.ElImage,{src:t,previewSrcList:[t],fit:"contain",style:"width:40px;height:40px",...l}):/^\s*<svg[\s\S]*<\/svg>\s*$/.test(t)?e.h("div",{innerHTML:t,style:`width:40px;height:40px;display:inline-block;${l.style||""}`,...l}):e.h("i",{class:t,style:`font-size:20px;${l.style||""}`,...l}):""}}}function O(n,t=10,l=[]){const o="*:*:*",s=a=>{if(!a)return!0;const p=Array.isArray(a)?a:[a];return l.some(y=>y===o||p.includes(y))},c=e.computed(()=>n.some(a=>s(a.permission))),m=e.computed(()=>n.filter(p=>s(p.permission)).slice(0,t).reduce((p,y)=>p+(y.width??55),0)),d=(a,p)=>s(a.permission)&&(a.visible?a.visible(p):!0),i=a=>n.filter(y=>d(y,a)).slice(0,t).reduce((y,w)=>y+(w.width??55),0);return{hasAnyButton:c,optWidth:m,hasAnyVisibleButton:a=>a!=null&&a.length?a.some(p=>n.some(y=>d(y,p))):!1,getMaxOptWidth:a=>a!=null&&a.length?a.reduce((p,y)=>Math.max(p,i(y)),0):m.value,getVisibleButtons:a=>n.filter(p=>d(p,a)).slice(0,t)}}const M=e.defineComponent({__name:"index",props:{col:{type:Object,required:!0},permissions:{type:Array,default:()=>[]}},emits:["cellBlur","cellEnter","cellChange","cellClick"],setup(n,{emit:t}){const l=n,r=t,{col:o}=e.toRefs(l),s=(h,k)=>r("cellChange",h,k),c=(h,k)=>r("cellBlur",h,k),m=(h,k)=>r("cellEnter",h,k),d=(h,k)=>r("cellClick",h,k),i=K(),{hasAnyButton:f,hasAnyVisibleButton:u,optWidth:g,getMaxOptWidth:a,getVisibleButtons:p}=O(o.value.buttons||[],o.value.maxbtn??10,l.permissions||[]),y=e.computed(()=>(o.value.buttons||[]).length?(o.value.__rows||[]).length?u(o.value.__rows||[]):f.value:!1),w=e.computed(()=>o.value.__rows?a(o.value.__rows):g.value);function E(h){return!(h.type==="selection"||h.type==="index"||h.type==="operation"&&!y.value||h.visible===!1)}return(h,k)=>{const b=e.resolveComponent("el-table-column"),P=e.resolveComponent("el-button");return e.unref(o).type==="selection"?(e.openBlock(),e.createBlock(b,e.mergeProps({key:0,type:"selection"},e.unref(o).columnProps),null,16)):e.unref(o).type==="index"?(e.openBlock(),e.createBlock(b,e.mergeProps({key:1,type:"index",label:e.unref(o).label||"#",align:"center"},e.unref(o).columnProps),null,16,["label"])):e.unref(o).type==="operation"&&y.value?(e.openBlock(),e.createBlock(b,e.mergeProps({key:2,label:e.unref(o).label||"操作",align:"center"},{...e.unref(o).columnProps,width:w.value}),{default:e.withCtx(({row:v})=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(p)(v),B=>(e.openBlock(),e.createBlock(P,{key:B.label,type:B.type||"primary",link:"",onClick:N=>B.action(v)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(B.label),1)]),_:2},1032,["type","onClick"]))),128))]),_:1},16,["label"])):E(e.unref(o))?(e.openBlock(),e.createBlock(b,e.mergeProps({key:3,prop:e.unref(o).key,label:e.unref(o).label,align:"center"},e.unref(o).columnProps||{}),{default:e.withCtx(({row:v})=>[e.unref(o).render&&e.unref(i)[e.unref(o).render]?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(i)[e.unref(o).render]),{key:0,row:v,col:e.unref(o),onCellChange:s,onCellBlur:c,onCellEnter:m,onClick:d},null,40,["row","col"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(v[e.unref(o).key]),1)],64))]),_:1},16,["prop","label"])):e.createCommentVNode("",!0)}}}),I="table_columns_";function $(n,t){return`${I}${n}_${t}`}function x(n,t){if(!(t!=null&&t.length))return n;const l=new Map(t.map(r=>[r.key,r]));return n.map(r=>{const o=l.get(r.key);return o?{...r,visible:typeof o.visible=="boolean"?o.visible:r.visible}:r})}function T(n,t){const{pageKey:l,userId:r,storage:o=localStorage}=t||{},c=r?$(r,l||""):null,m=c?o.getItem(c):null,d=e.ref(x(n,m?JSON.parse(m):[]));return e.watch(d,i=>{if(!c)return;const f=i.map(u=>({key:u.key,visible:u.visible,columnOpts:u.columnOpts}));o.setItem(c,JSON.stringify(f))},{deep:!0}),{columns:d,setColumns(i){d.value=x(n,i),c&&o.setItem(c,JSON.stringify(i))},resetColumns(){d.value=n,c&&o.removeItem(c)}}}const W=e.defineComponent({__name:"index",props:{data:{type:Array,default:()=>[]},columns:{type:Array,default:()=>[]},pageKey:String,rowKey:{type:String,default:"id"},loading:{type:Boolean,default:!1},permissions:{type:Array,default:()=>[]},userId:{type:[String,Number],default:""}},emits:["update:columns","cellChange","cellBlur","cellEnter","cell-click"],setup(n,{expose:t,emit:l}){const r=n,o=l,{columns:s}=T(r.columns,{pageKey:r.pageKey??"",userId:r.userId??""});e.watch(s,u=>o("update:columns",u),{deep:!0,immediate:!0});const c=(u,g)=>o("cellChange",u,g),m=(u,g)=>{o("cellBlur",u,g)},d=(u,g)=>{console.log("enter"),o("cellEnter",u,g)},i=(u,g)=>{g&&o("cell-click",u,g)},f=e.ref();return t({tableRef:f}),(u,g)=>{const a=e.resolveComponent("el-table"),p=e.resolveDirective("loading");return e.withDirectives((e.openBlock(),e.createBlock(a,e.mergeProps({ref_key:"tableRef",ref:f},u.$attrs,{data:n.data,"row-key":n.rowKey,class:"smart-table"}),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),y=>(e.openBlock(),e.createBlock(M,{key:y.key,col:y,permissions:n.permissions,onCellChange:c,onCellBlur:m,onCellEnter:d,onCellClick:i},null,8,["col","permissions"]))),128))]),_:1},16,["data","row-key"])),[[p,n.loading]])}}}),D=(n,t)=>{const l=n.__vccOpts||n;for(const[r,o]of t)l[r]=o;return l},L=D(W,[["__scopeId","data-v-338b77db"]]);exports.SmartTable=L;
+              `,onClick:()=>{if(t)try{if(navigator.clipboard&&navigator.clipboard.writeText)navigator.clipboard.writeText(t).then(()=>{k.ElMessage.success("复制成功")}).catch(()=>{k.ElMessage.error("复制失败")});else{const r=document.createElement("textarea");r.value=t,r.style.position="fixed",r.style.opacity="0",document.body.appendChild(r),r.select();const o=document.execCommand("copy");document.body.removeChild(r),o?k.ElMessage.success("复制成功"):k.ElMessage.error("复制失败")}}catch{k.ElMessage.error("复制失败")}}},"📋")])},img:n=>{var c;const t=n.row[n.col.key],r=((c=n.col)==null?void 0:c.renderProps)||{},l=t?Array.isArray(t)?t.filter(a=>a&&typeof a=="string"):[t]:[];if(l.length===0)return r.placeholder||"";const s={width:r.width||"80px",height:r.height||"80px",marginRight:l.length>1?"4px":"0",...r.style||{}};return l.length===1?e.h(k.ElImage,{src:l[0],previewSrcList:r.previewSrcList||l,fit:r.fit||"contain",style:s,...r}):(console.log(r.previewSrcList),e.h("div",{style:"display: flex; align-items: center; position: relative"},[e.h(k.ElImage,{src:l[0],previewSrcList:r.previewSrcList||l,fit:r.fit||"contain",style:s,...r}),l.length>1&&e.h("span",{style:`
+            margin-left: 8px;
+            font-size: 12px;
+            color: #666;
+            background: #f0f0f0;
+            padding: 2px 6px;
+            border-radius: 2px;
+            position: absolute;
+            top: 0;
+            right: 0;
+          `,title:`共 ${l.length} 张图片`},`+${l.length-1}`)]))},dict:n=>{const t=n.row[n.col.key],r=n.col.renderProps||{},o=r.options??[],l=r.showValue??!1;if(t==null||t==="")return"";const s=Array.isArray(t)?t.map(String):[String(t)],c=o.filter(u=>s.includes(String(u.value))),a=s.filter(u=>!o.some(f=>String(f.value)===u)),d=c.map((u,f)=>e.h(k.ElTag,{key:u.value,type:u.listClass,class:u.cssClass,disableTransitions:!0},{default:()=>u.label+" "}));return l&&a.length>0&&d.push(e.h("span",{},a.join(" "))),e.h("div",{},d)},map:n=>{var o;const t=n.row[n.col.key],r=((o=n.col.renderProps)==null?void 0:o.options)??{};return t!=null?r[t]??"":""},formatter:n=>{var l;const{col:t,row:r}=n,o=r[t.key];return K(t)?(l=t.formatter)==null?void 0:l.call(t,o,r):o??""},icon:n=>{const t=n.row[n.col.key]??"",r=n.col.renderProps||{};return t?/^https?:\/\//.test(t)?e.h(k.ElImage,{src:t,previewSrcList:[t],fit:"contain",style:"width:40px;height:40px",...r}):/^\s*<svg[\s\S]*<\/svg>\s*$/.test(t)?e.h("div",{innerHTML:t,style:`width:40px;height:40px;display:inline-block;${r.style||""}`,...r}):e.h("i",{class:t,style:`font-size:20px;${r.style||""}`,...r}):""}}}function I(n,t=10,r=[]){const l="*:*:*",s=i=>{if(!i)return!0;const m=Array.isArray(i)?i:[i];return r.some(y=>y===l||m.includes(y))},c=e.computed(()=>n.some(i=>s(i.permission))),a=e.computed(()=>n.filter(m=>s(m.permission)).slice(0,t).reduce((m,y)=>m+(y.width??55),0)),d=(i,m)=>s(i.permission)&&(i.visible?i.visible(m):!0),u=i=>n.filter(y=>d(y,i)).slice(0,t).reduce((y,w)=>y+(w.width??55),0);return{hasAnyButton:c,optWidth:a,hasAnyVisibleButton:i=>i!=null&&i.length?i.some(m=>n.some(y=>d(y,m))):!1,getMaxOptWidth:i=>i!=null&&i.length?i.reduce((m,y)=>Math.max(m,u(y)),0):a.value,getVisibleButtons:i=>n.filter(m=>d(m,i)).slice(0,t)}}const L=["title"],M=e.defineComponent({__name:"index",props:{col:{type:Object,required:!0},permissions:{type:Array,default:()=>[]}},emits:["cellBlur","cellEnter","cellChange","cellClick"],setup(n,{emit:t}){const r=n,o=t,{col:l}=e.toRefs(r),s=(h,C)=>o("cellChange",h,C),c=(h,C)=>o("cellBlur",h,C),a=(h,C)=>o("cellEnter",h,C),d=(h,C)=>o("cellClick",h,C),u=O(),{hasAnyButton:f,hasAnyVisibleButton:p,optWidth:g,getMaxOptWidth:i,getVisibleButtons:m}=I(l.value.buttons||[],l.value.maxbtn??10,r.permissions||[]),y=e.computed(()=>(l.value.buttons||[]).length?(l.value.__rows||[]).length?p(l.value.__rows||[]):f.value:!1),w=e.computed(()=>l.value.__rows?i(l.value.__rows):g.value);function P(h){return!(h.type==="selection"||h.type==="index"||h.type==="operation"&&!y.value||h.visible===!1)}return(h,C)=>{const B=e.resolveComponent("el-table-column"),S=e.resolveComponent("el-button");return e.unref(l).type==="selection"?(e.openBlock(),e.createBlock(B,e.mergeProps({key:0,type:"selection"},e.unref(l).columnProps),null,16)):e.unref(l).type==="index"?(e.openBlock(),e.createBlock(B,e.mergeProps({key:1,type:"index",label:e.unref(l).label||"#",align:"center"},e.unref(l).columnProps),null,16,["label"])):e.unref(l).type==="operation"&&y.value?(e.openBlock(),e.createBlock(B,e.mergeProps({key:2,label:e.unref(l).label||"操作",align:"center"},{...e.unref(l).columnProps,width:w.value}),{default:e.withCtx(({row:b})=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(m)(b),v=>(e.openBlock(),e.createBlock(S,{key:v.label,type:v.type||"primary",link:"",onClick:_=>v.action(b)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(v.label),1)]),_:2},1032,["type","onClick"]))),128))]),_:1},16,["label"])):P(e.unref(l))?(e.openBlock(),e.createBlock(B,e.mergeProps({key:3,prop:e.unref(l).key,label:e.unref(l).label,align:"center"},e.unref(l).columnProps||{}),{default:e.withCtx(({row:b})=>{var v,_;return[e.unref(l).render&&e.unref(u)[e.unref(l).render]?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(u)[e.unref(l).render]),{key:0,row:b,col:e.unref(l),onCellChange:s,onCellBlur:c,onCellEnter:a,onClick:d},null,40,["row","col"])):(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle(((v=e.unref(l).renderProps)==null?void 0:v.style)||""),class:e.normalizeClass(((_=e.unref(l).renderProps)==null?void 0:_.class)||""),title:b[e.unref(l).key]},e.toDisplayString(b[e.unref(l).key]),15,L))]}),_:1},16,["prop","label"])):e.createCommentVNode("",!0)}}}),$="table_columns_";function T(n,t){return`${$}${n}_${t}`}function E(n,t){if(!(t!=null&&t.length))return n;const r=new Map(t.map(o=>[o.key,o]));return n.map(o=>{const l=r.get(o.key);return l?{...o,visible:typeof l.visible=="boolean"?l.visible:o.visible}:o})}function W(n,t){const{pageKey:r,userId:o,storage:l=localStorage}=t||{},c=o?T(o,r||""):null,a=c?l.getItem(c):null,d=e.ref(E(n,a?JSON.parse(a):[]));return e.watch(d,u=>{if(!c)return;const f=u.map(p=>({key:p.key,visible:p.visible,columnOpts:p.columnOpts}));l.setItem(c,JSON.stringify(f))},{deep:!0}),{columns:d,setColumns(u){d.value=E(n,u),c&&l.setItem(c,JSON.stringify(u))},resetColumns(){d.value=n,c&&l.removeItem(c)}}}const z=e.defineComponent({__name:"index",props:{data:{type:Array,default:()=>[]},columns:{type:Array,default:()=>[]},pageKey:String,rowKey:{type:String,default:"id"},loading:{type:Boolean,default:!1},permissions:{type:Array,default:()=>[]},userId:{type:[String,Number],default:""}},emits:["update:columns","cellChange","cellBlur","cellEnter","cell-click"],setup(n,{expose:t,emit:r}){const o=n,l=r,{columns:s}=W(o.columns,{pageKey:o.pageKey??"",userId:o.userId??""});e.watch(s,p=>l("update:columns",p),{deep:!0,immediate:!0});const c=(p,g)=>l("cellChange",p,g),a=(p,g)=>{l("cellBlur",p,g)},d=(p,g)=>{console.log("enter"),l("cellEnter",p,g)},u=(p,g)=>{g&&l("cell-click",p,g)},f=e.ref();return t({tableRef:f}),(p,g)=>{const i=e.resolveComponent("el-table"),m=e.resolveDirective("loading");return e.withDirectives((e.openBlock(),e.createBlock(i,e.mergeProps({ref_key:"tableRef",ref:f},p.$attrs,{data:n.data,"row-key":n.rowKey,class:"smart-table"}),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),y=>(e.openBlock(),e.createBlock(M,{key:y.key,col:y,permissions:n.permissions,onCellChange:c,onCellBlur:a,onCellEnter:d,onCellClick:u},null,8,["col","permissions"]))),128))]),_:1},16,["data","row-key"])),[[m,n.loading]])}}}),D=(n,t)=>{const r=n.__vccOpts||n;for(const[o,l]of t)r[o]=l;return r},N=D(z,[["__scopeId","data-v-338b77db"]]);exports.SmartTable=N;

package/dist/vue3-smart-table.es.js

@@ -1,6 +1,6 @@
-import { defineComponent as x, ref as V, watch as S, resolveComponent as w, createBlock as b, openBlock as f, mergeProps as _, withKeys as M, withCtx as P, createElementBlock as O, Fragment as K, renderList as T, h as g, computed as $, toRefs as U, createCommentVNode as j, unref as d, createTextVNode as D, toDisplayString as N, resolveDynamicComponent as H, resolveDirective as q, withDirectives as X } from "vue";
-import { ElImage as L, ElTag as Y, ElMessage as E, ElButton as G } from "element-plus";
-const Q = /* @__PURE__ */ x({
+import { defineComponent as E, ref as V, watch as A, resolveComponent as x, createBlock as b, openBlock as h, mergeProps as _, withKeys as M, withCtx as P, createElementBlock as O, Fragment as T, renderList as z, h as f, computed as K, toRefs as U, createCommentVNode as j, unref as c, createTextVNode as H, toDisplayString as D, resolveDynamicComponent as q, normalizeClass as X, normalizeStyle as Y, resolveDirective as G, withDirectives as Q } from "vue";
+import { ElImage as L, ElTag as Z, ElMessage as S, ElButton as ee } from "element-plus";
+const te = /* @__PURE__ */ E({
   __name: "input",
   props: {
     row: {},
@@ -9,29 +9,29 @@ const Q = /* @__PURE__ */ x({
     onCellEnter: { type: Function }
   },
   setup(t) {
-    const e = t, n = V(e.row[e.col.key]);
-    S(n, (c) => {
-      e.row[e.col.key] = c;
+    const e = t, l = V(e.row[e.col.key]);
+    A(l, (s) => {
+      e.row[e.col.key] = s;
     });
     const r = () => {
-      var c;
-      return (c = e.onCellBlur) == null ? void 0 : c.call(e, e.row, e.col);
-    }, l = () => {
-      var c;
-      return (c = e.onCellEnter) == null ? void 0 : c.call(e, e.row, e.col);
+      var s;
+      return (s = e.onCellBlur) == null ? void 0 : s.call(e, e.row, e.col);
+    }, n = () => {
+      var s;
+      return (s = e.onCellEnter) == null ? void 0 : s.call(e, e.row, e.col);
     };
-    return (c, o) => {
-      const y = w("el-input");
-      return f(), b(y, _({
-        modelValue: n.value,
-        "onUpdate:modelValue": o[0] || (o[0] = (u) => n.value = u)
+    return (s, o) => {
+      const a = x("el-input");
+      return h(), b(a, _({
+        modelValue: l.value,
+        "onUpdate:modelValue": o[0] || (o[0] = (y) => l.value = y)
       }, { placeholder: "", size: "small", clearable: !0, ...t.col.renderProps }, {
         onBlur: r,
-        onKeyup: M(l, ["enter"])
+        onKeyup: M(n, ["enter"])
       }), null, 16, ["modelValue"]);
     };
   }
-}), Z = /* @__PURE__ */ x({
+}), ne = /* @__PURE__ */ E({
   __name: "inputNumber",
   props: {
     row: {},
@@ -41,30 +41,30 @@ const Q = /* @__PURE__ */ x({
     onCellEnter: { type: Function }
   },
   setup(t) {
-    const e = t, n = V(e.row[e.col.key]);
-    S(n, (c) => {
+    const e = t, l = V(e.row[e.col.key]);
+    A(l, (s) => {
       var o;
-      e.row[e.col.key] = c, (o = e.onCellChange) == null || o.call(e, e.row, e.col);
+      e.row[e.col.key] = s, (o = e.onCellChange) == null || o.call(e, e.row, e.col);
     });
     const r = () => {
-      var c;
-      return (c = e.onCellBlur) == null ? void 0 : c.call(e, e.row, e.col);
-    }, l = () => {
-      var c;
-      return (c = e.onCellEnter) == null ? void 0 : c.call(e, e.row, e.col);
+      var s;
+      return (s = e.onCellBlur) == null ? void 0 : s.call(e, e.row, e.col);
+    }, n = () => {
+      var s;
+      return (s = e.onCellEnter) == null ? void 0 : s.call(e, e.row, e.col);
     };
-    return (c, o) => {
-      const y = w("el-input-number");
-      return f(), b(y, _({
-        modelValue: n.value,
-        "onUpdate:modelValue": o[0] || (o[0] = (u) => n.value = u)
+    return (s, o) => {
+      const a = x("el-input-number");
+      return h(), b(a, _({
+        modelValue: l.value,
+        "onUpdate:modelValue": o[0] || (o[0] = (y) => l.value = y)
       }, { min: 0, max: 99999, controls: !1, size: "small", ...t.col.renderProps }, {
         onBlur: r,
-        onKeyup: M(l, ["enter"])
+        onKeyup: M(n, ["enter"])
       }), null, 16, ["modelValue"]);
     };
   }
-}), ee = /* @__PURE__ */ x({
+}), le = /* @__PURE__ */ E({
   __name: "select",
   props: {
     row: {},
@@ -74,37 +74,37 @@ const Q = /* @__PURE__ */ x({
     onCellEnter: { type: Function }
   },
   setup(t) {
-    const e = t, n = V(e.row[e.col.key]);
-    S(n, (o) => {
+    const e = t, l = V(e.row[e.col.key]);
+    A(l, (o) => {
       e.row[e.col.key] = o;
     });
     const r = () => {
       var o;
       return (o = e.onCellChange) == null ? void 0 : o.call(e, e.row, e.col);
-    }, l = () => {
+    }, n = () => {
       var o;
       return (o = e.onCellBlur) == null ? void 0 : o.call(e, e.row, e.col);
-    }, c = () => {
+    }, s = () => {
       var o;
       return (o = e.onCellEnter) == null ? void 0 : o.call(e, e.row, e.col);
     };
-    return (o, y) => {
-      const u = w("el-option"), i = w("el-select");
-      return f(), b(i, _({
-        modelValue: n.value,
-        "onUpdate:modelValue": y[0] || (y[0] = (h) => n.value = h)
+    return (o, a) => {
+      const y = x("el-option"), u = x("el-select");
+      return h(), b(u, _({
+        modelValue: l.value,
+        "onUpdate:modelValue": a[0] || (a[0] = (g) => l.value = g)
       }, { placeholder: "请选择", size: "small", clearable: !0, ...t.col.renderProps }, {
         onChange: r,
-        onBlur: l,
-        onKeyup: M(c, ["enter"])
+        onBlur: n,
+        onKeyup: M(s, ["enter"])
       }), {
         default: P(() => {
-          var h;
+          var g;
           return [
-            (f(!0), O(K, null, T(((h = t.col.renderProps) == null ? void 0 : h.options) || [], (a) => (f(), b(u, {
-              key: a.value,
-              label: a.label,
-              value: a.value
+            (h(!0), O(T, null, z(((g = t.col.renderProps) == null ? void 0 : g.options) || [], (d) => (h(), b(y, {
+              key: d.value,
+              label: d.label,
+              value: d.value
             }, null, 8, ["label", "value"]))), 128))
           ];
         }),
@@ -112,46 +112,46 @@ const Q = /* @__PURE__ */ x({
       }, 16, ["modelValue"]);
     };
   }
-}), W = (t) => x({
+}), W = (t) => E({
   props: ["row", "col", "onCellChange", "onCellBlur", "onCellEnter", "onClick"],
   setup(e) {
-    return () => g(t, e);
+    return () => f(t, e);
   }
 });
-function te(t) {
+function re(t) {
   return typeof t.formatter == "function";
 }
-function ne() {
+function oe() {
   return {
-    input: W(Q),
-    "input-number": W(Z),
-    select: W(ee),
+    input: W(te),
+    "input-number": W(ne),
+    select: W(le),
     button: (t) => {
       const e = t.col.renderProps || {};
-      return g(G, {
+      return f(ee, {
         type: e.type || "primary",
         ...e,
         onClick: () => {
-          var n;
-          return (n = t.onClick) == null ? void 0 : n.call(t, t.row, t.col);
+          var l;
+          return (l = t.onClick) == null ? void 0 : l.call(t, t.row, t.col);
         }
       }, () => e.label || t.row[t.col.key]);
     },
     link: (t) => {
       const e = t.col.renderProps || {};
-      return g("a", {
+      return f("a", {
         href: e.href || "#",
         target: e.blank ? "_blank" : "_self",
         style: e.style || "color:#409EFF;cursor:pointer;",
-        onClick: (n) => {
+        onClick: (l) => {
           var r;
-          n.preventDefault(), (r = t.onClick) == null || r.call(t, t.row, t.col);
+          l.preventDefault(), (r = t.onClick) == null || r.call(t, t.row, t.col);
         }
       }, e.label || t.row[t.col.key]);
     },
     html: (t) => {
       var e;
-      return g("div", {
+      return f("div", {
         class: "line-clamp-2",
         innerHTML: t.row[t.col.key] ?? "",
         ...((e = t.col) == null ? void 0 : e.renderProps) || {}
@@ -159,18 +159,18 @@ function ne() {
     },
     copy: (t) => {
       const e = t.row[t.col.key] ?? "";
-      return g(
+      return f(
         "div",
         {
           class: "copy-wrapper",
           style: "position: relative; display: inline-block;"
         },
         [
-          g("span", {
+          f("span", {
             class: "copy-text line-clamp-1",
             style: "padding-right: 20px;"
           }, e),
-          g(
+          f(
             "span",
             {
               class: "copy-btn",
@@ -190,18 +190,18 @@ function ne() {
                   try {
                     if (navigator.clipboard && navigator.clipboard.writeText)
                       navigator.clipboard.writeText(e).then(() => {
-                        E.success("复制成功");
+                        S.success("复制成功");
                       }).catch(() => {
-                        E.error("复制失败");
+                        S.error("复制失败");
                       });
                     else {
-                      const n = document.createElement("textarea");
-                      n.value = e, n.style.position = "fixed", n.style.opacity = "0", document.body.appendChild(n), n.select();
+                      const l = document.createElement("textarea");
+                      l.value = e, l.style.position = "fixed", l.style.opacity = "0", document.body.appendChild(l), l.select();
                       const r = document.execCommand("copy");
-                      document.body.removeChild(n), r ? E.success("复制成功") : E.error("复制失败");
+                      document.body.removeChild(l), r ? S.success("复制成功") : S.error("复制失败");
                     }
                   } catch {
-                    E.error("复制失败");
+                    S.error("复制失败");
                   }
               }
             },
@@ -212,85 +212,119 @@ function ne() {
       );
     },
     img: (t) => {
-      var r;
-      const e = t.row[t.col.key] ?? "", n = ((r = t.col) == null ? void 0 : r.renderProps) || {};
-      return g(L, {
-        src: e,
-        previewSrcList: (n == null ? void 0 : n.previewSrcList) ?? (Array.isArray(e) ? e : [e]),
-        fit: "contain",
-        style: "width:80px;height:80px",
-        ...n
-      });
+      var o;
+      const e = t.row[t.col.key], l = ((o = t.col) == null ? void 0 : o.renderProps) || {}, n = e ? Array.isArray(e) ? e.filter((a) => a && typeof a == "string") : [e] : [];
+      if (n.length === 0)
+        return l.placeholder || "";
+      const s = {
+        width: l.width || "80px",
+        height: l.height || "80px",
+        marginRight: n.length > 1 ? "4px" : "0",
+        ...l.style || {}
+      };
+      return n.length === 1 ? f(L, {
+        src: n[0],
+        previewSrcList: l.previewSrcList || n,
+        fit: l.fit || "contain",
+        style: s,
+        ...l
+      }) : (console.log(l.previewSrcList), f("div", {
+        style: "display: flex; align-items: center; position: relative"
+      }, [
+        // 显示第一张图片，点击可预览所有
+        f(L, {
+          src: n[0],
+          previewSrcList: l.previewSrcList || n,
+          fit: l.fit || "contain",
+          style: s,
+          ...l
+        }),
+        // 如果图片数量大于1，显示剩余图片数量
+        n.length > 1 && f("span", {
+          style: `
+            margin-left: 8px;
+            font-size: 12px;
+            color: #666;
+            background: #f0f0f0;
+            padding: 2px 6px;
+            border-radius: 2px;
+            position: absolute;
+            top: 0;
+            right: 0;
+          `,
+          title: `共 ${n.length} 张图片`
+        }, `+${n.length - 1}`)
+      ]));
     },
     dict: (t) => {
-      const e = t.row[t.col.key], n = t.col.renderProps || {}, r = n.options ?? [], l = n.showValue ?? !1;
+      const e = t.row[t.col.key], l = t.col.renderProps || {}, r = l.options ?? [], n = l.showValue ?? !1;
       if (e == null || e === "") return "";
-      const c = Array.isArray(e) ? e.map(String) : [String(e)], o = r.filter((i) => c.includes(String(i.value))), y = c.filter((i) => !r.some((h) => String(h.value) === i)), u = o.map((i, h) => g(
-        Y,
-        { key: i.value, type: i.listClass, class: i.cssClass, disableTransitions: !0 },
-        { default: () => i.label + " " }
+      const s = Array.isArray(e) ? e.map(String) : [String(e)], o = r.filter((u) => s.includes(String(u.value))), a = s.filter((u) => !r.some((g) => String(g.value) === u)), y = o.map((u, g) => f(
+        Z,
+        { key: u.value, type: u.listClass, class: u.cssClass, disableTransitions: !0 },
+        { default: () => u.label + " " }
       ));
-      return l && y.length > 0 && u.push(g("span", {}, y.join(" "))), g("div", {}, u);
+      return n && a.length > 0 && y.push(f("span", {}, a.join(" "))), f("div", {}, y);
     },
     map: (t) => {
       var r;
-      const e = t.row[t.col.key], n = ((r = t.col.renderProps) == null ? void 0 : r.options) ?? {};
-      return e != null ? n[e] ?? "" : "";
+      const e = t.row[t.col.key], l = ((r = t.col.renderProps) == null ? void 0 : r.options) ?? {};
+      return e != null ? l[e] ?? "" : "";
     },
     formatter: (t) => {
-      var l;
-      const { col: e, row: n } = t, r = n[e.key];
-      return te(e) ? (l = e.formatter) == null ? void 0 : l.call(e, r, n) : r ?? "";
+      var n;
+      const { col: e, row: l } = t, r = l[e.key];
+      return re(e) ? (n = e.formatter) == null ? void 0 : n.call(e, r, l) : r ?? "";
     },
     icon: (t) => {
-      const e = t.row[t.col.key] ?? "", n = t.col.renderProps || {};
-      return e ? /^https?:\/\//.test(e) ? g(L, {
+      const e = t.row[t.col.key] ?? "", l = t.col.renderProps || {};
+      return e ? /^https?:\/\//.test(e) ? f(L, {
         src: e,
         previewSrcList: [e],
         fit: "contain",
         style: "width:40px;height:40px",
-        ...n
-      }) : /^\s*<svg[\s\S]*<\/svg>\s*$/.test(e) ? g("div", {
+        ...l
+      }) : /^\s*<svg[\s\S]*<\/svg>\s*$/.test(e) ? f("div", {
         innerHTML: e,
-        style: `width:40px;height:40px;display:inline-block;${n.style || ""}`,
-        ...n
-      }) : g("i", {
+        style: `width:40px;height:40px;display:inline-block;${l.style || ""}`,
+        ...l
+      }) : f("i", {
         class: e,
         // val 直接当 className
-        style: `font-size:20px;${n.style || ""}`,
-        ...n
+        style: `font-size:20px;${l.style || ""}`,
+        ...l
       }) : "";
     }
   };
 }
-function le(t, e = 10, n = []) {
-  const l = "*:*:*", c = (s) => {
-    if (!s) return !0;
-    const m = Array.isArray(s) ? s : [s];
-    return n.some(
-      (p) => p === l || m.includes(p)
+function se(t, e = 10, l = []) {
+  const n = "*:*:*", s = (i) => {
+    if (!i) return !0;
+    const m = Array.isArray(i) ? i : [i];
+    return l.some(
+      (p) => p === n || m.includes(p)
     );
-  }, o = $(() => t.some((s) => c(s.permission))), y = $(() => t.filter((m) => c(m.permission)).slice(0, e).reduce(
+  }, o = K(() => t.some((i) => s(i.permission))), a = K(() => t.filter((m) => s(m.permission)).slice(0, e).reduce(
     (m, p) => m + (p.width ?? 55),
     0
-  )), u = (s, m) => c(s.permission) && (s.visible ? s.visible(m) : !0), i = (s) => t.filter((p) => u(p, s)).slice(0, e).reduce(
-    (p, I) => p + (I.width ?? 55),
+  )), y = (i, m) => s(i.permission) && (i.visible ? i.visible(m) : !0), u = (i) => t.filter((p) => y(p, i)).slice(0, e).reduce(
+    (p, $) => p + ($.width ?? 55),
     0
   );
   return {
     hasAnyButton: o,
-    optWidth: y,
-    hasAnyVisibleButton: (s) => s != null && s.length ? s.some(
-      (m) => t.some((p) => u(p, m))
+    optWidth: a,
+    hasAnyVisibleButton: (i) => i != null && i.length ? i.some(
+      (m) => t.some((p) => y(p, m))
     ) : !1,
-    getMaxOptWidth: (s) => s != null && s.length ? s.reduce(
-      (m, p) => Math.max(m, i(p)),
+    getMaxOptWidth: (i) => i != null && i.length ? i.reduce(
+      (m, p) => Math.max(m, u(p)),
       0
-    ) : y.value,
-    getVisibleButtons: (s) => t.filter((m) => u(m, s)).slice(0, e)
+    ) : a.value,
+    getVisibleButtons: (i) => t.filter((m) => y(m, i)).slice(0, e)
   };
 }
-const re = /* @__PURE__ */ x({
+const ie = ["title"], ce = /* @__PURE__ */ E({
   __name: "index",
   props: {
     col: { type: Object, required: !0 },
@@ -298,143 +332,149 @@ const re = /* @__PURE__ */ x({
   },
   emits: ["cellBlur", "cellEnter", "cellChange", "cellClick"],
   setup(t, { emit: e }) {
-    const n = t, r = e, { col: l } = U(n), c = (v, k) => r("cellChange", v, k), o = (v, k) => r("cellBlur", v, k), y = (v, k) => r("cellEnter", v, k), u = (v, k) => r("cellClick", v, k), i = ne(), {
-      hasAnyButton: h,
-      hasAnyVisibleButton: a,
+    const l = t, r = e, { col: n } = U(l), s = (v, k) => r("cellChange", v, k), o = (v, k) => r("cellBlur", v, k), a = (v, k) => r("cellEnter", v, k), y = (v, k) => r("cellClick", v, k), u = oe(), {
+      hasAnyButton: g,
+      hasAnyVisibleButton: d,
       optWidth: C,
-      getMaxOptWidth: s,
+      getMaxOptWidth: i,
       getVisibleButtons: m
-    } = le(
-      l.value.buttons || [],
-      l.value.maxbtn ?? 10,
-      n.permissions || []
-    ), p = $(() => (l.value.buttons || []).length ? (l.value.__rows || []).length ? a(l.value.__rows || []) : h.value : !1), I = $(() => l.value.__rows ? s(l.value.__rows) : C.value);
-    function z(v) {
+    } = se(
+      n.value.buttons || [],
+      n.value.maxbtn ?? 10,
+      l.permissions || []
+    ), p = K(() => (n.value.buttons || []).length ? (n.value.__rows || []).length ? d(n.value.__rows || []) : g.value : !1), $ = K(() => n.value.__rows ? i(n.value.__rows) : C.value);
+    function R(v) {
       return !(v.type === "selection" || v.type === "index" || v.type === "operation" && !p.value || v.visible === !1);
     }
     return (v, k) => {
-      const A = w("el-table-column"), J = w("el-button");
-      return d(l).type === "selection" ? (f(), b(A, _({
+      const F = x("el-table-column"), J = x("el-button");
+      return c(n).type === "selection" ? (h(), b(F, _({
         key: 0,
         type: "selection"
-      }, d(l).columnProps), null, 16)) : d(l).type === "index" ? (f(), b(A, _({
+      }, c(n).columnProps), null, 16)) : c(n).type === "index" ? (h(), b(F, _({
         key: 1,
         type: "index",
-        label: d(l).label || "#",
+        label: c(n).label || "#",
         align: "center"
-      }, d(l).columnProps), null, 16, ["label"])) : d(l).type === "operation" && p.value ? (f(), b(A, _({
+      }, c(n).columnProps), null, 16, ["label"])) : c(n).type === "operation" && p.value ? (h(), b(F, _({
         key: 2,
-        label: d(l).label || "操作",
+        label: c(n).label || "操作",
         align: "center"
       }, {
-        ...d(l).columnProps,
-        width: I.value
+        ...c(n).columnProps,
+        width: $.value
       }), {
         default: P(({ row: B }) => [
-          (f(!0), O(K, null, T(d(m)(B), (F) => (f(), b(J, {
-            key: F.label,
-            type: F.type || "primary",
+          (h(!0), O(T, null, z(c(m)(B), (w) => (h(), b(J, {
+            key: w.label,
+            type: w.type || "primary",
             link: "",
-            onClick: (ue) => F.action(B)
+            onClick: (I) => w.action(B)
           }, {
             default: P(() => [
-              D(N(F.label), 1)
+              H(D(w.label), 1)
             ]),
             _: 2
           }, 1032, ["type", "onClick"]))), 128))
         ]),
         _: 1
-      }, 16, ["label"])) : z(d(l)) ? (f(), b(A, _({
+      }, 16, ["label"])) : R(c(n)) ? (h(), b(F, _({
         key: 3,
-        prop: d(l).key,
-        label: d(l).label,
+        prop: c(n).key,
+        label: c(n).label,
         align: "center"
-      }, d(l).columnProps || {}), {
-        default: P(({ row: B }) => [
-          d(l).render && d(i)[d(l).render] ? (f(), b(H(d(i)[d(l).render]), {
-            key: 0,
-            row: B,
-            col: d(l),
-            onCellChange: c,
-            onCellBlur: o,
-            onCellEnter: y,
-            onClick: u
-          }, null, 40, ["row", "col"])) : (f(), O(K, { key: 1 }, [
-            D(N(B[d(l).key]), 1)
-          ], 64))
-        ]),
+      }, c(n).columnProps || {}), {
+        default: P(({ row: B }) => {
+          var w, I;
+          return [
+            c(n).render && c(u)[c(n).render] ? (h(), b(q(c(u)[c(n).render]), {
+              key: 0,
+              row: B,
+              col: c(n),
+              onCellChange: s,
+              onCellBlur: o,
+              onCellEnter: a,
+              onClick: y
+            }, null, 40, ["row", "col"])) : (h(), O("span", {
+              key: 1,
+              style: Y(((w = c(n).renderProps) == null ? void 0 : w.style) || ""),
+              class: X(((I = c(n).renderProps) == null ? void 0 : I.class) || ""),
+              title: B[c(n).key]
+            }, D(B[c(n).key]), 15, ie))
+          ];
+        }),
         _: 1
       }, 16, ["prop", "label"])) : j("", !0);
     };
   }
-}), oe = "table_columns_";
-function ce(t, e) {
-  return `${oe}${t}_${e}`;
+}), ae = "table_columns_";
+function ue(t, e) {
+  return `${ae}${t}_${e}`;
 }
-function R(t, e) {
+function N(t, e) {
   if (!(e != null && e.length)) return t;
-  const n = new Map(
+  const l = new Map(
     e.map((r) => [r.key, r])
   );
   return t.map((r) => {
-    const l = n.get(r.key);
-    return l ? {
+    const n = l.get(r.key);
+    return n ? {
       ...r,
-      visible: typeof l.visible == "boolean" ? l.visible : r.visible
+      visible: typeof n.visible == "boolean" ? n.visible : r.visible
     } : r;
   });
 }
-function se(t, e) {
+function de(t, e) {
   const {
-    pageKey: n,
+    pageKey: l,
     userId: r,
-    storage: l = localStorage
-  } = e || {}, o = r ? ce(r, n || "") : null, y = o ? l.getItem(o) : null, u = V(
-    R(
+    storage: n = localStorage
+  } = e || {}, o = r ? ue(r, l || "") : null, a = o ? n.getItem(o) : null, y = V(
+    N(
       t,
-      y ? JSON.parse(y) : []
+      a ? JSON.parse(a) : []
     )
   );
-  return S(
-    u,
-    (i) => {
+  return A(
+    y,
+    (u) => {
       if (!o) return;
-      const h = i.map((a) => ({
-        key: a.key,
-        visible: a.visible,
-        columnOpts: a.columnOpts
+      const g = u.map((d) => ({
+        key: d.key,
+        visible: d.visible,
+        columnOpts: d.columnOpts
       }));
-      l.setItem(
+      n.setItem(
         o,
-        JSON.stringify(h)
+        JSON.stringify(g)
       );
     },
     { deep: !0 }
   ), {
     /** 当前列配置（响应式） */
-    columns: u,
+    columns: y,
     /**
      * 主动设置列配置
      * 常用于：列设置弹窗 / 拖拽排序完成
      */
-    setColumns(i) {
-      u.value = R(
+    setColumns(u) {
+      y.value = N(
         t,
-        i
-      ), o && l.setItem(
+        u
+      ), o && n.setItem(
         o,
-        JSON.stringify(i)
+        JSON.stringify(u)
       );
     },
     /**
      * 重置为默认列配置
      */
     resetColumns() {
-      u.value = t, o && l.removeItem(o);
+      y.value = t, o && n.removeItem(o);
     }
   };
 }
-const ie = /* @__PURE__ */ x({
+const ye = /* @__PURE__ */ E({
   __name: "index",
   props: {
     data: { type: Array, default: () => [] },
@@ -460,44 +500,44 @@ const ie = /* @__PURE__ */ x({
     "cellEnter",
     "cell-click"
   ],
-  setup(t, { expose: e, emit: n }) {
-    const r = t, l = n, { columns: c } = se(r.columns, {
+  setup(t, { expose: e, emit: l }) {
+    const r = t, n = l, { columns: s } = de(r.columns, {
       pageKey: r.pageKey ?? "",
       userId: r.userId ?? ""
     });
-    S(
-      c,
-      (a) => l("update:columns", a),
+    A(
+      s,
+      (d) => n("update:columns", d),
       { deep: !0, immediate: !0 }
     );
-    const o = (a, C) => l("cellChange", a, C), y = (a, C) => {
-      l("cellBlur", a, C);
-    }, u = (a, C) => {
-      console.log("enter"), l("cellEnter", a, C);
-    }, i = (a, C) => {
-      C && l("cell-click", a, C);
-    }, h = V();
+    const o = (d, C) => n("cellChange", d, C), a = (d, C) => {
+      n("cellBlur", d, C);
+    }, y = (d, C) => {
+      console.log("enter"), n("cellEnter", d, C);
+    }, u = (d, C) => {
+      C && n("cell-click", d, C);
+    }, g = V();
     return e({
-      tableRef: h
-    }), (a, C) => {
-      const s = w("el-table"), m = q("loading");
-      return X((f(), b(s, _({
+      tableRef: g
+    }), (d, C) => {
+      const i = x("el-table"), m = G("loading");
+      return Q((h(), b(i, _({
         ref_key: "tableRef",
-        ref: h
-      }, a.$attrs, {
+        ref: g
+      }, d.$attrs, {
         data: t.data,
         "row-key": t.rowKey,
         class: "smart-table"
       }), {
         default: P(() => [
-          (f(!0), O(K, null, T(d(c), (p) => (f(), b(re, {
+          (h(!0), O(T, null, z(c(s), (p) => (h(), b(ce, {
             key: p.key,
             col: p,
             permissions: t.permissions,
             onCellChange: o,
-            onCellBlur: y,
-            onCellEnter: u,
-            onCellClick: i
+            onCellBlur: a,
+            onCellEnter: y,
+            onCellClick: u
           }, null, 8, ["col", "permissions"]))), 128))
         ]),
         _: 1
@@ -506,12 +546,12 @@ const ie = /* @__PURE__ */ x({
       ]);
     };
   }
-}), ae = (t, e) => {
-  const n = t.__vccOpts || t;
-  for (const [r, l] of e)
-    n[r] = l;
-  return n;
-}, me = /* @__PURE__ */ ae(ie, [["__scopeId", "data-v-338b77db"]]);
+}), me = (t, e) => {
+  const l = t.__vccOpts || t;
+  for (const [r, n] of e)
+    l[r] = n;
+  return l;
+}, he = /* @__PURE__ */ me(ye, [["__scopeId", "data-v-338b77db"]]);
 export {
-  me as SmartTable
+  he as SmartTable
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-smart-table",
-  "version": "0.0.2",
+  "version": "1.0.2",
   "description": "基于 Vue 3 + Element Plus 的高可复用表格组件",
   "main": "dist/vue3-smart-table.cjs.js",
   "module": "dist/vue3-smart-table.es.js",