br-dionysus 1.6.6 → 1.6.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/README.md +90 -52
  2. package/attributes.json +1 -1
  3. package/dist/br-dionysus.es.js +4698 -4629
  4. package/dist/br-dionysus.umd.js +8 -8
  5. package/dist/index.css +1 -1
  6. package/dist/packages/MTable/src/MTable.vue.d.ts +21 -0
  7. package/dist/packages/MTable/src/token.d.ts +10 -1
  8. package/package.json +1 -1
  9. package/packages/MInline/src/MInline.vue +11 -10
  10. package/packages/MTable/docs/README.md +22 -17
  11. package/packages/MTable/docs/demo.vue +15 -1
  12. package/packages/MTable/src/MTable.vue +54 -6
  13. package/packages/MTable/src/token.ts +11 -2
  14. package/packages/MTableColumn/docs/README.md +8 -8
  15. package/packages/MTableColumn/src/MTableColumn.vue +72 -6
  16. package/tags.json +1 -1
  17. package/web-types.json +1 -1
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- @charset "UTF-8";[data-v-aa54745e]:root{--br-dionysus-primary-color: #646CFFFF;--br-dionysus-primary-bg-color: #979fff}.u-icon-box[data-v-aa54745e]{display:none}.g-box[data-v-aa54745e]{position:relative;overflow:hidden;padding-left:16px;padding-right:16px;width:100%;background-color:#fff;box-sizing:border-box}.g-box .u-page-btn[data-v-aa54745e]{position:absolute;bottom:0;height:33px;border:0;box-sizing:border-box;background-color:#fff;opacity:.6;cursor:pointer}.g-box .s-previous-btn[data-v-aa54745e]{left:0}.g-box .s-next-btn[data-v-aa54745e]{right:0;transform:rotate(180deg)}.g-dionysus-box[data-v-aa54745e]{overflow:hidden;width:100%}.g-tab-page-box[data-v-aa54745e]{display:flex;color:#4a4a4a;white-space:nowrap;box-sizing:border-box;box-shadow:2px 0 8px #1d23290d;transform:translate(0);transition:.2s}.g-tab-page-box .u-li[data-v-aa54745e]{display:inline-block;position:relative;height:33px;font-size:14px;box-sizing:border-box;cursor:pointer}.g-tab-page-box .u-li .u-gp[data-v-aa54745e]{display:flex;position:relative;z-index:1;padding:6px 8px;height:100%;align-items:center;background-color:#fff;border-radius:6px 6px 0 0;box-sizing:border-box}.g-tab-page-box .u-li .u-gp[data-v-aa54745e]:after{position:absolute;bottom:0;right:0;z-index:1;content:"";width:12px;height:12px;border-radius:6px 6px 0;pointer-events:none}.g-tab-page-box .u-li .u-gp[data-v-aa54745e]:before{position:absolute;bottom:0;left:0;z-index:1;content:"";width:12px;height:12px;border-radius:6px 6px 6px 0;pointer-events:none}.g-tab-page-box .u-li[data-v-aa54745e]:after{position:absolute;bottom:0;right:0;z-index:2;content:"";width:12px;height:12px;border-radius:6px;pointer-events:none}.g-tab-page-box .u-li[data-v-aa54745e]:before{position:absolute;bottom:0;left:0;z-index:2;content:"";width:12px;height:12px;border-radius:6px;pointer-events:none}.g-tab-page-box .u-li[data-hover=true] .u-gp[data-v-aa54745e],.g-tab-page-box .u-li[data-hover=true] .u-gp[data-v-aa54745e]:after,.g-tab-page-box .u-li[data-hover=true] .u-gp[data-v-aa54745e]:before,.g-tab-page-box .u-li[data-hover=true][data-active=false][data-v-aa54745e]:after,.g-tab-page-box .u-li[data-hover=true][data-active=false][data-v-aa54745e]:before{background-color:#dfe1e5}.g-tab-page-box .u-li[data-hover-before=true] .u-gp[data-v-aa54745e]:after{background-color:#dfe1e5}.g-tab-page-box .u-li[data-hover-before=true][data-v-aa54745e]:after{background-color:#fff}.g-tab-page-box .u-li[data-hover-after=true] .u-gp[data-v-aa54745e]:before{background-color:#dfe1e5}.g-tab-page-box .u-li[data-hover-after=true][data-v-aa54745e]:before{background-color:#fff}.g-tab-page-box .u-li[data-active-before=true] .u-gp[data-v-aa54745e]:after{background-color:var(--br-dionysus-primary-bg-color)}.g-tab-page-box .u-li[data-active-before=true][data-v-aa54745e]:after{background-color:#fff}.g-tab-page-box .u-li[data-active-after=true] .u-gp[data-v-aa54745e]:before{background-color:var(--br-dionysus-primary-bg-color)}.g-tab-page-box .u-li[data-active-after=true][data-v-aa54745e]:before{background-color:#fff}.g-tab-page-box .u-li[data-active=true][data-v-aa54745e]{color:var(--br-dionysus-primary-color)}.g-tab-page-box .u-li[data-active=true] .u-gp[data-v-aa54745e],.g-tab-page-box .u-li[data-active=true] .u-gp[data-v-aa54745e]:before,.g-tab-page-box .u-li[data-active=true] .u-gp[data-v-aa54745e]:after,.g-tab-page-box .u-li[data-active=true][data-v-aa54745e]:after,.g-tab-page-box .u-li[data-active=true][data-v-aa54745e]:before{background-color:var(--br-dionysus-primary-bg-color)}.g-tab-page-box .u-li .u-icon[data-v-aa54745e]{margin-right:8px;pointer-events:none}.g-tab-page-box .u-li .u-sn[data-v-aa54745e]{pointer-events:none}.g-tab-page-box .u-li .u-btn[data-v-aa54745e]{position:relative;margin-left:4px;width:14px;height:14px;font-size:14px;border-radius:50%}.g-tab-page-box .u-li .u-btn[data-v-aa54745e]:after{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;content:"";border-radius:50%}.g-tab-page-box .u-li .u-btn[data-v-aa54745e]:hover{color:#fff;background-color:#9ca3af}.g-tab-page-box .u-li[data-active=true] .u-btn[data-v-aa54745e]:hover{color:#fff;background-color:var(--br-dionysus-primary-color)}.g-tab-page-box .s-icon[data-v-aa54745e]{display:block;position:relative;width:14px;height:14px}.g-tab-page-box .s-icon[data-v-aa54745e]:after{position:absolute;top:50%;left:50%;content:"";width:1px;height:10px;background-color:#303133;transform:translate(-50%,-50%) rotate(45deg)}.g-tab-page-box .s-icon[data-v-aa54745e]:before{position:absolute;top:50%;left:50%;content:"";width:1px;height:10px;background-color:#303133;transform:translate(-50%,-50%) rotate(-45deg)}.g-tab-page-box .u-li[data-active=true] .s-icon[data-v-aa54745e]:after,.g-tab-page-box .u-li[data-active=true] .s-icon[data-v-aa54745e]:before{background-color:var(--br-dionysus-primary-color)}.g-tab-page-box .u-li .u-btn:hover .s-icon[data-v-aa54745e]:after,.g-tab-page-box .u-li .u-btn:hover .s-icon[data-v-aa54745e]:before{background-color:#fff}.g-tab-page-box .u-li[data-active=true] .u-btn:hover .s-icon[data-v-aa54745e]:after,.g-tab-page-box .u-li[data-active=true] .u-btn:hover .s-icon[data-v-aa54745e]:before{background-color:#fff}.g-tab-page-box .u-li[data-active=false][data-hover=false][data-active-before=false][data-hover-before=false] .u-sn[data-v-aa54745e]:after{position:absolute;top:50%;right:0;z-index:2;content:"";width:1px;height:50%;transform:translateY(-50%);background-color:#4a4a4a}.g-tab-page-box .u-li:nth-last-of-type(1)[data-active=false][data-hover=false] .u-sn[data-v-aa54745e]:after{background-color:#0000!important}.g-m-input-number-box[data-v-5002f7b6]{position:relative;width:100%}.g-m-input-number-box .m-input-number[data-v-5002f7b6]{width:100%}.g-m-input-number-box .u-text[data-thousandth-place=true][data-v-5002f7b6]{display:inline-block;position:absolute;top:0;left:0;margin-bottom:0;padding-left:15px;padding-right:15px;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-feature-settings:normal;font-stretch:100%;font-weight:400;text-indent:0;color:#606266;text-align:left;letter-spacing:normal;word-spacing:0;background-color:#0000;border-radius:4px;border:1px solid rgba(0,0,0,0);box-sizing:border-box;cursor:text;pointer-events:none}.g-m-input-number-box .u-text[data-thousandth-place=true][data-v-5002f7b6]:hover{border-color:#c0c4cc}.g-m-input-number-box .u-text[data-thousandth-place=true][data-size=mini][data-v-5002f7b6]{font-size:12px;height:28px;line-height:28px}.g-m-input-number-box .u-text[data-thousandth-place=true][data-disabled=true][data-v-5002f7b6]{color:#00000040}.g-m-input-number-box .u-text[data-thousandth-place=true][data-focus=true][data-v-5002f7b6]{color:#0000}.g-m-input-number-box[data-is-table-mini=true] .u-text[data-size=mini][data-v-5002f7b6]{height:24px;font-size:14px;line-height:24px}.g-m-input-number-box[data-no-spacing] .u-text[data-v-5002f7b6]{padding-left:0}.g-m-input-number-box .m-input-number .el-input__inner{text-align:left}.g-m-input-number-box .m-input-number[data-thousandth-place=true] .el-input__inner{color:#0000}.g-m-input-number-box .m-input-number[data-focus=true] .el-input__inner{color:#606266}.g-m-input-number-box .m-input-number[no-border=true] .el-input__inner{border:0}.g-m-input-number-box[data-is-table-mini=true] .m-input-number .el-input__inner{height:24px;font-size:14px;line-height:24px}.g-m-input-number-box[data-no-spacing=true] .m-input-number .el-input__inner{padding-left:0}.g-inline-box[data-v-fbfdbd5f]{margin-bottom:14px;padding-top:10px;border:1px solid var(--el-border-color-lighter);border-radius:4px}.m-inline-btn[data-v-fbfdbd5f]{padding:0 14px 10px}.m-inline[data-v-fbfdbd5f]{display:flex;position:relative;width:100%}.m-inline-btn+.m-inline[data-show-inline-btn=true][data-v-fbfdbd5f]{padding-top:10px}.m-inline-btn+.m-inline[data-show-inline-btn=true][data-v-fbfdbd5f]:before{position:absolute;top:0;left:50%;content:"";width:calc(100% - 28px);height:1px;background-color:var(--el-border-color-lighter);transform:translate(-50%)}.u-btn-gp[data-v-fbfdbd5f]{display:flex;padding-bottom:10px;padding-left:14px;padding-right:14px;align-items:center;box-sizing:border-box}.u-row[data-v-fbfdbd5f]{display:flex;overflow:hidden;max-height:34px;flex:1}.u-row[data-unfold=true][data-v-fbfdbd5f]{max-height:none!important}.u-btn-unfold[data-v-fbfdbd5f]{margin-left:8px;width:12px;height:24px;line-height:24px;text-align:center;color:var(--el-text-color-regular);transform:rotate(90deg);cursor:pointer}.u-btn-unfold[data-unfold=true][data-v-fbfdbd5f]{transform:rotate(270deg)}.g-inline-box .m-inline[dataCover] [data-box]{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--m-inline-min-width),1fr))}.g-inline-box .m-inline[dataCover] [data-box] [data-item]{padding-bottom:10px;min-width:var(--m-inline-min-width);max-width:var(--m-inline-max-width)}.g-inline-box .m-inline[dataCover] .el-form-item{margin-bottom:0;width:100%}.g-inline-box .m-inline[dataCover] .el-form-item .el-input,.g-inline-box .m-inline[dataCover] .el-form-item .el-cascader,.g-inline-box .m-inline[dataCover] .el-form{width:100%}.g-inline-box .m-inline[dataCover] .el-form .u-it-gp{display:flex}.g-inline-box .m-inline[dataCover] .u-row[data-single-line=true] .el-form{display:flex;justify-content:flex-start}.g-skin-config-box[data-v-56c57a90]{display:flex}.g-skin-config-box .u-tt[data-v-56c57a90]{padding:0 24px;line-height:50px;box-shadow:0 1px 2px #00152914}.g-skin-config-box .u-box[data-v-56c57a90]{display:flex;padding:20px 24px;height:calc(100% - 50px);flex-direction:column}.g-skin-config-box .u-box .u-box-tt[data-v-56c57a90]{margin:34px 0}.g-skin-config-box .u-box .u-group[data-v-56c57a90]{display:flex;margin-bottom:12px;justify-content:space-between;align-items:center;color:var(--m-fc-body)}.g-skin-config-box .u-box .u-gulp[data-v-56c57a90]{display:flex;margin:0 -10px;flex-direction:column;flex-wrap:wrap;flex:1}.g-skin-config-box .u-box .u-list[data-v-56c57a90]{display:flex;flex-wrap:wrap}.g-skin-config-box .u-box .u-list .u-li[data-v-56c57a90]{display:flex;margin-bottom:10px;width:12.5%;justify-content:center}.g-skin-config-box .u-box .u-list .u-li .u-color[data-v-56c57a90]{display:flex;width:20px;height:20px;color:#fff;align-items:center;justify-content:center;cursor:pointer}.g-skin-config-box .u-pc[data-v-56c57a90]{display:flex;margin-top:10px;width:100%;flex:1;justify-content:center}.u-btn[data-v-56c57a90]{display:flex;font-size:18px;color:var(--el-color-primary);cursor:pointer}.u-btn svg path[data-v-56c57a90]{stroke:var(--el-color-primary);fill:var(--el-color-primary)}.u-slt[data-v-56c57a90]{width:100px}.u-it[data-v-56c57a90]{width:106px}.g-skin-config-box .el-drawer__body{padding:0}.g-skin-config-box .el-switch{height:auto}.g-skin-config-box .u-pc{display:flex;justify-content:center}.g-skin-config-box .u-pc .el-color-picker{width:100%}.g-skin-config-box .u-pc .el-color-picker .el-color-picker__trigger{width:100%;height:34px}.g-skin-config-box .u-tabs .el-tabs__item{padding:0 10px}.m-table-box[data-v-821b722a]{position:relative}.el-table__empty-text img[data-v-821b722a]{width:15%}.u-icon[data-v-b3202d6a]{display:inline-block;position:relative;width:14px;height:14px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAMdJREFUOE/tkyESwjAQRfMj0Xgkp2AmaQweHCeAS1AuASfAgce0yQynQOLRyHyazpRpoW2YAcnKbP7L7t8sxJeBoM+yLK04Ukp678vzWBhj0iegEK5jgnq+eGTzO4C1dkhyDGAvhBhFKrmSXAC4aK1vjV6dcxPv/QnAoA1C8i6lnCqlzlX+zaw8z2cADh2AeZIkx3qu1W3n3JLktnERWCmldq/gznFZa8NUyvFWjrdV9QcIEfWgz8BgaicgLFj467H9+Gjr+iAPDfV1EeVT6aEAAAAASUVORK5CYII=);background-size:100% 100%;transform:translateY(2px);cursor:pointer}.u-filter-group[data-v-b3202d6a]{display:inline-block;position:relative}.u-set[data-v-b3202d6a]{padding:2.5px 0;float:right}.m-filter-box[data-is-open=true]{opacity:1;pointer-events:auto}.m-filter-box[data-is-open=false]{opacity:0;pointer-events:none}.m-filter-box .u-filter-mask{position:fixed;top:0;left:0;z-index:2050;width:100%;height:100%}.m-filter-box .u-it-gp{padding:10px;border-bottom:1px solid var(--el-border-color-lighter)}.m-filter-box .u-list-box{overflow:hidden;position:fixed;top:0;left:0;z-index:2050;max-width:50%;background:var(--el-bg-color-overlay);border:1px solid var(--el-border-color-light);border-radius:var(--el-popper-border-radius, 4px);box-shadow:var(--el-box-shadow-light)}.m-filter-box .u-list-box .u-checkbox-group{overflow-y:auto;display:block;padding:10px;max-height:280px}.m-filter-box .u-list-box label.el-checkbox{display:flex;align-items:center;margin-right:5px;margin-bottom:12px;margin-left:5px;height:unset}.m-filter-box .u-list-box label.el-checkbox:last-child{margin-bottom:0}.m-filter-box .u-list-box .u-btn-gp{border-top:1px solid var(--el-border-color-lighter);padding:8px}.m-filter-box .u-list-box button.is-disabled{color:var(--el-disabled-text-color);cursor:not-allowed}.m-filter-box .u-list-box button{background:0 0;border:none;color:var(--el-text-color-regular);cursor:pointer;font-size:var(--el-font-size-small);padding:0 3px}.vab[data-v-a37bb24c]{vertical-align:baseline}.g-m-table-column-set-box[data-v-a37bb24c]{display:flex;position:relative}.g-m-table-column-set-box[data-fold=true][data-v-a37bb24c]{overflow:hidden;width:10px;transition:width .3s}.g-m-table-column-set-box[data-fold=true][data-v-a37bb24c]:hover{width:36px}.g-m-table-column-set-box[data-visible=true][data-v-a37bb24c]{overflow:visible;width:auto!important}.m-panel-box[data-v-a37bb24c]{display:none;overflow-y:auto;padding:6px 4px;position:absolute;top:30px;right:0;z-index:7;min-width:214px;max-height:300px;background-color:#fff;border-radius:8px;border:1px solid var(--el-border-color-lighter);box-shadow:2px 0 8px #1d23290d;box-sizing:border-box}.m-panel-box[data-active=true][data-v-a37bb24c]{display:block}.m-panel-box .u-list .u-li[data-v-a37bb24c]{display:flex;align-items:center;padding:4px}.m-panel-box .u-list .u-li .u-icon[data-v-a37bb24c]{margin-right:8px;font-size:12px;color:var(--el-color-primary);cursor:move}.m-panel-box .u-tt[data-v-a37bb24c],.m-panel-box .u-tc[data-v-a37bb24c]{display:flex;padding-top:10px}.m-panel-box .u-tt .u-p[data-v-a37bb24c],.m-panel-box .u-tc .u-p[data-v-a37bb24c]{display:block;padding-left:4px;width:50px;align-self:auto;white-space:nowrap;line-height:24px;font-weight:700}.m-panel-box .u-tc[data-v-a37bb24c]{padding-top:0}.m-panel-box .u-tc .u-p[data-v-a37bb24c]{line-height:40px}.m-panel-box .u-divider[data-v-a37bb24c]{margin-top:10px;margin-bottom:0}.m-masked[data-v-a37bb24c],.g-m-table-column-set-teleport[data-v-a37bb24c]{position:fixed;top:0;left:0;z-index:6;width:100%;height:100%}.u-group[data-v-88e3837e]{display:flex;align-items:center}.u-group .u-checkbox[data-v-88e3837e]{padding-right:4px;pointer-events:none;margin-right:0}.u-checkbox[data-v-ce4ca417]{height:var(--el-checkbox-height, 20px)}.g-select-table-box{width:100%}.u-img{width:80px}.m-select-table .el-table{--el-table-header-bg-color: var(--m-list-el-table-header-bg-color, #f5f5f5)}.m-select-table .el-select-dropdown__empty{padding:0}.m-select-table .el-select-dropdown__empty .btn-box{text-align:right;padding-bottom:6px}.m-select-table .m-table-select{padding:6px;overflow-y:auto}.m-select-table .m-page{padding:4px}.g-select-table-box[data-v-bb9b01dd]{position:relative;line-height:normal}.g-select-table-box .u-input-gp[data-v-bb9b01dd]{position:relative}.g-select-table-box .u-input-gp:hover .el-icon-circle-close[data-v-bb9b01dd]{display:block}.g-select-table-box .el-icon-circle-close[data-v-bb9b01dd]{display:none;position:absolute;top:50%;right:10px;font-size:14px;color:#c0c4cc;transform:translateY(-50%);cursor:pointer}.g-select-table-box .el-icon-circle-close[data-v-bb9b01dd]:hover{color:#a4a7ad}.g-select-table-box .s-table[data-v-bb9b01dd]{width:100%}.btn-box[data-v-bb9b01dd]{text-align:right;padding-bottom:6px}.m-page[data-v-bb9b01dd]{padding-top:4px}.g-select-table-box .u-input-gp .el-input{display:flex}.g-select-table-box .el-table{--el-table-header-bg-color: var(--m-list-el-table-header-bg-color, #f5f5f5)}
1
+ @charset "UTF-8";[data-v-aa54745e]:root{--br-dionysus-primary-color: #646CFFFF;--br-dionysus-primary-bg-color: #979fff}.u-icon-box[data-v-aa54745e]{display:none}.g-box[data-v-aa54745e]{position:relative;overflow:hidden;padding-left:16px;padding-right:16px;width:100%;background-color:#fff;box-sizing:border-box}.g-box .u-page-btn[data-v-aa54745e]{position:absolute;bottom:0;height:33px;border:0;box-sizing:border-box;background-color:#fff;opacity:.6;cursor:pointer}.g-box .s-previous-btn[data-v-aa54745e]{left:0}.g-box .s-next-btn[data-v-aa54745e]{right:0;transform:rotate(180deg)}.g-dionysus-box[data-v-aa54745e]{overflow:hidden;width:100%}.g-tab-page-box[data-v-aa54745e]{display:flex;color:#4a4a4a;white-space:nowrap;box-sizing:border-box;box-shadow:2px 0 8px #1d23290d;transform:translate(0);transition:.2s}.g-tab-page-box .u-li[data-v-aa54745e]{display:inline-block;position:relative;height:33px;font-size:14px;box-sizing:border-box;cursor:pointer}.g-tab-page-box .u-li .u-gp[data-v-aa54745e]{display:flex;position:relative;z-index:1;padding:6px 8px;height:100%;align-items:center;background-color:#fff;border-radius:6px 6px 0 0;box-sizing:border-box}.g-tab-page-box .u-li .u-gp[data-v-aa54745e]:after{position:absolute;bottom:0;right:0;z-index:1;content:"";width:12px;height:12px;border-radius:6px 6px 0;pointer-events:none}.g-tab-page-box .u-li .u-gp[data-v-aa54745e]:before{position:absolute;bottom:0;left:0;z-index:1;content:"";width:12px;height:12px;border-radius:6px 6px 6px 0;pointer-events:none}.g-tab-page-box .u-li[data-v-aa54745e]:after{position:absolute;bottom:0;right:0;z-index:2;content:"";width:12px;height:12px;border-radius:6px;pointer-events:none}.g-tab-page-box .u-li[data-v-aa54745e]:before{position:absolute;bottom:0;left:0;z-index:2;content:"";width:12px;height:12px;border-radius:6px;pointer-events:none}.g-tab-page-box .u-li[data-hover=true] .u-gp[data-v-aa54745e],.g-tab-page-box .u-li[data-hover=true] .u-gp[data-v-aa54745e]:after,.g-tab-page-box .u-li[data-hover=true] .u-gp[data-v-aa54745e]:before,.g-tab-page-box .u-li[data-hover=true][data-active=false][data-v-aa54745e]:after,.g-tab-page-box .u-li[data-hover=true][data-active=false][data-v-aa54745e]:before{background-color:#dfe1e5}.g-tab-page-box .u-li[data-hover-before=true] .u-gp[data-v-aa54745e]:after{background-color:#dfe1e5}.g-tab-page-box .u-li[data-hover-before=true][data-v-aa54745e]:after{background-color:#fff}.g-tab-page-box .u-li[data-hover-after=true] .u-gp[data-v-aa54745e]:before{background-color:#dfe1e5}.g-tab-page-box .u-li[data-hover-after=true][data-v-aa54745e]:before{background-color:#fff}.g-tab-page-box .u-li[data-active-before=true] .u-gp[data-v-aa54745e]:after{background-color:var(--br-dionysus-primary-bg-color)}.g-tab-page-box .u-li[data-active-before=true][data-v-aa54745e]:after{background-color:#fff}.g-tab-page-box .u-li[data-active-after=true] .u-gp[data-v-aa54745e]:before{background-color:var(--br-dionysus-primary-bg-color)}.g-tab-page-box .u-li[data-active-after=true][data-v-aa54745e]:before{background-color:#fff}.g-tab-page-box .u-li[data-active=true][data-v-aa54745e]{color:var(--br-dionysus-primary-color)}.g-tab-page-box .u-li[data-active=true] .u-gp[data-v-aa54745e],.g-tab-page-box .u-li[data-active=true] .u-gp[data-v-aa54745e]:before,.g-tab-page-box .u-li[data-active=true] .u-gp[data-v-aa54745e]:after,.g-tab-page-box .u-li[data-active=true][data-v-aa54745e]:after,.g-tab-page-box .u-li[data-active=true][data-v-aa54745e]:before{background-color:var(--br-dionysus-primary-bg-color)}.g-tab-page-box .u-li .u-icon[data-v-aa54745e]{margin-right:8px;pointer-events:none}.g-tab-page-box .u-li .u-sn[data-v-aa54745e]{pointer-events:none}.g-tab-page-box .u-li .u-btn[data-v-aa54745e]{position:relative;margin-left:4px;width:14px;height:14px;font-size:14px;border-radius:50%}.g-tab-page-box .u-li .u-btn[data-v-aa54745e]:after{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;content:"";border-radius:50%}.g-tab-page-box .u-li .u-btn[data-v-aa54745e]:hover{color:#fff;background-color:#9ca3af}.g-tab-page-box .u-li[data-active=true] .u-btn[data-v-aa54745e]:hover{color:#fff;background-color:var(--br-dionysus-primary-color)}.g-tab-page-box .s-icon[data-v-aa54745e]{display:block;position:relative;width:14px;height:14px}.g-tab-page-box .s-icon[data-v-aa54745e]:after{position:absolute;top:50%;left:50%;content:"";width:1px;height:10px;background-color:#303133;transform:translate(-50%,-50%) rotate(45deg)}.g-tab-page-box .s-icon[data-v-aa54745e]:before{position:absolute;top:50%;left:50%;content:"";width:1px;height:10px;background-color:#303133;transform:translate(-50%,-50%) rotate(-45deg)}.g-tab-page-box .u-li[data-active=true] .s-icon[data-v-aa54745e]:after,.g-tab-page-box .u-li[data-active=true] .s-icon[data-v-aa54745e]:before{background-color:var(--br-dionysus-primary-color)}.g-tab-page-box .u-li .u-btn:hover .s-icon[data-v-aa54745e]:after,.g-tab-page-box .u-li .u-btn:hover .s-icon[data-v-aa54745e]:before{background-color:#fff}.g-tab-page-box .u-li[data-active=true] .u-btn:hover .s-icon[data-v-aa54745e]:after,.g-tab-page-box .u-li[data-active=true] .u-btn:hover .s-icon[data-v-aa54745e]:before{background-color:#fff}.g-tab-page-box .u-li[data-active=false][data-hover=false][data-active-before=false][data-hover-before=false] .u-sn[data-v-aa54745e]:after{position:absolute;top:50%;right:0;z-index:2;content:"";width:1px;height:50%;transform:translateY(-50%);background-color:#4a4a4a}.g-tab-page-box .u-li:nth-last-of-type(1)[data-active=false][data-hover=false] .u-sn[data-v-aa54745e]:after{background-color:#0000!important}.g-m-input-number-box[data-v-5002f7b6]{position:relative;width:100%}.g-m-input-number-box .m-input-number[data-v-5002f7b6]{width:100%}.g-m-input-number-box .u-text[data-thousandth-place=true][data-v-5002f7b6]{display:inline-block;position:absolute;top:0;left:0;margin-bottom:0;padding-left:15px;padding-right:15px;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-feature-settings:normal;font-stretch:100%;font-weight:400;text-indent:0;color:#606266;text-align:left;letter-spacing:normal;word-spacing:0;background-color:#0000;border-radius:4px;border:1px solid rgba(0,0,0,0);box-sizing:border-box;cursor:text;pointer-events:none}.g-m-input-number-box .u-text[data-thousandth-place=true][data-v-5002f7b6]:hover{border-color:#c0c4cc}.g-m-input-number-box .u-text[data-thousandth-place=true][data-size=mini][data-v-5002f7b6]{font-size:12px;height:28px;line-height:28px}.g-m-input-number-box .u-text[data-thousandth-place=true][data-disabled=true][data-v-5002f7b6]{color:#00000040}.g-m-input-number-box .u-text[data-thousandth-place=true][data-focus=true][data-v-5002f7b6]{color:#0000}.g-m-input-number-box[data-is-table-mini=true] .u-text[data-size=mini][data-v-5002f7b6]{height:24px;font-size:14px;line-height:24px}.g-m-input-number-box[data-no-spacing] .u-text[data-v-5002f7b6]{padding-left:0}.g-m-input-number-box .m-input-number .el-input__inner{text-align:left}.g-m-input-number-box .m-input-number[data-thousandth-place=true] .el-input__inner{color:#0000}.g-m-input-number-box .m-input-number[data-focus=true] .el-input__inner{color:#606266}.g-m-input-number-box .m-input-number[no-border=true] .el-input__inner{border:0}.g-m-input-number-box[data-is-table-mini=true] .m-input-number .el-input__inner{height:24px;font-size:14px;line-height:24px}.g-m-input-number-box[data-no-spacing=true] .m-input-number .el-input__inner{padding-left:0}.g-inline-box[data-v-1c6c2f76]{margin-bottom:14px;padding-top:10px;border:1px solid var(--el-border-color-lighter);border-radius:4px}.m-inline-btn[data-v-1c6c2f76]{padding:0 14px 10px}.m-inline[data-v-1c6c2f76]{display:flex;position:relative;width:100%}.m-inline-btn+.m-inline[data-show-inline-btn=true][data-v-1c6c2f76]{padding-top:10px}.m-inline-btn+.m-inline[data-show-inline-btn=true][data-v-1c6c2f76]:before{position:absolute;top:0;left:50%;content:"";width:calc(100% - 28px);height:1px;background-color:var(--el-border-color-lighter);transform:translate(-50%)}.u-btn-gp[data-v-1c6c2f76]{display:flex;padding-bottom:10px;padding-left:14px;padding-right:14px;align-items:center;box-sizing:border-box}.u-row[data-v-1c6c2f76]{display:flex;overflow:hidden;max-height:34px;flex:1}.u-row[data-unfold=true][data-v-1c6c2f76]{max-height:none!important}.u-btn-unfold[data-v-1c6c2f76]{margin-left:8px;width:12px;height:24px;line-height:24px;text-align:center;color:var(--el-text-color-regular);transform:rotate(90deg);cursor:pointer}.u-btn-unfold[data-unfold=true][data-v-1c6c2f76]{transform:rotate(270deg)}.g-inline-box .m-inline[dataCover] [data-box]{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--m-inline-min-width),1fr))}.g-inline-box .m-inline[dataCover] [data-box] [data-item]{padding-bottom:10px;min-width:var(--m-inline-min-width);max-width:var(--m-inline-max-width)}.g-inline-box .m-inline[dataCover] .el-form-item{margin-bottom:0;width:100%}.g-inline-box .m-inline[dataCover] .el-form-item .el-input,.g-inline-box .m-inline[dataCover] .el-form-item .el-cascader,.g-inline-box .m-inline[dataCover] .el-form{width:100%}.g-inline-box .m-inline[dataCover] .el-form .u-it-gp{display:flex}.g-inline-box .m-inline[dataCover] .u-row[data-single-line=true] .el-form{display:flex;justify-content:flex-start}.g-skin-config-box[data-v-56c57a90]{display:flex}.g-skin-config-box .u-tt[data-v-56c57a90]{padding:0 24px;line-height:50px;box-shadow:0 1px 2px #00152914}.g-skin-config-box .u-box[data-v-56c57a90]{display:flex;padding:20px 24px;height:calc(100% - 50px);flex-direction:column}.g-skin-config-box .u-box .u-box-tt[data-v-56c57a90]{margin:34px 0}.g-skin-config-box .u-box .u-group[data-v-56c57a90]{display:flex;margin-bottom:12px;justify-content:space-between;align-items:center;color:var(--m-fc-body)}.g-skin-config-box .u-box .u-gulp[data-v-56c57a90]{display:flex;margin:0 -10px;flex-direction:column;flex-wrap:wrap;flex:1}.g-skin-config-box .u-box .u-list[data-v-56c57a90]{display:flex;flex-wrap:wrap}.g-skin-config-box .u-box .u-list .u-li[data-v-56c57a90]{display:flex;margin-bottom:10px;width:12.5%;justify-content:center}.g-skin-config-box .u-box .u-list .u-li .u-color[data-v-56c57a90]{display:flex;width:20px;height:20px;color:#fff;align-items:center;justify-content:center;cursor:pointer}.g-skin-config-box .u-pc[data-v-56c57a90]{display:flex;margin-top:10px;width:100%;flex:1;justify-content:center}.u-btn[data-v-56c57a90]{display:flex;font-size:18px;color:var(--el-color-primary);cursor:pointer}.u-btn svg path[data-v-56c57a90]{stroke:var(--el-color-primary);fill:var(--el-color-primary)}.u-slt[data-v-56c57a90]{width:100px}.u-it[data-v-56c57a90]{width:106px}.g-skin-config-box .el-drawer__body{padding:0}.g-skin-config-box .el-switch{height:auto}.g-skin-config-box .u-pc{display:flex;justify-content:center}.g-skin-config-box .u-pc .el-color-picker{width:100%}.g-skin-config-box .u-pc .el-color-picker .el-color-picker__trigger{width:100%;height:34px}.g-skin-config-box .u-tabs .el-tabs__item{padding:0 10px}.m-br-table-box[data-v-dc1c32ca]{position:relative}.el-table__empty-text img[data-v-dc1c32ca]{width:15%}.m-br-table-box[data-is-expand=true] .el-table__expand-column,.m-br-table-box[data-is-expand=true] colgroup>col:nth-of-type(1){display:none}.u-icon[data-v-493aea56]{display:inline-block;position:relative;width:14px;height:14px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAMdJREFUOE/tkyESwjAQRfMj0Xgkp2AmaQweHCeAS1AuASfAgce0yQynQOLRyHyazpRpoW2YAcnKbP7L7t8sxJeBoM+yLK04Ukp678vzWBhj0iegEK5jgnq+eGTzO4C1dkhyDGAvhBhFKrmSXAC4aK1vjV6dcxPv/QnAoA1C8i6lnCqlzlX+zaw8z2cADh2AeZIkx3qu1W3n3JLktnERWCmldq/gznFZa8NUyvFWjrdV9QcIEfWgz8BgaicgLFj467H9+Gjr+iAPDfV1EeVT6aEAAAAASUVORK5CYII=);background-size:100% 100%;transform:translateY(2px);cursor:pointer}.u-filter-group[data-v-493aea56]{display:inline-block;position:relative}.u-set[data-v-493aea56]{padding:2.5px 0;float:right}.u-my-table-column-gp[data-v-493aea56]{display:inline}.u-my-table-column-icon[data-v-493aea56]{float:left;padding:4px;cursor:pointer;transition:.3s;font-size:12px}.u-my-table-column-icon[data-active=true][data-v-493aea56]{transform:rotate(90deg)}.m-filter-box[data-is-open=true]{opacity:1;pointer-events:auto}.m-filter-box[data-is-open=false]{opacity:0;pointer-events:none}.m-filter-box .u-filter-mask{position:fixed;top:0;left:0;z-index:2050;width:100%;height:100%}.m-filter-box .u-it-gp{padding:10px;border-bottom:1px solid var(--el-border-color-lighter)}.m-filter-box .u-list-box{overflow:hidden;position:fixed;top:0;left:0;z-index:2050;max-width:50%;background:var(--el-bg-color-overlay);border:1px solid var(--el-border-color-light);border-radius:var(--el-popper-border-radius, 4px);box-shadow:var(--el-box-shadow-light)}.m-filter-box .u-list-box .u-checkbox-group{overflow-y:auto;display:block;padding:10px;max-height:280px}.m-filter-box .u-list-box label.el-checkbox{display:flex;align-items:center;margin-right:5px;margin-bottom:12px;margin-left:5px;height:unset}.m-filter-box .u-list-box label.el-checkbox:last-child{margin-bottom:0}.m-filter-box .u-list-box .u-btn-gp{border-top:1px solid var(--el-border-color-lighter);padding:8px}.m-filter-box .u-list-box button.is-disabled{color:var(--el-disabled-text-color);cursor:not-allowed}.m-filter-box .u-list-box button{background:0 0;border:none;color:var(--el-text-color-regular);cursor:pointer;font-size:var(--el-font-size-small);padding:0 3px}.vab[data-v-a37bb24c]{vertical-align:baseline}.g-m-table-column-set-box[data-v-a37bb24c]{display:flex;position:relative}.g-m-table-column-set-box[data-fold=true][data-v-a37bb24c]{overflow:hidden;width:10px;transition:width .3s}.g-m-table-column-set-box[data-fold=true][data-v-a37bb24c]:hover{width:36px}.g-m-table-column-set-box[data-visible=true][data-v-a37bb24c]{overflow:visible;width:auto!important}.m-panel-box[data-v-a37bb24c]{display:none;overflow-y:auto;padding:6px 4px;position:absolute;top:30px;right:0;z-index:7;min-width:214px;max-height:300px;background-color:#fff;border-radius:8px;border:1px solid var(--el-border-color-lighter);box-shadow:2px 0 8px #1d23290d;box-sizing:border-box}.m-panel-box[data-active=true][data-v-a37bb24c]{display:block}.m-panel-box .u-list .u-li[data-v-a37bb24c]{display:flex;align-items:center;padding:4px}.m-panel-box .u-list .u-li .u-icon[data-v-a37bb24c]{margin-right:8px;font-size:12px;color:var(--el-color-primary);cursor:move}.m-panel-box .u-tt[data-v-a37bb24c],.m-panel-box .u-tc[data-v-a37bb24c]{display:flex;padding-top:10px}.m-panel-box .u-tt .u-p[data-v-a37bb24c],.m-panel-box .u-tc .u-p[data-v-a37bb24c]{display:block;padding-left:4px;width:50px;align-self:auto;white-space:nowrap;line-height:24px;font-weight:700}.m-panel-box .u-tc[data-v-a37bb24c]{padding-top:0}.m-panel-box .u-tc .u-p[data-v-a37bb24c]{line-height:40px}.m-panel-box .u-divider[data-v-a37bb24c]{margin-top:10px;margin-bottom:0}.m-masked[data-v-a37bb24c],.g-m-table-column-set-teleport[data-v-a37bb24c]{position:fixed;top:0;left:0;z-index:6;width:100%;height:100%}.u-group[data-v-88e3837e]{display:flex;align-items:center}.u-group .u-checkbox[data-v-88e3837e]{padding-right:4px;pointer-events:none;margin-right:0}.u-checkbox[data-v-ce4ca417]{height:var(--el-checkbox-height, 20px)}.g-select-table-box{width:100%}.u-img{width:80px}.m-select-table .el-table{--el-table-header-bg-color: var(--m-list-el-table-header-bg-color, #f5f5f5)}.m-select-table .el-select-dropdown__empty{padding:0}.m-select-table .el-select-dropdown__empty .btn-box{text-align:right;padding-bottom:6px}.m-select-table .m-table-select{padding:6px;overflow-y:auto}.m-select-table .m-page{padding:4px}.g-select-table-box[data-v-bb9b01dd]{position:relative;line-height:normal}.g-select-table-box .u-input-gp[data-v-bb9b01dd]{position:relative}.g-select-table-box .u-input-gp:hover .el-icon-circle-close[data-v-bb9b01dd]{display:block}.g-select-table-box .el-icon-circle-close[data-v-bb9b01dd]{display:none;position:absolute;top:50%;right:10px;font-size:14px;color:#c0c4cc;transform:translateY(-50%);cursor:pointer}.g-select-table-box .el-icon-circle-close[data-v-bb9b01dd]:hover{color:#a4a7ad}.g-select-table-box .s-table[data-v-bb9b01dd]{width:100%}.btn-box[data-v-bb9b01dd]{text-align:right;padding-bottom:6px}.m-page[data-v-bb9b01dd]{padding-top:4px}.g-select-table-box .u-input-gp .el-input{display:flex}.g-select-table-box .el-table{--el-table-header-bg-color: var(--m-list-el-table-header-bg-color, #f5f5f5)}
package/dist/packages/MTable/src/MTable.vue.d.ts CHANGED
@@ -11,12 +11,21 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
11
11
  filtersValue?: FilterValue | undefined;
12
12
  /** 表格配置 */
13
13
  tableConfig?: TableConfig | null | undefined;
14
+ /** 展开图标列(如使用这个属性则必须存在rowKey属性,并且expand列必须为第一列) (标记，约束条件后面解决) */
15
+ expandProp?: string | undefined;
16
+ /** 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 */
17
+ expandRowKeys?: any[] | undefined;
18
+ /** 行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 */
19
+ rowKey?: string | Function | undefined;
14
20
  }>, {
15
21
  size: string;
16
22
  sole: string;
17
23
  data: () => never[];
18
24
  filtersValue: () => {};
19
25
  tableConfig: null;
26
+ expandProp: string;
27
+ expandRowKeys: () => never[];
28
+ rowKey: string;
20
29
  }>, {
21
30
  clearSelection: () => any;
22
31
  getSelectionRows: () => any;
@@ -56,12 +65,21 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
56
65
  filtersValue?: FilterValue | undefined;
57
66
  /** 表格配置 */
58
67
  tableConfig?: TableConfig | null | undefined;
68
+ /** 展开图标列(如使用这个属性则必须存在rowKey属性,并且expand列必须为第一列) (标记，约束条件后面解决) */
69
+ expandProp?: string | undefined;
70
+ /** 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 */
71
+ expandRowKeys?: any[] | undefined;
72
+ /** 行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 */
73
+ rowKey?: string | Function | undefined;
59
74
  }>, {
60
75
  size: string;
61
76
  sole: string;
62
77
  data: () => never[];
63
78
  filtersValue: () => {};
64
79
  tableConfig: null;
80
+ expandProp: string;
81
+ expandRowKeys: () => never[];
82
+ rowKey: string;
65
83
  }>>> & {
66
84
  onPasteData?: ((data: {
67
85
  /** 粘贴行的行数据 */
@@ -86,6 +104,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
86
104
  tableConfig: TableConfig | null;
87
105
  filtersValue: FilterValue;
88
106
  sole: string;
107
+ expandProp: string;
108
+ expandRowKeys: any[];
109
+ rowKey: string | Function;
89
110
  }, {}>, {
90
111
  default?(_: {}): any;
91
112
  append?(_: {}): any;
package/dist/packages/MTable/src/token.d.ts CHANGED
@@ -1,8 +1,17 @@
1
- import { InjectionKey, Ref } from 'vue';
1
+ import { InjectionKey } from 'vue';
2
+ import type { Ref } from 'vue';
2
3
  import { TableConfig } from '../../Hook/useTableConfig/useTableConfig';
3
4
  export declare const tableKey: InjectionKey<{
4
5
  /** 表格列配置 */
5
6
  tableConfig: Ref<TableConfig>;
6
7
  /** 最后一列 */
7
8
  lastColumnProp: Ref<string>;
9
+ /** 展开图标列 */
10
+ expandProp: string;
11
+ /** 表格数据 */
12
+ tableData: any[];
13
+ /** 展开列 */
14
+ expandRowKeys: Ref<any[]>;
15
+ /** 行数据的 Key */
16
+ rowKey: Function | string;
8
17
  }>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "br-dionysus",
3
- "version": "1.6.6",
3
+ "version": "1.6.8",
4
4
  "scripts": {
5
5
  "dev": "vite --config ./build/base.config.ts",
6
6
  "build:doc": "vue-tsc --noEmit && vite build --config ./build/doc.config.ts && node script/copyDir.js",
package/packages/MInline/src/MInline.vue CHANGED
@@ -49,6 +49,7 @@
49
49
  <script setup lang="ts">
50
50
  import { ref, onMounted, useSlots, watch, computed } from 'vue'
51
51
  import { Size } from 'packages/typings/enum'
52
+ import createHash from '../../../tool/createHash'
52
53
 
53
54
  const props = withDefaults(defineProps<{
54
55
  /**
@@ -74,13 +75,13 @@ const height = computed(() => {
74
75
  return 34
75
76
  })
76
77
 
77
- const createHash = (hashLength: number = 24) => {
78
- return Array.from(Array(Number(hashLength) || 24), () => Math.floor(Math.random() * 36).toString(36)).join('')
79
- }
78
+ const boxClassName = 'j-' + createHash(8)
80
79
 
81
80
  const init = () => {
82
- document.documentElement.style.setProperty('--m-inline-min-width', props.minWidth + 'px')
83
- document.documentElement.style.setProperty('--m-inline-max-width', props.maxWidth + 'px')
81
+ const boxEl: HTMLElement | null = document.querySelector('.' + boxClassName + ' [data-box]')
82
+ if (!boxEl) return false
83
+ boxEl.style.setProperty('--m-inline-min-width', props.minWidth + 'px')
84
+ boxEl.style.setProperty('--m-inline-max-width', props.maxWidth + 'px')
84
85
  }
85
86
  watch(
86
87
  () => [props.minWidth, props.maxWidth],
@@ -88,7 +89,9 @@ watch(
88
89
  init()
89
90
  }
90
91
  )
91
- init()
92
+ onMounted(() => {
93
+ init()
94
+ })
92
95
 
93
96
  const slots = useSlots()
94
97
 
@@ -97,13 +100,11 @@ const emit = defineEmits<{
97
100
  switch: [status: boolean]
98
101
  }>()
99
102
 
100
- const boxClassName = 'j-' + createHash(8)
101
-
102
103
  // 检查多行
103
104
  const checkMultiLine = () => {
104
- const boxEl: Element | null = document.querySelector('.' + boxClassName + ' [data-box]')
105
+ const boxEl: HTMLElement | null = document.querySelector('.' + boxClassName + ' [data-box]')
105
106
  if (!boxEl) return false
106
- const itemEls: NodeListOf<Element> = boxEl.querySelectorAll('.' + boxClassName + ' [data-item]')
107
+ const itemEls: NodeListOf<HTMLElement> = boxEl.querySelectorAll('.' + boxClassName + ' [data-item]')
107
108
  return boxEl.clientWidth < itemEls.length * props.minWidth
108
109
  }
109
110
 
package/packages/MTable/docs/README.md CHANGED
@@ -11,30 +11,35 @@ import demo from './demo.vue'
11
11
  <demo />
12
12
  </Preview>
13
13
 
14
-
15
14
  ### 2) Attributes
16
- | 参数 | 说明 | 类型 | 可选值 | 默认值 |
17
- | ----------- | ------- | ---------------------------- |-----|--------|
18
- |data |表格的数据 | Array | - | [ ] |
19
- |sole |行的唯一值 |String , number | - | key |
20
- |filtersValue |表格内容筛选 |Function | - | () => void |
21
- |其余参数 |参考el官网的table |any | - |https://element-plus.org/zh-CN/component/table.html|
15
+
16
+ | 参数 | 说明 | 类型 | 可选值 | 默认值 |
17
+ |--------------|---------------------------------------------|-----------------|-----|-----------------------------------------------------|
18
+ | data | 表格的数据 | Array | - | [ ] |
19
+ | sole | 行的唯一值 | String , number | - | key |
20
+ | filtersValue | 表格内容筛选 | Function | - | () => void |
21
+ | expandProp | 展开图标列(如使用这个属性则必须存在rowKey属性,并且expand列必须为第一列) | string | - | '' |
22
+ | 其余参数 | 参考el官网的table | any | - | https://element-plus.org/zh-CN/component/table.html |
23
+
22
24
  ## 要求
25
+
23
26
  ```
24
27
  sole 必须传递在表格数据内为唯一的值 如id key 等不会发生重复的关键字
25
28
  ```
26
29
 
27
30
  ### 3) Events
28
- | 方法名 | 说明 | 回调参数 |
29
- | ----------- | ------- | ---------------------------- |
30
- | pasteData | 表格粘贴方法 | 共有2个参数,依次为粘贴动作的数据PasteAction ,表格原始数据tableData |
31
- |其余方法 |参考el官网的table |https://element-plus.org/zh-CN/component/table.html|
31
+
32
+ | 方法名 | 说明 | 回调参数 |
33
+ |-----------|--------------|-----------------------------------------------------|
34
+ | pasteData | 表格粘贴方法 | 共有2个参数,依次为粘贴动作的数据PasteAction ,表格原始数据tableData |
35
+ | 其余方法 | 参考el官网的table | https://element-plus.org/zh-CN/component/table.html |
32
36
 
33
37
  ### 4) PasteAction
34
- |参数 | 说明 | 类型 |
35
- |-----|-------|-------|
36
- |editRow|返回粘贴的对应行的原始数据|Object|
37
- |editColumn|返回粘贴时鼠标所在列的 表格prop值|String|
38
- |arr|返回粘贴时候处理之后的 数组信息|Array|
39
- |rowIndex|根据sole的值 去data内查找 当前操作的 粘贴行在data内的序号|number|
38
+
39
+ | 参数 | 说明 | 类型 |
40
+ |------------|----------------------------------------|--------|
41
+ | editRow | 返回粘贴的对应行的原始数据 | Object |
42
+ | editColumn | 返回粘贴时鼠标所在列的 表格prop值 | String |
43
+ | arr | 返回粘贴时候处理之后的 数组信息 | Array |
44
+ | rowIndex | 根据sole的值 去data内查找 当前操作的 粘贴行在data内的序号 | number |
40
45
 
package/packages/MTable/docs/demo.vue CHANGED
@@ -9,7 +9,14 @@
9
9
  :filtersValue="filtersValue"
10
10
  scrollbarAlwaysOn
11
11
  v-model:tableConfig="tableConfig"
12
+ expandProp="name"
13
+ rowKey="id"
12
14
  >
15
+ <MTableColumn type="expand">
16
+ <template #default>
17
+ <h1>测试</h1>
18
+ </template>
19
+ </MTableColumn>
13
20
  <MTableColumn
14
21
  v-for="item in tableTitle"
15
22
  :key="item.prop"
@@ -23,7 +30,9 @@
23
30
  :fixed="item.fixed"
24
31
  v-model:filtersValue="filtersValue"
25
32
  showOverflowTooltip
26
- />
33
+ >
34
+ </MTableColumn>
35
+ <!--<template #default="scope">{{ scope.row[item.prop] }}</template>-->
27
36
  </MTable>
28
37
  </div>
29
38
  </template>
@@ -33,6 +42,7 @@ import { ref } from 'vue'
33
42
  import { useTableConfig } from 'packages/index'
34
43
 
35
44
  interface User {
45
+ id: number;
36
46
  date: string;
37
47
  name: string;
38
48
  address: string;
@@ -56,24 +66,28 @@ const { tableTitle, headerDragend, tableConfig, filtersValue }= useTableConfig('
56
66
 
57
67
  tableData.value = [
58
68
  {
69
+ id: 1,
59
70
  date: '2016-05-03',
60
71
  name: 'Tom',
61
72
  address: 'No. 189, Grove St, Los Angeles',
62
73
  tag: 'Home'
63
74
  },
64
75
  {
76
+ id: 2,
65
77
  date: '2016-05-02',
66
78
  name: 'Tom',
67
79
  address: 'No. 189, Grove St, Los Angeles',
68
80
  tag: 'Office'
69
81
  },
70
82
  {
83
+ id: 3,
71
84
  date: '2016-05-04',
72
85
  name: 'Tom',
73
86
  address: 'No. 189, Grove St, Los Angeles',
74
87
  tag: 'Home'
75
88
  },
76
89
  {
90
+ id: 4,
77
91
  date: '2016-05-01',
78
92
  name: 'Tom',
79
93
  address: 'No. 189, Grove St, Los Angeles',
package/packages/MTable/src/MTable.vue CHANGED
@@ -1,12 +1,18 @@
1
1
  <template>
2
- <div class="m-table-box">
2
+ <div
3
+ class="m-br-table-box"
4
+ :data-is-expand="Boolean(props.expandProp)"
5
+ >
3
6
  <el-table
4
7
  ref="tableRef"
5
8
  v-bind="$attrs"
6
9
  :size="props.size"
10
+ :data="tableData"
11
+ :expandRowKeys="expandRowKeys"
12
+ :rowKey="props.rowKey"
7
13
  @paste="paste"
8
14
  @cellClick="cellClick"
9
- :data="tableData"
15
+ @expandChange="expandChange"
10
16
  >
11
17
  <!-- 默认插槽 -->
12
18
  <!--<slot></slot>-->
@@ -39,9 +45,11 @@ import { ref, onMounted, computed, useSlots, watch, provide } from 'vue'
39
45
  import checkType from '../../../tool/checkType'
40
46
  import { TableConfig } from './../../Hook/useTableConfig/useTableConfig'
41
47
  import { tableKey } from './token'
48
+
42
49
  interface FilterValue {
43
50
  [key: string]: Array<string | number>
44
51
  }
52
+
45
53
  const props = withDefaults(defineProps<{
46
54
  size?: 'small' | 'large' | '',
47
55
  sole?: string,
@@ -50,15 +58,41 @@ const props = withDefaults(defineProps<{
50
58
  }>,
51
59
  filtersValue?: FilterValue,
52
60
  /** 表格配置 */
53
- tableConfig?: TableConfig | null
61
+ tableConfig?: TableConfig | null,
62
+ /** 展开图标列(如使用这个属性则必须存在rowKey属性,并且expand列必须为第一列) (标记，约束条件后面解决) */
63
+ expandProp?: string,
64
+ /** 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 */
65
+ expandRowKeys?: any[],
66
+ /** 行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 */
67
+ rowKey?: Function | string
54
68
  }>(), {
55
69
  size: '',
56
70
  sole: 'key',
57
71
  data: () => [],
58
72
  filtersValue: () => ({}),
59
- tableConfig: null
73
+ tableConfig: null,
74
+ expandProp: '',
75
+ expandRowKeys: () => [],
76
+ rowKey: ''
60
77
  })
61
78
 
79
+ const expandRowKeys = ref<any[]>(props.expandRowKeys)
80
+ watch(
81
+ () => props.expandRowKeys,
82
+ () => {
83
+ expandRowKeys.value = props.expandRowKeys
84
+ }
85
+ )
86
+ const expandChange = (row: any): void => {
87
+ if (!props.rowKey) return
88
+ const key = row[props.rowKey as string]
89
+ if (expandRowKeys.value.includes(key)) {
90
+ expandRowKeys.value = expandRowKeys.value.filter(item => item !== key)
91
+ } else {
92
+ expandRowKeys.value.push(key)
93
+ }
94
+ }
95
+
62
96
  const tableConfig = ref<TableConfig>(props.tableConfig || {})
63
97
  watch(
64
98
  () => props.tableConfig,
@@ -197,7 +231,11 @@ const lastColumnProp = computed(() => {
197
231
  })
198
232
  provide(tableKey, {
199
233
  tableConfig,
200
- lastColumnProp
234
+ lastColumnProp,
235
+ expandProp: props.expandProp,
236
+ tableData: props.data,
237
+ expandRowKeys,
238
+ rowKey: props.rowKey
201
239
  })
202
240
 
203
241
  defineExpose({
@@ -218,7 +256,7 @@ defineExpose({
218
256
  </script>
219
257
 
220
258
  <style scoped lang="scss">
221
- .m-table-box {
259
+ .m-br-table-box {
222
260
  position: relative;
223
261
  }
224
262
 
@@ -226,3 +264,13 @@ defineExpose({
226
264
  width: 15%
227
265
  }
228
266
  </style>
267
+
268
+ <style lang="scss">
269
+ .m-br-table-box {
270
+ &[data-is-expand='true'] {
271
+ .el-table__expand-column, colgroup > col:nth-of-type(1) {
272
+ display: none;
273
+ }
274
+ }
275
+ }
276
+ </style>
package/packages/MTable/src/token.ts CHANGED
@@ -1,9 +1,18 @@
1
- import { InjectionKey, Ref } from 'vue'
1
+ import { InjectionKey } from 'vue'
2
+ import type { Ref } from 'vue'
2
3
  import { TableConfig } from 'packages/Hook/useTableConfig/useTableConfig'
3
4
 
4
5
  export const tableKey: InjectionKey<{
5
6
  /** 表格列配置 */
6
7
  tableConfig: Ref<TableConfig>,
7
8
  /** 最后一列 */
8
- lastColumnProp: Ref<string>
9
+ lastColumnProp: Ref<string>,
10
+ /** 展开图标列 */
11
+ expandProp: string,
12
+ /** 表格数据 */
13
+ tableData: any[],
14
+ /** 展开列 */
15
+ expandRowKeys: Ref<any[]>,
16
+ /** 行数据的 Key */
17
+ rowKey: Function | string
9
18
  }> = Symbol('tableKey')
package/packages/MTableColumn/docs/README.md CHANGED
@@ -11,12 +11,12 @@ import demo from './demo.vue'
11
11
  <demo />
12
12
  </Preview>
13
13
 
14
-
15
14
  ### 2) Attributes
16
- | 参数 | 说明 | 类型 | 可选值 | 默认值 |
17
- | ------------ | ----------------------------------- | ------------------ | ------ | --------------------------------------------------- |
18
- | filtersValue | 列筛选过滤条件 | object | - | { } |
19
- | filters | 表格筛选数据 | string[],number[] | - | any[] |
20
- | filterMethod | 筛选方法 | Function | - | () => void |
21
- | children | 多级表头 时使用传递对应数据进行循环 | Table-column API[] | - | [] |
22
- | 其余参数 | 参考el官网的table | any | - | https://element-plus.org/zh-CN/component/table.html |
15
+
16
+ | 参数 | 说明 | 类型 | 可选值 | 默认值 |
17
+ |--------------|--------------------|--------------------|-----|-----------------------------------------------------|
18
+ | filtersValue | 列筛选过滤条件 | object | - | { } |
19
+ | filters | 表格筛选数据 | string[],number[] | - | any[] |
20
+ | filterMethod | 筛选方法 | Function | - | () => void |
21
+ | children | 多级表头 时使用传递对应数据进行循环 | Table-column API[] | - | [] |
22
+ | 其余参数 | 参考el官网的table | any | - | https://element-plus.org/zh-CN/component/table.html |
package/packages/MTableColumn/src/MTableColumn.vue CHANGED
@@ -7,12 +7,38 @@
7
7
  #default="scope"
8
8
  v-if="slots.default"
9
9
  >
10
- <slot
11
- name="default"
12
- :row="scope.row"
13
- :column="scope.column"
14
- :index="scope.$index"
15
- ></slot>
10
+ <div class="u-my-table-column-gp">
11
+ <el-icon
12
+ class="u-my-table-column-icon"
13
+ v-if="isExpandTarget"
14
+ :data-active="getExpandActive(scope.$index)"
15
+ @click="expandRow(scope.$index)"
16
+ >
17
+ <ArrowRight />
18
+ </el-icon>
19
+ <slot
20
+ name="default"
21
+ :row="scope.row"
22
+ :column="scope.column"
23
+ :index="scope.$index"
24
+ ></slot>
25
+ </div>
26
+ </template>
27
+ <template
28
+ #default="scope"
29
+ v-if="!slots.default"
30
+ >
31
+ <div class="u-my-table-column-gp">
32
+ <el-icon
33
+ class="u-my-table-column-icon"
34
+ v-if="isExpandTarget"
35
+ :data-active="getExpandActive(scope.$index)"
36
+ @click="expandRow(scope.$index)"
37
+ >
38
+ <ArrowRight />
39
+ </el-icon>
40
+ <span>{{ columnData[scope.$index] }}</span>
41
+ </div>
16
42
  </template>
17
43
  <template v-if="props.children && props.children.length">
18
44
  <m-table-column
@@ -154,12 +180,36 @@ const emit = defineEmits(['update:filtersValue'])
154
180
 
155
181
  const tableKeyData = inject(tableKey)
156
182
  const tableConfig = tableKeyData?.tableConfig
183
+ const expandProp = tableKeyData?.expandProp || ''
184
+ /** 是否为当初目标 */
185
+ const isExpandTarget = expandProp === attrs.prop
186
+ const tableData = tableKeyData?.tableData || []
187
+ const columnData = tableData.map(item => item[attrs.prop as string])
157
188
  const showTableConfig = computed(() => {
158
189
  if (!tableKeyData || !tableConfig) return false
159
190
  if (!tableConfig.value) return false
160
191
  return tableKeyData.lastColumnProp.value === attrs.prop
161
192
  })
162
193
 
194
+ const expandRow = (index: number): void => {
195
+ const expandRowKeys = tableKeyData?.expandRowKeys || ref<any[]>([])
196
+ const rowKey = tableKeyData?.rowKey
197
+ const thisRowKeyData = tableData.map(item => item[rowKey as string])
198
+ const key = thisRowKeyData[index]
199
+ if (expandRowKeys.value.includes(key)) {
200
+ expandRowKeys.value = expandRowKeys.value.filter(item => item !== key)
201
+ } else {
202
+ expandRowKeys.value.push(key)
203
+ }
204
+ }
205
+ const getExpandActive = (index: number): boolean => {
206
+ const expandRowKeys = tableKeyData?.expandRowKeys || ref<any[]>([])
207
+ const rowKey = tableKeyData?.rowKey
208
+ const thisRowKeyData = tableData.map(item => item[rowKey as string])
209
+ const key = thisRowKeyData[index]
210
+ return expandRowKeys.value.includes(key)
211
+ }
212
+
163
213
  const filterText = ref<string>('')
164
214
 
165
215
  const getCheckboxOptions = (options: { text: string | number, value: string | number }[]) => {
@@ -259,6 +309,22 @@ const boxStyle = ref<BoxStyle>({
259
309
  padding: 2.5px 0;
260
310
  float: right;
261
311
  }
312
+
313
+ .u-my-table-column-gp {
314
+ display: inline;
315
+ }
316
+
317
+ .u-my-table-column-icon {
318
+ float: left;
319
+ padding: 4px;
320
+ cursor: pointer;
321
+ transition: .3s;
322
+ font-size: 12px;
323
+
324
+ &[data-active="true"] {
325
+ transform: rotate(90deg);
326
+ }
327
+ }
262
328
  </style>
263
329
 
264
330
  <style lang="scss">
package/tags.json CHANGED
@@ -1 +1 @@
1
- {"demo":{"attributes":[],"description":"这是一个demo"},"m-dialog":{"attributes":["modelValue","width","resize","draggable","resized"],"description":"这是一个MDialog"},"m-inline":{"attributes":["minWidth","maxWidth","size","switch"],"description":"这是一个MInline"},"m-input-number":{"attributes":["modelValue","placeholder","disabled","size","min","max","step","stepStrictly","thousandthPlace","noBorder","noSpacing","update:modelValue","change","focus","blur"],"description":"这是一个MInputNumber"},"m-option":{"attributes":[],"description":"这是一个MOption"},"m-select":{"attributes":["checkboxMode","multiple"],"description":"这是一个MSelect"},"m-select-table":{"attributes":["modelValue","name","placeholder","disabled","size","total","filterMethod","filterable","remote","remoteMethod","options","tableTitle","multiple","keywords","reserveSelection","tableHeight","isAffirmBtn","scrollbarAlwaysOn","allowCreate","border","popupWidth","selected","selectMultiple","toPage","update:modelValue","clear","removeTag"],"description":"这是一个MSelectTable"},"m-select-table-v1":{"attributes":["modelValue","placeholder","disabled","options","tableTitle","remoteMethod","allowCreate","focusShow","isSelect","clearable","size","labelKey","scrollbarAlwaysOn","total","update:modelValue","selectMultiple","change","selected","clear"],"description":"这是一个MSelectTableV1"},"m-select-v2":{"attributes":["checkboxMode","multiple","showAll","options","update:modelValue"],"description":"这是一个MSelectV2"},"m-table":{"attributes":["size","sole","data","filtersValue","tableConfig","pasteData","update:tableConfig"],"description":"这是一个MTable"},"m-table-column":{"attributes":["filtersValue","filters","filterMethod","children","update:filtersValue"],"description":"这是一个MTableColumn"},"m-table-column-set":{"attributes":["modelValue","foldMode","link","update:modelValue","change"],"description":"这是一个MTableColumnSet"},"skin-config":{"attributes":["change"],"description":"这是一个SkinConfig"},"tab-page":{"attributes":["modelValue","activeKey","showRightClickMenu","primaryColor","primaryBackgroundColor","close","click"],"description":"这是一个TabPage"}}
1
+ {"demo":{"attributes":[],"description":"这是一个demo"},"m-dialog":{"attributes":["modelValue","width","resize","draggable","resized"],"description":"这是一个MDialog"},"m-inline":{"attributes":["minWidth","maxWidth","size","switch"],"description":"这是一个MInline"},"m-input-number":{"attributes":["modelValue","placeholder","disabled","size","min","max","step","stepStrictly","thousandthPlace","noBorder","noSpacing","update:modelValue","change","focus","blur"],"description":"这是一个MInputNumber"},"m-option":{"attributes":[],"description":"这是一个MOption"},"m-select":{"attributes":["checkboxMode","multiple"],"description":"这是一个MSelect"},"m-select-table":{"attributes":["modelValue","name","placeholder","disabled","size","total","filterMethod","filterable","remote","remoteMethod","options","tableTitle","multiple","keywords","reserveSelection","tableHeight","isAffirmBtn","scrollbarAlwaysOn","allowCreate","border","popupWidth","selected","selectMultiple","toPage","update:modelValue","clear","removeTag"],"description":"这是一个MSelectTable"},"m-select-table-v1":{"attributes":["modelValue","placeholder","disabled","options","tableTitle","remoteMethod","allowCreate","focusShow","isSelect","clearable","size","labelKey","scrollbarAlwaysOn","total","update:modelValue","selectMultiple","change","selected","clear"],"description":"这是一个MSelectTableV1"},"m-select-v2":{"attributes":["checkboxMode","multiple","showAll","options","update:modelValue"],"description":"这是一个MSelectV2"},"m-table":{"attributes":["size","sole","data","filtersValue","tableConfig","expandProp","expandRowKeys","rowKey","pasteData","update:tableConfig"],"description":"这是一个MTable"},"m-table-column":{"attributes":["filtersValue","filters","filterMethod","children","update:filtersValue"],"description":"这是一个MTableColumn"},"m-table-column-set":{"attributes":["modelValue","foldMode","link","update:modelValue","change"],"description":"这是一个MTableColumnSet"},"skin-config":{"attributes":["change"],"description":"这是一个SkinConfig"},"tab-page":{"attributes":["modelValue","activeKey","showRightClickMenu","primaryColor","primaryBackgroundColor","close","click"],"description":"这是一个TabPage"}}