br-dionysus 1.8.1 → 1.8.3

package/packages/MTableColumnSet/src/MTableColumnSet.vue

@@ -92,7 +92,6 @@
 import { ref, watch, computed } from 'vue'
 import type { Ref } from 'vue'
 import createHash from '../../Tool/createHash/createHash'
-// import useMTableColumnSet from 'packages/MTableColumnSet/src/useMTableColumnSet'
 import { useZIndex } from 'element-plus'
 import type { TableConfigItem } from 'packages/Hook/useTableConfig/useTableConfig'
 
@@ -108,7 +107,7 @@ const props = withDefaults(defineProps<{
   /** 是否为链接按钮 */
   link?: boolean,
   /** 表格配置key */
-  tableConfigKey?: ''
+  tableConfigKey?: string
 }>(), {
   modelValue: () => ({} as TableConfig),
   foldMode: false,

package/packages/MTableV2/docs/README.md

@@ -0,0 +1,54 @@
+<script setup>
+import demo from './demo.vue'
+</script>
+
+虚拟化表格
+=================
+
+### 1) 基础用法
+
+<Preview comp-name="MTableV2" demo-name="demo">
+  <demo />
+</Preview>
+
+### 2) Attributes
+
+| 参数                 | 说明                                                | 类型                         | 可选值                       | 默认值                                                                               |
+|--------------------|---------------------------------------------------|----------------------------|---------------------------|-----------------------------------------------------------------------------------|
+| size               | 尺寸                                                | string                     | small \| large \| default | default                                                                           |
+| data               | 要在表中渲染的数据数组                                       | any[]                      | -                         | []                                                                                |
+| columns            | 表格列配置                                             | TableV2Title[]             | -                         | []                                                                                |
+| filtersValue       | 表格内容筛选(当为null时，不显示筛选图标)                           | FilterValue \| null        | -                         | null                                                                              |
+| tableConfig        | 表格配置                                              | TableConfig \| null        | -                         | null                                                                              |
+| tableConfigKey     | 表格配置key                                           | string                     | -                         | ''                                                                                |
+| fixed              | 单元格宽度是自适应还是固定                                     | boolean                    | -                         | false                                                                             |
+| estimatedRowHeight | 渲染动态的单元格的预估高度                                     | number \| null             | -                         | null                                                                              |
+| headerHeight       | Header 的高度由height设置。 如果传入数组，它会使 header row 等于数组长度 | number \| number[] \| null | -                         | null                                                                              |
+| 其余参数               | 参考el官网的table                                      | any                        | -                         | https://element-plus.org/zh-CN/component/table-v2.html#tablev2-%E5%B1%9E%E6%80%A7 |
+
+### 3) Events
+
+| 方法名                | 说明           | 回调参数                                                                              |
+|--------------------|--------------|-----------------------------------------------------------------------------------|
+| update:tableConfig | 表格配置更新       | \[tableConfig: TableConfig]                                                       |
+| 其余方法               | 参考el官网的table | https://element-plus.org/zh-CN/component/table-v2.html#tablev2-%E4%BA%8B%E4%BB%B6 |
+
+### 4) TableV2Title
+
+| 参数                 | 说明                                                                                 | 类型                            | 
+|--------------------|------------------------------------------------------------------------------------|-------------------------------|
+| title              | 显示的标题                                                                              | string                        |
+| key                | 唯一标志                                                                               | string                        |
+| dataKey            | data 的唯一标志符                                                                        | string                        |
+| align              | 表格单元格内容对齐方式                                                                        | 'right' \| 'left' \| 'center' |
+| class              | 列的类名                                                                               | string                        |
+| fixed              | 列是否固定在左侧或者右侧。 true 表示固定在左侧                                                         | true \| 'left' \| 'right'     |
+| headerClass        | 自定义 header 头部类名                                                                    | string                        |
+| hidden             | 此列是否不可见                                                                            | boolean                       |
+| style              | 自定义列单元格的类名，将会与 gird 单元格合并                                                          | object                        |
+| minWidth           | 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | number \| string              |
+| maxWidth           | 对应列的列的最大宽度                                                                         | number \| string              |
+| width              | 对应列的宽度                                                                             | number \| string              |
+| cellRenderer       | 自定义单元格渲染器                                                                          | any                           |
+| headerCellRenderer | 自定义头部渲染器                                                                           | any                           |
+

package/packages/MTableV2/docs/demo.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="g-box">
+    <p @click="test">{{ tableConfig }}</p>
+    <MTableV2
+      :data="tableData"
+      :columns="tableTitle"
+      :height="500"
+      border
+      fixed
+      v-model:tableConfig="tableConfig"
+      tableConfigKey="MTableV2Demo"
+    ></MTableV2>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import useTableV2Config from 'packages/Hook/useTableV2Config/useTableV2Config'
+
+const tableData = ref<any[]>([])
+const { tableTitle, tableConfig, filtersValue } = useTableV2Config('MTableV2Demo', [{
+  title: '序号',
+  key: 'sn',
+  dataKey: 'sn',
+  width: 300
+}, {
+  title: '时间',
+  key: 'date',
+  dataKey: 'date',
+  width: 300
+}, {
+  title: '地址',
+  key: 'address',
+  dataKey: 'address',
+  width: 300
+}, {
+  title: '名称',
+  key: 'name',
+  dataKey: 'name',
+  width: 300
+}], tableData)
+
+const test = () => {
+  filtersValue.value = {}
+}
+tableData.value = [{
+  id: 1,
+  sn: 'sn',
+  date: 'date',
+  address: 'address',
+  name: 'name'
+}]
+</script>
+
+<style lang="scss" scoped>
+.g-box {
+  max-width: 1000px;
+}
+</style>

package/packages/MTableV2/index.ts

@@ -0,0 +1,10 @@
+import { App, Plugin } from 'vue'
+import MTableV2 from './src/MTableV2.vue'
+
+export const MTableV2Plugin: Plugin = {
+  install (app: App) {
+    app.component('MTableV2', MTableV2)
+  }
+}
+
+export { MTableV2 }

package/packages/MTableV2/src/MTableV2.vue

@@ -0,0 +1,196 @@
+<template>
+  <div
+    class="br-m-table-v2-box"
+    :data-border="props.border"
+    :data-size="props.size"
+  >
+    <MTableColumnSet
+      class="br-m-table-config-set"
+      v-if="tableConfig && props.tableConfigKey"
+      foldMode
+      v-model="tableConfig"
+      :tableConfigKey="props.tableConfigKey"
+    ></MTableColumnSet>
+    <el-auto-resizer>
+      <template #default="{ width }">
+        <el-table-v2
+          :columns="props.columns"
+          :data="props.data"
+          :width="width"
+          :height="props.height"
+          :fixed="props.fixed"
+          :estimatedRowHeight="estimatedRowHeight"
+          :headerHeight="headerHeight"
+          v-bind="$attrs"
+        ></el-table-v2>
+      </template>
+    </el-auto-resizer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { TableConfig } from './../../Hook/useTableConfig/useTableConfig'
+import MTableColumnSet from './../../MTableColumnSet/src/MTableColumnSet.vue'
+
+interface FilterValue {
+  [key: string]: Array<string | number>
+}
+
+const props = withDefaults(defineProps<{
+  size?: 'small' | 'large' | 'default',
+  data?: Array<{
+    [key: string]: any
+  }>,
+  /** 表格高度 */
+  height?: number,
+  /** 显示边框 */
+  border?: boolean,
+  /** 表格列配置 */
+  columns?: TableV2Title[],
+  /** 表格内容筛选(当为null时，不显示筛选图标) */
+  filtersValue?: FilterValue | null,
+  /** 表格配置 */
+  tableConfig?: TableConfig | null,
+  /** 表格配置key */
+  tableConfigKey?: string,
+  /** 单元格宽度是自适应还是固定 */
+  fixed?: boolean,
+  /** 渲染动态的单元格的预估高度 */
+  estimatedRowHeight?: number | null,
+  /** Header 的高度由height设置。 如果传入数组，它会使 header row 等于数组长度 */
+  headerHeight?: number | number[] | null
+}>(), {
+  size: 'default',
+  data: () => [],
+  height: 100,
+  columns: () => [],
+  border: false,
+  filtersValue: null,
+  tableConfig: null,
+  tableConfigKey: '',
+  fixed: false,
+  estimatedRowHeight: null,
+  headerHeight: null
+})
+
+const sizeToHeight: { [key: string]: number } = {
+  small: 30,
+  default: 50,
+  large: 65
+}
+const estimatedRowHeight = computed(() => props.estimatedRowHeight || sizeToHeight[props.size])
+
+const headerHeight = computed(() => props.headerHeight || sizeToHeight[props.size])
+
+const tableConfig = ref<TableConfig>(props.tableConfig || {})
+watch(
+  () => props.tableConfig,
+  () => {
+    if (JSON.stringify(tableConfig.value) === JSON.stringify(props.tableConfig)) return false
+    tableConfig.value = props.tableConfig || {}
+  }
+)
+watch(
+  () => tableConfig.value,
+  () => {
+    const configData: TableConfig = {}
+    for (const key in tableConfig.value) {
+      const item = tableConfig.value[key]
+      const align = item.headerAlign || item.align
+      configData[key] = {
+        ...item,
+        ...(align !== undefined ? { align } : {})
+      }
+    }
+    emit('update:tableConfig', configData)
+  }
+)
+
+const emit = defineEmits<{
+  pasteData: [
+    data: {
+      /** 粘贴行的行数据 */
+      editRow: { [key: string]: any },
+      /** 粘贴列的列名 */
+      editColumn: string,
+      /** 粘贴的数据 */
+      arr: Array<string | number>,
+      /** 起始行 */
+      rowIndex: number,
+    },
+    /** 粘贴完成后的表格数据 */
+    tableData: Array<{ [key: string]: any }>
+  ],
+  /** 表格配置更新 */
+  'update:tableConfig': [tableConfig: TableConfig]
+}>()
+
+const tableRef = ref<any>(null)
+
+defineExpose({
+  scrollTo: (param: { scrollLeft?: number, scrollTop?: number }) => tableRef.value?.scrollTo(param),
+  scrollToLeft: (scrollLeft: number) => tableRef.value?.scrollToLeft(scrollLeft),
+  scrollToTop: (scrollTop: number) => tableRef.value?.scrollToTop(scrollTop),
+  scrollToRow: (row: number, strategy?: 'center' | 'end' | 'start' | 'smart') => tableRef.value?.scrollToRow(row, strategy)
+})
+</script>
+
+<style scoped lang="scss">
+.br-m-table-v2-box {
+  position: relative;
+
+  .br-m-table-config-set {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 4;
+  }
+
+  &[data-size="small"] .br-m-table-config-set {
+    top: (30px - 24px) / 2;
+  }
+
+  &[data-size="default"] .br-m-table-config-set {
+    top: (50px - 24px) / 2;
+  }
+
+  &[data-size="large"] .br-m-table-config-set {
+    top: (65px - 24px) / 2;
+  }
+}
+</style>
+
+<style lang="scss">
+.br-m-table-v2-box {
+  &[data-size="small"] .el-table-v2 {
+    font-size: 12px;
+  }
+
+  &[data-border="true"] {
+    .el-table-v2 {
+      border: 1px solid var(--el-table-border-color);
+
+      .el-table-v2__header-cell, .el-table-v2__row-cell {
+        border-right: var(--el-table-border);
+
+        &:nth-last-of-type(1) {
+          border-right: 0;
+        }
+      }
+    }
+  }
+
+  &[data-size="small"] .el-table-v2__cell-text {
+    line-height: 30px;
+  }
+
+  &[data-size="default"] .el-table-v2__cell-text {
+    line-height: 50px;
+  }
+
+  &[data-size="large"] .el-table-v2__cell-text {
+    line-height: 65px;
+  }
+}
+</style>

package/packages/index.ts

@@ -12,8 +12,10 @@ import { MSelectV2Plugin } from 'packages/MSelectV2'
 import { MSelectTablePlugin } from 'packages/MSelectTable'
 import { MDialogPlugin } from 'packages/MDialog'
 import { MSelectTableV1Plugin } from 'packages/MSelectTableV1'
+import { MTableV2Plugin } from 'packages/MTableV2'
 
 import useTableConfig from 'packages/Hook/useTableConfig/useTableConfig'
+import useTableV2Config from 'packages/Hook/useTableV2Config/useTableV2Config'
 import useRemainingSpace from 'packages/Hook/useRemainingSpace/useRemainingSpace'
 import useSkin from 'packages/SkinConfig/src/useSkin'
 import useGlobalZIndex from 'packages/Hook/useZIndex/useGlobalZIndex'
@@ -39,11 +41,10 @@ const BrPlugin: Plugin = {
     MSelectV2Plugin.install?.(app)
     MDialogPlugin.install?.(app)
     MSelectTableV1Plugin.install?.(app)
+    MTableV2Plugin.install?.(app)
   }
 }
 
-export default BrPlugin
-
 export * from './TabPage'
 export * from './MInputNumber'
 export * from './MInline'
@@ -56,8 +57,10 @@ export * from './MSelectTable'
 export * from './MSelectV2'
 export * from './MDialog'
 export * from './MSelectTableV1'
+export * from './MTableV2'
 
 export { useTableConfig }
+export { useTableV2Config }
 export { useRemainingSpace }
 export { useSkin }
 export { useGlobalZIndex }
@@ -67,3 +70,5 @@ export { useMTableColumnSet }
 export { moneyFormat }
 export { checkType }
 export { compareStructures }
+
+export default BrPlugin

package/packages/list.json

@@ -29,6 +29,12 @@
     "compDesc": "这是一个表格组件",
     "compClassName": "m-table"
   },
