@idooel/components 0.0.2-beta.2 → 0.0.2-beta.21

package/packages/table/src/index.vue

@@ -1,310 +1,340 @@
-<template>
-  <div class="g-table__wrapper" :style="wrapperStyle" :class="{ 'g-table--no-scroll-y': !needScrollY }">
-    <a-table
-      :bordered="bordered"
-      :class="[isNoData && 'g-table__no-data']"
-      :pagination="false"
-      :loading="loading"
-      :columns="innerColumns"
-      :row-selection="rowSelection"
-      :row-class-name="setRowClassName"
-      :data-source="dataSource"
-      :scroll="getScroll">
-      <template slot="action" slot-scope="record">
-        <Actions v-on="$listeners" :data-source="actions" :record="record"></Actions>
-      </template>
-    </a-table>
-    <div class="g-table__pagination">
-      <a-pagination
-        :show-total="all => `共 ${all} 条数据`"
-        show-size-changer 
-        show-quick-jumper
-        :pageSize="innerPageSize"
-        :current="innerCurrentPage"
-        :pageSizeOptions="pageSizeOptions"
-        @change="onChangePagination"
-        @showSizeChange="onShowSizeChange"
-        :total="total">
-      </a-pagination>
-    </div>
-  </div>
-</template>
-
-<script>
-import Actions from './action.vue'
-export default {
-  name: 'ele-table',
-  components: {
-    Actions
-  },
-  props: {
-    // ant table wrapper
-    height: {
-      type: Number
-    },
-    width: {
-      type: Number
-    },
-    x: {
-      type: Number,
-      default: 1200
-    },
-    y: {
-      type: Number,
-      default: 200
-    },
-    scroll: {
-      type: Object
-    },
-    rowSelection: {
-      type: Object
-    },
-    actions: {
-      type: Array,
-      default: () => []
-    },
-    total: {
-      type: Number,
-      default: 0
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    dataSource: {
-      type: Array,
-      default: () => []
-    },
-    pageSize: {
-      type: Number,
-      default: 10
-    },
-    pageSizeOptions: {
-      type: Array,
-      default: () => ['10', '20', '30', '40']
-    },
-    bordered: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      tableHeaderHeight: 0,
-      paginationHeight: 0,
-      innerPageSize: 10,
-      innerCurrentPage: 1,
-      tableContentHeight: 0,
-      obs: []
-    }
-  },
-  computed: {
-    wrapperStyle () {
-      // 外层容器样式：确保分页始终可见，表格充满剩余空间
-      if (!this.height) return {}
-      return { height: `${this.height}px` }
-    },
-    needScrollY () {
-      // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估
-      if (!this.height) return false
-      
-      const availableHeight = this.getScrollHeightByHeight
-      if (availableHeight <= 0) return false
-      
-      // 预估每行高度（包含边框），antd 默认约 54px
-      const estimatedRowHeight = 54
-      const estimatedTableHeight = this.dataSource.length * estimatedRowHeight
-      
-      return estimatedTableHeight > availableHeight
-    },
-    innerColumns () {
-      return this.columns.filter(col => !Object.keys(col).includes('multiple'))
-    },
-    isNoData () {
-      return !this.dataSource.length
-    },
-    getScrollHeightByHeight () {
-      // 始终返回可用的剩余高度，让表格内容不足时也能占满容器
-      return this.height - this.tableHeaderHeight - this.paginationHeight
-    },
-    isFlexColumn () {
-      return this.columns.every(col => !col.width)
-    },
-    getScroll () {
-      if (this.scroll) {
-        return this.scroll
-      } else {
-        const baseX = this.isFlexColumn ? 0 : (this.width > this.x ? 0 : this.x)
-        if (this.height) {
-          // 计算表体可用高度
-          const availableHeight = this.tableHeaderHeight && this.paginationHeight 
-            ? this.getScrollHeightByHeight 
-            : this.height - 100 // 预估值，给表头和分页留空间
-          
-          if (availableHeight > 50) { // 确保有足够的最小高度
-            console.log('Table scroll config:', { x: baseX, y: availableHeight, height: this.height, headerHeight: this.tableHeaderHeight, paginationHeight: this.paginationHeight })
-            return { x: baseX, y: availableHeight }
-          }
-        }
-        return { x: baseX }
-      }
-    }
-  },
-  watch: {
-    pageSize: {
-      handler (pageSize) {
-        this.innerPageSize = pageSize
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    onShowSizeChange (current, pageSize) {
-      this.innerCurrentPage = current
-      this.innerPageSize = pageSize
-      this.$emit('change-page', current, pageSize)
-    },
-    setPaginationHeight () {
-      this.$nextTick(() => {
-        const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()
-        this.paginationHeight = height
-      })
-    },
-    setTableHeaderHeight () {
-      this.$nextTick(() => {
-        const el = document.querySelector('.ant-table-header')
-        if (!el) return
-        const { height } = el.getBoundingClientRect()
-        this.tableHeaderHeight = height
-      })
-    },
-    setTableTbodyHeight () {
-      // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听
-      this.$nextTick(() => {
-        this.setTableHeaderHeight()
-      })
-    },
-    setRowClassName (record, idx) {
-      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'
-    },
-    onChangePagination (page, pageSize) {
-      this.innerCurrentPage = page
-      this.innerPageSize = pageSize
-      this.$emit('change-page', page, pageSize)
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.setPaginationHeight()
-      setTimeout(() => {
-        this.setTableTbodyHeight()
-        // 再测一次分页高度，确保初次渲染完成后数值准确
-        this.setPaginationHeight()
-      }, 200)
-    })
-  },
-  destroyed () {
-    this.obs.forEach(ob => ob.disconnect())
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.g-table__wrapper {
-  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  /* 表格区域占满剩余空间，启用纵向滚动 */
-  ::v-deep .ant-table-wrapper {
-    flex: 1 1 auto;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  ::v-deep .ant-spin-nested-loading {
-    flex: 1 1 auto;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  ::v-deep .ant-spin-container {
-    flex: 1 1 auto;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  ::v-deep .ant-table {
-    flex: 1 1 auto;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  /* 确保表体能够正常纵向滚动 */
-  ::v-deep .ant-table-content {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: hidden;
-  }
-
-  ::v-deep .ant-table-scroll {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  ::v-deep .ant-table-header {
-    flex: 0 0 auto;
-    overflow: hidden;
-  }
-  ::v-deep .ant-table-fixed {
-    .ant-table-tbody {
-      .g-table__row--odd {
-        &.ant-table-row-hover {
-          .ant-table-selection-column {
-            background-color: var(--idooel-row-hover-color) !important;
-          }
-          .ant-table-row-cell-break-word {
-            background-color: var(--idooel-row-hover-color) !important;
-          }
-        }
-        .ant-table-selection-column {
-          background-color: var(--idooel-row-odd-color);
-        }
-        .ant-table-row-cell-break-word {
-          background-color: var(--idooel-row-odd-color);
-        }
-      }
-    }
-  }
-
-  ::v-deep .ant-table-body {
-    flex: 1 1 auto;
-    overflow: auto !important;
-    /* 确保滚动条稳定，避免列宽抖动 */
-    scrollbar-gutter: stable;
-  }
-
-  /* 分页区域固定在底部，不被挤出视口 */
-  .g-table__pagination {
-    flex: 0 0 auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: end;
-    border-top: unset;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    background: #fff;
-    z-index: 999;
-  }
-}
+<template>
+  <div class="g-table__wrapper" :style="wrapperStyle" :class="{ 'g-table--no-scroll-y': !needScrollY }">
+    <a-table
+      :bordered="bordered"
+      :class="[isNoData && 'g-table__no-data']"
+      :pagination="false"
+      :loading="loading"
+      size="middle"
+      :columns="innerColumns"
+      :row-selection="rowSelection"
+      :row-class-name="setRowClassName"
+      :data-source="dataSource"
+      :scroll="getScroll">
+      <template slot="action" slot-scope="record">
+        <Actions v-on="$listeners" :data-source="actions" :record="record"></Actions>
+      </template>
+    </a-table>
+    <div class="g-table__pagination">
+      <a-pagination
+        :show-total="all => `共 ${all} 条数据`"
+        show-size-changer 
+        show-quick-jumper
+        :pageSize="innerPageSize"
+        :current="innerCurrentPage"
+        :pageSizeOptions="pageSizeOptions"
+        @change="onChangePagination"
+        @showSizeChange="onShowSizeChange"
+        :total="total">
+      </a-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import Actions from './action.vue'
+export default {
+  name: 'ele-table',
+  components: {
+    Actions
+  },
+  props: {
+    // ant table wrapper
+    height: {
+      type: Number
+    },
+    width: {
+      type: Number
+    },
+    x: {
+      type: Number,
+      default: 1200
+    },
+    y: {
+      type: Number,
+      default: 200
+    },
+    scroll: {
+      type: Object
+    },
+    rowSelection: {
+      type: Object
+    },
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    pageSizeOptions: {
+      type: Array,
+      default: () => ['10', '20', '30', '40']
+    },
+    bordered: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      tableHeaderHeight: 0,
+      paginationHeight: 0,
+      innerPageSize: 10,
+      innerCurrentPage: 1,
+      tableContentHeight: 0,
+      obs: []
+    }
+  },
+  computed: {
+    wrapperStyle () {
+      // 外层容器样式：确保分页始终可见，表格充满剩余空间
+      if (!this.height) return {}
+      return { height: `${this.height}px` }
+    },
+    needScrollY () {
+      // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估
+      if (!this.height) return false
+      
+      const availableHeight = this.getScrollHeightByHeight
+      if (availableHeight <= 0) return false
+      
+      // 预估每行高度（包含边框），antd 默认约 54px
+      const estimatedRowHeight = 54
+      const estimatedTableHeight = this.dataSource.length * estimatedRowHeight
+      
+      return estimatedTableHeight > availableHeight
+    },
+    innerColumns () {
+      return this.columns.filter(col => !Object.keys(col).includes('multiple'))
+    },
+    isNoData () {
+      return !this.dataSource.length
+    },
+    getScrollHeightByHeight () {
+      // 始终返回可用的剩余高度，让表格内容不足时也能占满容器
+      return this.height - this.tableHeaderHeight - this.paginationHeight
+    },
+    isFlexColumn () {
+      return this.columns.every(col => !col.width)
+    },
+    getScroll () {
+      if (this.scroll) {
+        return this.scroll
+      } else {
+        const baseX = this.isFlexColumn ? 0 : (this.width > this.x ? 0 : this.x)
+        if (this.height) {
+          // 计算表体可用高度
+          const availableHeight = this.tableHeaderHeight && this.paginationHeight 
+            ? this.getScrollHeightByHeight 
+            : this.height - 100 // 预估值，给表头和分页留空间
+          
+          if (availableHeight > 50) { // 确保有足够的最小高度
+            console.log('Table scroll config:', { x: baseX, y: availableHeight, height: this.height, headerHeight: this.tableHeaderHeight, paginationHeight: this.paginationHeight })
+            return { x: baseX, y: availableHeight }
+          }
+        }
+        return { x: baseX }
+      }
+    }
+  },
+  watch: {
+    pageSize: {
+      handler (pageSize) {
+        this.innerPageSize = pageSize
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    onShowSizeChange (current, pageSize) {
+      this.innerCurrentPage = current
+      this.innerPageSize = pageSize
+      this.$emit('change-page', current, pageSize)
+    },
+    setPaginationHeight () {
+      this.$nextTick(() => {
+        const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()
+        this.paginationHeight = height
+      })
+    },
+    setTableHeaderHeight () {
+      this.$nextTick(() => {
+        const el = document.querySelector('.ant-table-header')
+        if (!el) return
+        const { height } = el.getBoundingClientRect()
+        this.tableHeaderHeight = height
+      })
+    },
+    setTableTbodyHeight () {
+      // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听
+      this.$nextTick(() => {
+        this.setTableHeaderHeight()
+      })
+    },
+    setRowClassName (record, idx) {
+      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'
+    },
+    onChangePagination (page, pageSize) {
+      this.innerCurrentPage = page
+      this.innerPageSize = pageSize
+      this.$emit('change-page', page, pageSize)
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.setPaginationHeight()
+      setTimeout(() => {
+        this.setTableTbodyHeight()
+        // 再测一次分页高度，确保初次渲染完成后数值准确
+        this.setPaginationHeight()
+      }, 200)
+    })
+  },
+  destroyed () {
+    this.obs.forEach(ob => ob.disconnect())
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.g-table__wrapper {
+  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  /* 表格区域占满剩余空间，启用纵向滚动 */
+  ::v-deep .ant-table-wrapper {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  ::v-deep .ant-spin-nested-loading {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  ::v-deep .ant-spin-container {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  ::v-deep .ant-table {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* 确保表体能够正常纵向滚动 */
+  ::v-deep .ant-table-content {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  ::v-deep .ant-table-scroll {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  ::v-deep .ant-table-header {
+    flex: 0 0 auto;
+    overflow: hidden;
+  }
+  ::v-deep .ant-table-fixed {
+    .ant-table-tbody {
+      .g-table__row--odd {
+        &.ant-table-row-hover {
+          td {
+            background-color: var(--idooel-row-hover-color);
+          }
+          .ant-table-selection-column {
+            background-color: var(--idooel-row-hover-color) !important;
+          }
+          .ant-table-row-cell-break-word {
+            background-color: var(--idooel-row-hover-color) !important;
+          }
+        }
+        td {
+          background-color: var(--idooel-row-odd-color);
+        }
+        .ant-table-selection-column {
+          background-color: var(--idooel-row-odd-color) !important;
+        }
+        .ant-table-row-cell-break-word {
+          background-color: var(--idooel-row-odd-color) !important;
+        }
+      }
+    }
+    .ant-table-thead {
+      background: rgba(0, 0, 0, 0.03) !important;
+    }
+  }
+
+  ::v-deep .ant-table-body {
+    flex: 1 1 auto;
+    overflow: auto !important;
+    /* 确保滚动条稳定，避免列宽抖动 */
+    scrollbar-gutter: stable;
+  }
+
+  /* 分页区域固定在底部，不被挤出视口 */
+  .g-table__pagination {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    border-top: unset;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    background: #fff;
+    z-index: 999;
+  }
+
+  /* 空数据状态顶部显示 */
+  .g-table__no-data {
+    position: relative;
+    ::v-deep .ant-table-placeholder {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -40%);
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      color: #999;
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 20px;
+      overflow: hidden;
+      border: unset;
+    }
+  }
+}
 </style>

package/packages/tabs/index.js

@@ -1,5 +1,5 @@
-import EleTabs from './src/index.vue'
-
-EleTabs.install = Vue => Vue.component(EleTabs.name, EleTabs)
-
+import EleTabs from './src/index.vue'
+
+EleTabs.install = Vue => Vue.component(EleTabs.name, EleTabs)
+
 export default EleTabs