feat: ✨ table组件添加index参数

RJQingHuan · Moonofweisheng · commit 2161705a2f86 · 2024-04-30T13:22:40.000+08:00
diff --git a/docs/component/table.md b/docs/component/table.md
@@ -51,6 +51,24 @@ const dataList = reactive([
 </wd-table>
 ```
 
+## 显示索引
+
+通过`index`设置表格是否显示序号列，默认为`false`。同时也可以传入对象对序号列进行配置，参数同`TableColumnProps`
+
+```html
+<wd-table :data="dataList" height="328px" :index="true">
+  <wd-table-col prop="name" label="姓名" :sortable="true"></wd-table-col>
+  <wd-table-col prop="grade" label="分数" :sortable="true"></wd-table-col>
+  <wd-table-col prop="hobby" label="一言以蔽之" :sortable="true" :width="160"></wd-table-col>
+</wd-table>
+
+<wd-table :data="dataList" height="328px" :index="{ align: 'center', width: 200 }">
+  <wd-table-col prop="name" label="姓名" :sortable="true" align="center"></wd-table-col>
+  <wd-table-col prop="grade" label="分数" :sortable="true" align="center"></wd-table-col>
+  <wd-table-col prop="hobby" label="一言以蔽之" :sortable="true" :width="160"></wd-table-col>
+</wd-table>
+```
+
 ## 斑马纹
 
 通过`stripe`设置表格是否展示斑马纹，默认`true`。
@@ -216,15 +234,16 @@ function handleSort(e) {
 
 ## Attributes
 
-| 参数       | 说明                       | 类型              | 可选值 | 默认值 | 最低版本 |
-| ---------- | -------------------------- | ----------------- | ------ | ------ | -------- |
-| data       | 显示的数据                 | Array             | -      | -      | 0.0.39   |
-| border     | 是否带有边框               | boolean           | -      | true   | 0.0.39   |
-| stripe     | 是否为斑马纹表             | boolean           | -      | true   | 0.0.39   |
-| height     | Table 的高度，默认为`80vh` | string            | -      | `80vh` | 0.0.39   |
-| rowHeight  | 行高                       | `number / string` | -      | 50     | 0.0.39   |
-| showHeader | 是否显示表头               | boolean           | -      | true   | 0.0.39   |
-| ellipsis   | 是否超出 2 行隐藏          | boolean           | -      | true   | 0.0.39   |
+| 参数       | 说明                                              | 类型                         | 可选值 | 默认值 | 最低版本         |
+| ---------- | ------------------------------------------------- | ---------------------------- | ------ | ------ | ---------------- |
+| data       | 显示的数据                                        | Array                        | -      | -      | 0.0.39           |
+| border     | 是否带有边框                                      | boolean                      | -      | true   | 0.0.39           |
+| stripe     | 是否为斑马纹表                                    | boolean                      | -      | true   | 0.0.39           |
+| height     | Table 的高度，默认为`80vh`                        | string                       | -      | `80vh` | 0.0.39           |
+| rowHeight  | 行高                                              | `number / string`            | -      | 50     | 0.0.39           |
+| showHeader | 是否显示表头                                      | boolean                      | -      | true   | 0.0.39           |
+| ellipsis   | 是否超出 2 行隐藏                                 | boolean                      | -      | true   | 0.0.39           |
+| index      | 是否显示索引列，可传入`boolean`也可传入column配置 | `boolean / TableColumnProps` |        | false  | $LOWEST_VERSION$ |
 
 ## TableColumn Attributes
 
diff --git a/src/pages/table/Index.vue b/src/pages/table/Index.vue
@@ -39,6 +39,17 @@
       </wd-table>
     </demo-block>
 
+    <demo-block title="显示索引">
+      <wd-table :data="dataList" height="328px" :index="{ align: 'center' }">
+        <wd-table-col prop="name" label="姓名" :sortable="true" align="center"></wd-table-col>
+        <wd-table-col prop="grade" label="分数" :sortable="true" align="center"></wd-table-col>
+        <wd-table-col prop="hobby" label="一言以蔽之" :sortable="true" :width="160"></wd-table-col>
+        <wd-table-col prop="school" label="求学之所" :width="180"></wd-table-col>
+        <wd-table-col prop="major" label="专业"></wd-table-col>
+        <wd-table-col prop="gender" label="性别"></wd-table-col>
+      </wd-table>
+    </demo-block>
+
     <demo-block title="自定义列模板">
       <wd-table :data="dataList" @sort-method="doSort" @row-click="handleRowClick" height="328px">
         <wd-table-col prop="name" label="姓名" fixed :sortable="true" align="center"></wd-table-col>
diff --git a/src/uni_modules/wot-design-uni/components/wd-table/types.ts b/src/uni_modules/wot-design-uni/components/wd-table/types.ts
@@ -9,6 +9,8 @@
  */
 import type { ExtractPropTypes } from 'vue'
 import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+import type { TableColumnProps } from '../wd-table-col/types'
+import type { PropType } from 'vue'
 
 export const tableProps = {
   ...baseProps,
@@ -39,7 +41,14 @@ export const tableProps = {
   /**
    * 是否超出2行隐藏
    */
-  ellipsis: makeBooleanProp(true)
+  ellipsis: makeBooleanProp(true),
+  /**
+   * 是否显示索引列
+   */
+  index: {
+    type: [Object, Boolean] as PropType<boolean | Omit<Partial<TableColumnProps>, 'prop'>>,
+    default: false
+  }
 }
 
 export type TableProps = ExtractPropTypes<typeof tableProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-table/wd-table.vue b/src/uni_modules/wot-design-uni/components/wd-table/wd-table.vue
@@ -40,6 +40,19 @@
       :scrollLeft="reactiveState.scrollLeft"
     >
       <view id="table-body" class="wd-table__content" :style="realWidthStyle">
+        <wd-table-col
+          v-if="index !== false"
+          :prop="indexColumn.prop"
+          :label="indexColumn.label"
+          :width="indexColumn.width"
+          :sortable="indexColumn.sortable"
+          :fixed="indexColumn.fixed"
+          :align="indexColumn.align"
+        >
+          <template #value="{ index }">
+            <text>{{ index + 1 }}</text>
+          </template>
+        </wd-table-col>
         <slot></slot>
       </view>
     </scroll-view>
@@ -58,10 +71,14 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { type CSSProperties, computed, provide, watch, reactive } from 'vue'
-import { addUnit, debounce, deepClone, isDef, objToStyle } from '../common/util'
-import type { SortDirection, TableColumn } from '../wd-table-col/types'
+import { type CSSProperties, computed, provide, watch, reactive, ref } from 'vue'
+import { addUnit, debounce, deepClone, isDef, isObj, objToStyle, uuid } from '../common/util'
+import type { SortDirection, TableColumn, TableColumnProps } from '../wd-table-col/types'
 import { tableProps } from './types'
+import WdTableCol from '../wd-table-col/wd-table-col.vue'
+import { useTranslate } from '../composables/useTranslate'
+
+const { translate } = useTranslate('tableCol')
 
 const props = defineProps(tableProps)
 const emit = defineEmits(['click', 'sort-method', 'row-click'])
@@ -79,6 +96,17 @@ const reactiveState = reactive({
   setColumns
 })
 
+const indexUUID = uuid()
+const indexColumn = ref<TableColumnProps>({
+  prop: indexUUID,
+  label: translate('indexLabel'),
+  width: '100rpx',
+  sortable: false,
+  fixed: false,
+  align: 'left',
+  ...(isObj(props.index) ? props.index : {})
+})
+
 const scroll = debounce(handleScroll, 100, { leading: false }) // 滚动事件
 
 provide('wdTable', reactiveState)
@@ -191,7 +219,11 @@ function isLastFixed(column: TableColumn) {
  * @param column 列
  */
 function setColumns(column: TableColumn) {
-  reactiveState.columns = deepClone([...reactiveState.columns, column])
+  if (column.prop === indexUUID) {
+    reactiveState.columns = deepClone([column, ...reactiveState.columns])
+  } else {
+    reactiveState.columns = deepClone([...reactiveState.columns, column])
+  }
 }
 
 /**
diff --git a/src/uni_modules/wot-design-uni/locale/lang/en-US.ts b/src/uni_modules/wot-design-uni/locale/lang/en-US.ts
@@ -120,5 +120,8 @@ export default {
   },
   textarea: {
     placeholder: 'Please input information...'
+  },
+  tableCol: {
+    indexLabel: 'index'
   }
 }
diff --git a/src/uni_modules/wot-design-uni/locale/lang/th-TH.ts b/src/uni_modules/wot-design-uni/locale/lang/th-TH.ts
@@ -120,5 +120,8 @@ export default {
   },
   textarea: {
     placeholder: 'กรุณาใส่ข้อมูล...'
+  },
+  tableCol: {
+    indexLabel: 'หมายเลขซีเรียล'
   }
 }
diff --git a/src/uni_modules/wot-design-uni/locale/lang/vi-VN.ts b/src/uni_modules/wot-design-uni/locale/lang/vi-VN.ts
@@ -61,5 +61,8 @@ export default {
   input: { placeholder: 'Vui lòng nhập...' },
   selectPicker: { title: 'Vui lòng chọn', placeholder: 'Vui lòng chọn', select: 'Xác nhận', confirm: 'Xác nhận', filterPlaceholder: 'Tìm kiếm' },
   tag: { placeholder: 'Vui lòng nhập', add: 'thêm' },
-  textarea: { placeholder: 'Vui lòng nhập...' }
+  textarea: { placeholder: 'Vui lòng nhập...' },
+  tableCol: {
+    indexLabel: 'Số sê-ri'
+  }
 }
diff --git a/src/uni_modules/wot-design-uni/locale/lang/zh-CN.ts b/src/uni_modules/wot-design-uni/locale/lang/zh-CN.ts
@@ -120,5 +120,8 @@ export default {
   },
   textarea: {
     placeholder: '请输入...'
+  },
+  tableCol: {
+    indexLabel: '序号'
   }
 }
diff --git a/src/uni_modules/wot-design-uni/locale/lang/zh-HK.ts b/src/uni_modules/wot-design-uni/locale/lang/zh-HK.ts
@@ -54,5 +54,8 @@ export default {
   input: { placeholder: '請輸入...' },
   selectPicker: { title: '請選擇', placeholder: '請選擇', select: '確認', confirm: '確認', filterPlaceholder: '搜索' },
   tag: { placeholder: '請輸入', add: '新增標籤' },
-  textarea: { placeholder: '請輸入...' }
+  textarea: { placeholder: '請輸入...' },
+  tableCol: {
+    indexLabel: '序號'
+  }
 }
diff --git a/src/uni_modules/wot-design-uni/locale/lang/zh-TW.ts b/src/uni_modules/wot-design-uni/locale/lang/zh-TW.ts
@@ -54,5 +54,8 @@ export default {
   input: { placeholder: '請輸入...' },
   selectPicker: { title: '請選擇', placeholder: '請選擇', select: '確認', confirm: '確認', filterPlaceholder: '搜索' },
   tag: { placeholder: '請輸入', add: '新增標籤' },
-  textarea: { placeholder: '請輸入...' }
+  textarea: { placeholder: '請輸入...' },
+  tableCol: {
+    indexLabel: '序號'
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -120,5 +120,8 @@ export default {`
`120`	`120`	`},`
`121`	`121`	`textarea: {`
`122`	`122`	`placeholder: 'Please input information...'`
	`123`	`+ },`
	`124`	`+ tableCol: {`
	`125`	`+ indexLabel: 'index'`
`123`	`126`	`}`
`124`	`127`	`}`