feat:Rebuild the Table component with Vue

packages/index.ts

@@ -71,7 +71,7 @@ createApp({
 <CTable :data="tableData" />
 <br />
 <!-- 启用斑马纹效果的Table -->
-<CTable :data="tableData" :stripe="true" class="table-example" />
+<CTable :data="tableData" :stripe="true" />
 <br />
 
 <!-- 带边框的Table -->
@@ -80,10 +80,12 @@ createApp({
 
 <!-- 设置高度和最大高度，展示滚动效果的Table -->
 <CTable :data="tableData" :height="200" :maxHeight="500" />
+<br />
+<CTable :data="tableData" :stripe="true" :border="true" :itemsPerPage="2" />
   `,
   setup() {
     const activeTab = ref('tab1'); // 创建一个响应式的属性来存储当前激活的标签
-    const tableData =  [
+    const tableData =  ref([
       { id: 1, name: 'Item 1', price: '$100' },
       { id: 2, name: 'Item 2', price: '$200' },
       // 假设更多数据，足够显示滚动效果
@@ -96,7 +98,7 @@ createApp({
       { id: 9, name: 'Item 9', price: '$900' },
       { id: 10, name: 'Item 10', price: '$1000' },
       // ...更多数据
-    ]
+    ])
     // 这里可以添加其他响应式属性或方法
 
     return {

packages/table/index.ts

@@ -1,3 +1,3 @@
-import Table from './table'
+import Table from './table.vue'
 
 export default Table

packages/table/table.vue

@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import { computed, defineOptions, defineProps } from 'vue'
+
+defineOptions({
+  name: 'CTable'
+})
+
+interface tableProps {
+  data: any[]
+  stripe?: boolean
+  border?: boolean
+  height?: number
+  maxHeight?: number
+}
+
+const props = defineProps<tableProps>()
+// 表头标题
+const tableTitle = computed(() => {
+  const arr = props.data.map((item) => Object.keys(item))
+  let newArr: string[] = []
+  arr.forEach((item) => {
+    newArr = item.length >= newArr.length ? item : []
+  })
+
+  return newArr
+})
+
+const style = computed(() => {
+  return {
+    height: props.height + 'px',
+    maxHeight: props.maxHeight + 'px'
+  }
+})
+</script>
+
+<template>
+  <div class="r-table" :class="{ border: border }" :style="style">
+    <table>
+      <thead>
+        <tr>
+          <th v-for="(item, index) in tableTitle" :key="index">{{ item }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in data" :key="index"
+          :style="[{ backgroundColor: stripe && index % 2 === 0 ? '#fafafa' : '#fff' }]">
+          <td v-for="(key, index) in tableTitle" :key="index">{{ item[key] }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style>
+.r-table {
+  width: 100%;
+  overflow: auto;
+  border-style: none;
+}
+
+.r-table table {
+  width: 100%;
+  border-radius: 2px;
+  box-sizing: border-box;
+  border-spacing: 0;
+  background-color: #fff;
+}
+
+.r-table table thead {
+  display: table-header-group;
+  vertical-align: middle;
+  border-color: inherit;
+}
+
+.r-table table tr {
+  display: table-row;
+  vertical-align: inherit;
+  border-color: inherit;
+}
+
+.r-table table tr:hover {
+  background-color: #f5f7fa !important;
+}
+
+.r-table table tr th,
+.r-table table tr td {
+  padding: 8px 12px;
+  box-sizing: border-box;
+  text-align: left;
+  line-height: 20px;
+  color: #646468;
+  font-size: 14px;
+  border-bottom: 1px solid #f0f0f0;
+  border-right: 0;
+}
+
+.r-table::-webkit-scrollbar {
+  visibility: hidden;
+  width: 5px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.r-table:hover::-webkit-scrollbar {
+  height: 5px;
+}
+
+.r-table:hover::-webkit-scrollbar-thumb {
+  background-color: #dddee0;
+  -webkit-border-radius: 5px;
+}
+
+.r-table:hover::-webkit-scrollbar-track {
+  background-color: #fff;
+}
+
+.border thead td,
+.border thead th {
+  border-top: 1px solid #f0f0f0;
+}
+
+.border td,
+.border th {
+  border: 1px solid #f0f0f0;
+  border-top: 0;
+}
+
+.border td:last-child,
+.border th:last-child {
+  border-right: 1px solid #f0f0f0;
+}
+</style>