@ditari/bsui 1.0.48 → 1.0.49

package/dist/cjs/components/table/Table.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),C=require("ant-design-vue"),P=require("../../utils/html.cjs.js"),M=require("../theme/index.cjs.js"),Q=()=>({data:{type:Object,required:!0},height:{type:Number,default:300},keys:Array,rowKey:{type:String,default:"id"},loading:{type:Boolean,default:!1},pagination:{type:Object,default:()=>({})},config:{type:Object,default:()=>({})},expandedRowKeys:{type:Object,default:()=>[]}}),b={defaultPageSize:20,hideOnSinglePage:!1,pageSizeOptions:["10","20","30","40"],responsive:!0,showQuickJumper:!0,showLessItems:!0,showTotal:n=>`总共 ${n} 条`},T=`${M.prefixName}-pagination`,I=t.defineComponent({name:"DTable",props:Q(),emits:["update:keys"],setup:function(n,{emit:p,slots:d}){const a=t.ref(n.keys||[]),z=t.computed(()=>n.data),E=t.computed(()=>{var e;return((e=n.config)==null?void 0:e.columns)??[]}),m=t.computed(()=>{var e;return((e=n.config)==null?void 0:e.pagination)??{}}),S=t.ref(n.expandedRowKeys);t.watchEffect(()=>{const{expandedRowKeys:e}=n;S.value=e});const{tableRef:K,tableRootRef:O,tableHeight:B,onPageChange:V,onRowClassName:H}=j();function j(){const{rowClassName:e,keepSelected:l,onPageChange:i}=n.config,f=n.config.selection??"N",r=t.ref(),c=t.ref(null),o=t.ref(),u=t.ref(null),g=s=>{var h,N;try{const w=(h=c==null?void 0:c.value)==null?void 0:h.$el,A=P.useEleHeight(w.getElementsByClassName("ant-table-header")[0]);let x=0;if(n.config.pagination){const J=(N=r.value)==null?void 0:N.getElementsByClassName(T)[0];x=P.useEleHeight(J)??0}o.value=s-(A+x),w.getElementsByClassName("ant-table-body")[0].style.height=o.value+"px",u.value=w.getElementsByClassName("ant-table-body")[0]}catch(w){console.warn(w)}};return t.watchEffect(()=>{n.height!==0&&t.nextTick(()=>{g(n.height)})}),{tableRef:c,tableRootRef:r,tableHeight:o,onPageChange:(s,h)=>{i&&i({page:s,size:h}),u.value.scrollTop=0,(f==="S"||!l)&&(a.value=[],p("update:keys",a.value))},onRowClassName:(s,h)=>e?e(s,h):void 0}}const q=D();function D(){const{rowKey:e,config:{getCheckboxProps:l}}=n;let i=n.config.selection??"N";const f=(o,u)=>{i==="S"?(a.value=[],a.value=u?[o[e]]:[]):a.value=u?a.value.concat(o[e]):a.value.filter(g=>g!==o[e]),p("update:keys",a.value)},r=(o,u,g)=>{const v=g.map(y=>y[e]);a.value=o?a.value.concat(v):a.value.filter(y=>!v.includes(y)),p("update:keys",a.value)};t.watch(()=>n.keys,o=>{a.value=o});const c=t.ref(void 0);return t.watchEffect(()=>{const{selection:o}=n.config;i=o,i!=="N"?c.value={selectedRowKeys:a,onSelect:f,onSelectAll:r,fixed:!0,columnTitle:i==="S"?"选择":null,columnWidth:i==="S"?60:40,getCheckboxProps:l}:c.value=void 0}),c}const F=U();function U(){return e=>{let l;const{rowKey:i,config:{click:f,dbClick:r,selection:c,getCheckboxProps:o}}=n,u=e[i],g=()=>{const v=o===void 0?!1:o(e).disabled;if(c==="N"||v)return;a.value.some(s=>s===u)?a.value=a.value.filter(s=>s!==u):(c==="S"&&(a.value=[]),a.value.push(u)),p("update:keys",a.value)};return{onClick:()=>{clearTimeout(l),l=setTimeout(()=>{g(),f&&f(e)},200)},onDblclick:()=>{clearTimeout(l),r&&r(e)}}}}const R=e=>{e.stopPropagation()},_=t.computed(()=>{const{selection:e}=n.config;return e==="N"}),k={};d.expandedRowRender&&(k.expandedRowRender=e=>t.createVNode(t.Fragment,null,[d.expandedRowRender&&d.expandedRowRender(e)]));const $=()=>t.createVNode(t.Fragment,null,[d.summary&&d.summary()]);return()=>{var e;return t.createVNode("div",{ref:O,style:{height:"100%"}},[t.createVNode(C.Table,{ref:K,"row-key":n.rowKey,bordered:n.config.bordered,columns:E.value,dataSource:z.value,loading:n.loading,size:((e=n.config)==null?void 0:e.size)??"small",scroll:{scrollToFirstRowOnChange:!0,x:"100%",y:B.value+"px"},expandedRowKeys:S.value,"onUpdate:expandedRowKeys":l=>S.value=l,expandRowByClick:_.value,pagination:!1,customRow:F,rowSelection:q.value,rowClassName:H},{bodyCell:({column:l,record:i})=>{if(l.slot==="action")return t.createVNode("div",{onClick:R,onDblclick:R},[t.createVNode(C.Space,null,{default:()=>[d.action&&d.action(i)]})])},...k,summary:$}),t.withDirectives(t.createVNode(C.Pagination,{class:[T],current:m.value.current,"onUpdate:current":l=>m.value.current=l,pageSize:m.value.pageSize,"onUpdate:pageSize":l=>m.value.pageSize=l,disabled:n.loading,"show-size-changer":!0,size:"default","hide-on-single-page":b.hideOnSinglePage,"show-quick-jumper":b.showQuickJumper,"default-page-size":b.defaultPageSize,"page-size-options":b.pageSizeOptions,"show-total":b.showTotal,total:m.value.total,onChange:V},null),[[t.vShow,n.config.pagination]])])}}});exports.default=I;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),C=require("ant-design-vue"),P=require("../../utils/html.cjs.js"),M=require("../theme/index.cjs.js"),Q=()=>({data:{type:Object,required:!0},height:{type:Number,default:300},keys:Array,rowKey:{type:String,default:"id"},loading:{type:Boolean,default:!1},pagination:{type:Object,default:()=>({})},config:{type:Object,default:()=>({})},expandedRowKeys:{type:Object,default:()=>[]}}),b={defaultPageSize:20,hideOnSinglePage:!1,pageSizeOptions:["10","20","30","40"],responsive:!0,showQuickJumper:!0,showLessItems:!0,showTotal:a=>`总共 ${a} 条`},z=`${M.prefixName}-pagination`,I=t.defineComponent({name:"DTable",props:Q(),emits:["update:keys"],setup:function(a,{emit:p,slots:d}){const n=t.ref(a.keys||[]),E=t.computed(()=>a.data),K=t.computed(()=>{var e;return((e=a.config)==null?void 0:e.columns)??[]}),v=t.computed(()=>{var e;return((e=a.config)==null?void 0:e.pagination)??{}}),S=t.ref(a.expandedRowKeys);t.watchEffect(()=>{const{expandedRowKeys:e}=a;S.value=e});const{tableRef:O,tableRootRef:B,tableHeight:V,onPageChange:H,onRowClassName:j}=q();function q(){const{rowClassName:e,keepSelected:l,onPageChange:i}=a.config,f=a.config.selection??"N",r=t.ref(),c=t.ref(null),o=t.ref(),u=t.ref(null),g=s=>{var h,N;try{const m=(h=c==null?void 0:c.value)==null?void 0:h.$el,x=P.useEleHeight(m.getElementsByClassName("ant-table-header")[0]);console.log(m.getElementsByClassName("ant-table-header")[0]),console.log(x);let T=0;if(a.config.pagination){const J=(N=r.value)==null?void 0:N.getElementsByClassName(z)[0];T=P.useEleHeight(J)??0}o.value=s-(x+T),m.getElementsByClassName("ant-table-body")[0].style.height=o.value+"px",u.value=m.getElementsByClassName("ant-table-body")[0]}catch(m){console.warn(m)}};return t.watchEffect(()=>{a.height!==0&&t.nextTick(()=>{setTimeout(()=>{g(a.height)},10)})}),{tableRef:c,tableRootRef:r,tableHeight:o,onPageChange:(s,h)=>{i&&i({page:s,size:h}),u.value.scrollTop=0,(f==="S"||!l)&&(n.value=[],p("update:keys",n.value))},onRowClassName:(s,h)=>e?e(s,h):void 0}}const D=F();function F(){const{rowKey:e,config:{getCheckboxProps:l}}=a;let i=a.config.selection??"N";const f=(o,u)=>{i==="S"?(n.value=[],n.value=u?[o[e]]:[]):n.value=u?n.value.concat(o[e]):n.value.filter(g=>g!==o[e]),p("update:keys",n.value)},r=(o,u,g)=>{const y=g.map(w=>w[e]);n.value=o?n.value.concat(y):n.value.filter(w=>!y.includes(w)),p("update:keys",n.value)};t.watch(()=>a.keys,o=>{n.value=o});const c=t.ref(void 0);return t.watchEffect(()=>{const{selection:o}=a.config;i=o,i!=="N"?c.value={selectedRowKeys:n,onSelect:f,onSelectAll:r,fixed:!0,columnTitle:i==="S"?"选择":null,columnWidth:i==="S"?60:40,getCheckboxProps:l}:c.value=void 0}),c}const U=_();function _(){return e=>{let l;const{rowKey:i,config:{click:f,dbClick:r,selection:c,getCheckboxProps:o}}=a,u=e[i],g=()=>{const y=o===void 0?!1:o(e).disabled;if(c==="N"||y)return;n.value.some(s=>s===u)?n.value=n.value.filter(s=>s!==u):(c==="S"&&(n.value=[]),n.value.push(u)),p("update:keys",n.value)};return{onClick:()=>{clearTimeout(l),l=setTimeout(()=>{g(),f&&f(e)},200)},onDblclick:()=>{clearTimeout(l),r&&r(e)}}}}const R=e=>{e.stopPropagation()},$=t.computed(()=>{const{selection:e}=a.config;return e==="N"}),k={};d.expandedRowRender&&(k.expandedRowRender=e=>t.createVNode(t.Fragment,null,[d.expandedRowRender&&d.expandedRowRender(e)]));const A=()=>t.createVNode(t.Fragment,null,[d.summary&&d.summary()]);return()=>{var e;return t.createVNode("div",{ref:B,style:{height:"100%"}},[t.createVNode(C.Table,{ref:O,"row-key":a.rowKey,bordered:a.config.bordered,columns:K.value,dataSource:E.value,loading:a.loading,size:((e=a.config)==null?void 0:e.size)??"small",scroll:{scrollToFirstRowOnChange:!0,x:"100%",y:V.value+"px"},expandedRowKeys:S.value,"onUpdate:expandedRowKeys":l=>S.value=l,expandRowByClick:$.value,pagination:!1,customRow:U,rowSelection:D.value,rowClassName:j},{bodyCell:({column:l,record:i})=>{if(l.slot==="action")return t.createVNode("div",{onClick:R,onDblclick:R},[t.createVNode(C.Space,null,{default:()=>[d.action&&d.action(i)]})])},...k,summary:A}),t.withDirectives(t.createVNode(C.Pagination,{class:[z],current:v.value.current,"onUpdate:current":l=>v.value.current=l,pageSize:v.value.pageSize,"onUpdate:pageSize":l=>v.value.pageSize=l,disabled:a.loading,"show-size-changer":!0,size:"default","hide-on-single-page":b.hideOnSinglePage,"show-quick-jumper":b.showQuickJumper,"default-page-size":b.defaultPageSize,"page-size-options":b.pageSizeOptions,"show-total":b.showTotal,total:v.value.total,onChange:H},null),[[t.vShow,a.config.pagination]])])}}});exports.default=I;