+  {
+    "compName": "MTableV2",
+    "compZhName": "虚拟化表格组件",
+    "compDesc": "这是一个虚拟化表格组件",
+    "compClassName": "m-table-v2"
+  },
   {
     "compName": "MTableColumn",
     "compZhName": "表格列组件",
@@ -77,6 +83,12 @@
     "compDesc": "这是一个表格组合 hook",
     "compClassName": "useTableConfig"
   },
+  {
+    "compName": "useTableV2Config",
+    "compZhName": "表格V2组合 hook",
+    "compDesc": "这是一个表格V2组合 hook",
+    "compClassName": "useTableV2Config"
+  },
   {
     "compName": "useRemainingSpace",
     "compZhName": "计算获取剩余空间 hook",

package/packages/typings/global.d.ts

@@ -42,11 +42,15 @@ interface TableTitle {
   /** 显示的标题 */
   label: string,
   /** 字段名称 对应列内容的字段名， 也可以使用 property属性 */
-  prop: string
+  prop: string,
+  /** 对应列的宽度 */
+  width?: number | string,
   /** 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 */
   minWidth?: number | string,
   /** 列的 className */
   className?: string,
+  /** 当前列标题的自定义类名 */
+  labelClassName?: string,
   /** 对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 */
   sortable?: boolean,
   /** 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 */
@@ -67,3 +71,38 @@ interface TableTitle {
   /** 列是否固定在左侧或者右侧。 true 表示固定在左侧 */
   fixed?: 'left' | 'right' | boolean,
 }
+
+/** 要求对象中几个属性必有其一 */
+type AtLeastOne<T, Keys extends keyof T> = Pick<T, Exclude<keyof T, Keys>> & { [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>> }[Keys]
+
+/** 表头(虚拟化表格) */
+interface TableV2Title {
+  /** 显示的标题 */
+  title: string,
+  /** 唯一标志 */
+  key: string,
+  /** data 的唯一标志符 */
+  dataKey: string,
+  /** 表格单元格内容对齐方式 */
+  align?: 'right' | 'left' | 'center',
+  /** 列的类名 */
+  class?: string,
+  /** 列是否固定在左侧或者右侧。 true 表示固定在左侧 */
+  fixed?: true | 'left' | 'right',
+  /** 自定义 header 头部类名 */
+  headerClass?: string,
+  /** 此列是否不可见 */
+  hidden?: boolean,
+  /** 自定义列单元格的类名，将会与 gird 单元格合并 */
+  style?: object,
+  /** 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 */
+  minWidth?: number | string,
+  /** 对应列的列的最大宽度 */
+  maxWidth?: number | string,
+  /** 对应列的宽度 */
+  width: number | string,
+  /** 自定义单元格渲染器 */
+  cellRenderer?: any,
+  /** 自定义头部渲染器 */
+  headerCellRenderer?: any,
+}

package/src/router.ts

@@ -30,6 +30,11 @@ const routes = [{
   name: 'MTable',
   path: '/components/MTable',
   component: () => import('packages/MTable/docs/README.md')
+}, {
+  title: '虚拟化表格组件',
+  name: 'MTableV2',
+  path: '/components/MTableV2',
+  component: () => import('packages/MTableV2/docs/README.md')
 }, {
   title: '表格列组件',
   name: 'MTableColumn',
@@ -66,10 +71,15 @@ const routes = [{
   path: '/components/usePackageConfig',
   component: () => import('packages/Hook/usePackageConfig/README.md')
 }, {
-  title: '表格pageSize',
+  title: '表格组合hook',
   name: 'useTableConfig',
   path: '/components/useTableConfig',
   component: () => import('packages/Hook/useTableConfig/README.md')
+}, {
+  title: '表格V2组合hook',
+  name: 'useTableV2Config',
+  path: '/components/useTableV2Config',
+  component: () => import('packages/Hook/useTableV2Config/README.md')
 }, {
   title: '计算获取剩余空间 hook',
   name: 'useRemainingSpace',

package/tags.json

@@ -1 +1 @@
-{"demo":{"attributes":[],"description":"这是一个demo"},"m-dialog":{"attributes":["modelValue","width","insideHeight","minInsideHeight","maxInsideHeight","resize","draggable","insideClassName","resized","update:insideHeight","update:modelValue"],"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":["modelValue","checkboxMode","multiple","showAll","options","update:modelValue"],"description":"这是一个MSelectV2"},"m-table":{"attributes":["size","sole","data","filtersValue","tableConfig","expandProp","expandRowKeys","rowKey","tableConfigKey","pasteData","update:tableConfig","privateExpandChange"],"description":"这是一个MTable"},"m-table-column":{"attributes":["filtersValue","filters","filterMethod","children","update:filtersValue"],"description":"这是一个MTableColumn"},"m-table-column-set":{"attributes":["modelValue","foldMode","link","tableConfigKey","update:modelValue","change"],"description":"这是一个MTableColumnSet"},"skin-config":{"attributes":["change"],"description":"这是一个SkinConfig"},"tab-page":{"attributes":["modelValue","activeKey","showRightClickMenu","primaryColor","primaryBackgroundColor","close","click"],"description":"这是一个TabPage"}}
+{"demo":{"attributes":[],"description":"这是一个demo"},"m-dialog":{"attributes":["modelValue","width","insideHeight","minInsideHeight","maxInsideHeight","resize","draggable","insideClassName","resized","update:insideHeight","update:modelValue"],"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":["modelValue","checkboxMode","multiple","showAll","options","update:modelValue"],"description":"这是一个MSelectV2"},"m-table":{"attributes":["size","sole","data","filtersValue","tableConfig","expandProp","expandRowKeys","rowKey","tableConfigKey","pasteData","update:tableConfig","privateExpandChange"],"description":"这是一个MTable"},"m-table-column":{"attributes":["filtersValue","filters","filterMethod","children","update:filtersValue"],"description":"这是一个MTableColumn"},"m-table-column-set":{"attributes":["modelValue","foldMode","link","tableConfigKey","update:modelValue","change"],"description":"这是一个MTableColumnSet"},"m-table-v2":{"attributes":["size","data","height","border","columns","filtersValue","tableConfig","tableConfigKey","fixed","estimatedRowHeight","headerHeight","pasteData","update:tableConfig"],"description":"这是一个MTableV2"},"skin-config":{"attributes":["change"],"description":"这是一个SkinConfig"},"tab-page":{"attributes":["modelValue","activeKey","showRightClickMenu","primaryColor","primaryBackgroundColor","close","click"],"description":"这是一个TabPage"}}