package/dist/esm/components/table/Table.esm.js

@@ -1,6 +1,6 @@
-import { defineComponent as X, ref as r, computed as C, watchEffect as k, nextTick as _, watch as G, createVNode as f, withDirectives as M, vShow as Y, Fragment as z } from "vue";
+import { defineComponent as X, ref as r, computed as C, watchEffect as k, nextTick as _, watch as G, createVNode as f, withDirectives as M, vShow as Y, Fragment as K } from "vue";
 import { Table as Z, Space as ee, Pagination as te } from "ant-design-vue";
-import { useEleHeight as K } from "../../utils/html.esm.js";
+import { useEleHeight as E } from "../../utils/html.esm.js";
 import { prefixName as ne } from "../theme/index.esm.js";
 const ae = () => ({
   data: {
@@ -32,7 +32,7 @@ const ae = () => ({
     type: Object,
     default: () => []
   }
-}), b = {
+}), p = {
   defaultPageSize: 20,
   hideOnSinglePage: !1,
   pageSizeOptions: ["10", "20", "30", "40"],
@@ -40,7 +40,7 @@ const ae = () => ({
   showQuickJumper: !0,
   showLessItems: !0,
   showTotal: (t) => `总共 ${t} 条`
-}, E = `${ne}-pagination`, ue = /* @__PURE__ */ X({
+}, B = `${ne}-pagination`, ue = /* @__PURE__ */ X({
   name: "DTable",
   props: ae(),
   // emits: {  "update:keys": (keys: []) => void }
@@ -50,10 +50,10 @@ const ae = () => ({
     emit: S,
     slots: s
   }) {
-    const n = r(t.keys || []), O = C(() => t.data), B = C(() => {
+    const n = r(t.keys || []), O = C(() => t.data), H = C(() => {
       var e;
       return ((e = t.config) == null ? void 0 : e.columns) ?? [];
-    }), v = C(() => {
+    }), y = C(() => {
       var e;
       return ((e = t.config) == null ? void 0 : e.pagination) ?? {};
     }), R = r(t.expandedRowKeys);
@@ -64,34 +64,37 @@ const ae = () => ({
       R.value = e;
     });
     const {
-      tableRef: H,
-      tableRootRef: j,
-      tableHeight: D,
-      onPageChange: U,
-      onRowClassName: $
-    } = q();
-    function q() {
+      tableRef: j,
+      tableRootRef: D,
+      tableHeight: U,
+      onPageChange: $,
+      onRowClassName: q
+    } = A();
+    function A() {
       const {
         rowClassName: e,
         keepSelected: o,
         onPageChange: l
       } = t.config, m = t.config.selection ?? "N", d = r(), i = r(null), a = r(), c = r(null), g = (u) => {
-        var h, P;
+        var h, T;
         try {
-          const p = (h = i == null ? void 0 : i.value) == null ? void 0 : h.$el, V = K(p.getElementsByClassName("ant-table-header")[0]);
-          let T = 0;
+          const v = (h = i == null ? void 0 : i.value) == null ? void 0 : h.$el, P = E(v.getElementsByClassName("ant-table-header")[0]);
+          console.log(v.getElementsByClassName("ant-table-header")[0]), console.log(P);
+          let z = 0;
           if (t.config.pagination) {
-            const W = (P = d.value) == null ? void 0 : P.getElementsByClassName(E)[0];
-            T = K(W) ?? 0;
+            const W = (T = d.value) == null ? void 0 : T.getElementsByClassName(B)[0];
+            z = E(W) ?? 0;
           }
-          a.value = u - (V + T), p.getElementsByClassName("ant-table-body")[0].style.height = a.value + "px", c.value = p.getElementsByClassName("ant-table-body")[0];
-        } catch (p) {
-          console.warn(p);
+          a.value = u - (P + z), v.getElementsByClassName("ant-table-body")[0].style.height = a.value + "px", c.value = v.getElementsByClassName("ant-table-body")[0];
+        } catch (v) {
+          console.warn(v);
         }
       };
       return k(() => {
         t.height !== 0 && _(() => {
-          g(t.height);
+          setTimeout(() => {
+            g(t.height);
+          }, 10);
         });
       }), {
         tableRef: i,
@@ -106,8 +109,8 @@ const ae = () => ({
         onRowClassName: (u, h) => e ? e(u, h) : void 0
       };
     }
-    const A = F();
-    function F() {
+    const F = J();
+    function J() {
       const {
         rowKey: e,
         config: {
@@ -118,8 +121,8 @@ const ae = () => ({
       const m = (a, c) => {
         l === "S" ? (n.value = [], n.value = c ? [a[e]] : []) : n.value = c ? n.value.concat(a[e]) : n.value.filter((g) => g !== a[e]), S("update:keys", n.value);
       }, d = (a, c, g) => {
-        const y = g.map((w) => w[e]);
-        n.value = a ? n.value.concat(y) : n.value.filter((w) => !y.includes(w)), S("update:keys", n.value);
+        const w = g.map((b) => b[e]);
+        n.value = a ? n.value.concat(w) : n.value.filter((b) => !w.includes(b)), S("update:keys", n.value);
       };
       G(() => t.keys, (a) => {
         n.value = a;
@@ -140,8 +143,8 @@ const ae = () => ({
         } : i.value = void 0;
       }), i;
     }
-    const J = Q();
-    function Q() {
+    const Q = I();
+    function I() {
       return (e) => {
         let o;
         const {
@@ -153,8 +156,8 @@ const ae = () => ({
             getCheckboxProps: a
           }
         } = t, c = e[l], g = () => {
-          const y = a === void 0 ? !1 : a(e).disabled;
-          if (i === "N" || y)
+          const w = a === void 0 ? !1 : a(e).disabled;
+          if (i === "N" || w)
             return;
           n.value.some((u) => u === c) ? n.value = n.value.filter((u) => u !== c) : (i === "S" && (n.value = []), n.value.push(c)), S("update:keys", n.value);
         };
@@ -182,41 +185,41 @@ const ae = () => ({
     }
     const x = (e) => {
       e.stopPropagation();
-    }, I = C(() => {
+    }, L = C(() => {
       const {
         selection: e
       } = t.config;
       return e === "N";
     }), N = {};
-    s.expandedRowRender && (N.expandedRowRender = (e) => f(z, null, [s.expandedRowRender && s.expandedRowRender(e)]));
-    const L = () => f(z, null, [s.summary && s.summary()]);
+    s.expandedRowRender && (N.expandedRowRender = (e) => f(K, null, [s.expandedRowRender && s.expandedRowRender(e)]));
+    const V = () => f(K, null, [s.summary && s.summary()]);
     return () => {
       var e;
       return f("div", {
-        ref: j,
+        ref: D,
         style: {
           height: "100%"
         }
       }, [f(Z, {
-        ref: H,
+        ref: j,
         "row-key": t.rowKey,
         bordered: t.config.bordered,
-        columns: B.value,
+        columns: H.value,
         dataSource: O.value,
         loading: t.loading,
         size: ((e = t.config) == null ? void 0 : e.size) ?? "small",
         scroll: {
           scrollToFirstRowOnChange: !0,
           x: "100%",
-          y: D.value + "px"
+          y: U.value + "px"
         },
         expandedRowKeys: R.value,
         "onUpdate:expandedRowKeys": (o) => R.value = o,
-        expandRowByClick: I.value,
+        expandRowByClick: L.value,
         pagination: !1,
-        customRow: J,
-        rowSelection: A.value,
-        rowClassName: $
+        customRow: Q,
+        rowSelection: F.value,
+        rowClassName: q
       }, {
         bodyCell: ({
           column: o,
@@ -232,23 +235,23 @@ const ae = () => ({
         },
         ...N,
         // 总结栏插槽
-        summary: L
+        summary: V
       }), M(f(te, {
-        class: [E],
-        current: v.value.current,
-        "onUpdate:current": (o) => v.value.current = o,
-        pageSize: v.value.pageSize,
-        "onUpdate:pageSize": (o) => v.value.pageSize = o,
+        class: [B],
+        current: y.value.current,
+        "onUpdate:current": (o) => y.value.current = o,
+        pageSize: y.value.pageSize,
+        "onUpdate:pageSize": (o) => y.value.pageSize = o,
         disabled: t.loading,
         "show-size-changer": !0,
         size: "default",
-        "hide-on-single-page": b.hideOnSinglePage,
-        "show-quick-jumper": b.showQuickJumper,
-        "default-page-size": b.defaultPageSize,
-        "page-size-options": b.pageSizeOptions,
-        "show-total": b.showTotal,
-        total: v.value.total,
-        onChange: U
+        "hide-on-single-page": p.hideOnSinglePage,
+        "show-quick-jumper": p.showQuickJumper,
+        "default-page-size": p.defaultPageSize,
+        "page-size-options": p.pageSizeOptions,
+        "show-total": p.showTotal,
+        total: y.value.total,
+        onChange: $
       }, null), [[Y, t.config.pagination]])]);
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditari/bsui",
-  "version": "1.0.48",
+  "version": "1.0.49",
   "files": [
     "dist/**",
     "src"

package/src/components/table/Table.tsx

@@ -141,6 +141,8 @@ const DXTable = defineComponent({
           const headerHeight = useEleHeight(
             tableEl.getElementsByClassName("ant-table-header")[0]
           );
+          console.log(tableEl.getElementsByClassName("ant-table-header")[0]);
+          console.log(headerHeight);
           // 获取分页组件高度
           let paginationHeight = 0;
           if (props.config.pagination) {
@@ -164,7 +166,10 @@ const DXTable = defineComponent({
         if (props.height !== 0) {
           nextTick(() => {
             // 必须在组件挂载成功后 执行计算高度 否则无法正确获取元素的高度
-            playHeight(props.height);
+            setTimeout(() => {
+              // 如果表格头 有多行的清空下，获取到的头部高度不对，需要延迟执行获取高度方法
+              playHeight(props.height);
+            }, 10);
           });
         }
       });