From a8b025c12ae9fbc340d5dc3f552058e033508444 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Mon, 18 Jul 2022 14:06:56 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(table):=20=E6=96=B0=E5=A2=9E=20type?=
 =?UTF-8?q?=20=E4=B8=BA=20number=20=E5=BA=8F=E5=8F=B7=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/table/TableRow.vue          | 53 +++++++++++++++++++
 .../component/src/component/table/index.vue   | 10 ++--
 .../src/document/zh-CN/components/table.md    |  6 +++
 package/layer/src/component/Photos.vue        | 30 +++++++----
 package/layer/src/component/index.vue         |  2 +-
 5 files changed, 86 insertions(+), 15 deletions(-)

diff --git a/package/component/src/component/table/TableRow.vue b/package/component/src/component/table/TableRow.vue
index 830a1de1..5b97b8ab 100644
--- a/package/component/src/component/table/TableRow.vue
+++ b/package/component/src/component/table/TableRow.vue
@@ -191,6 +191,59 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
     <template v-for="(column, columnIndex) in columns" :key="columnIndex">
       <!-- 展示否 -->
       <template v-if="tableColumnKeys.includes(column.key)">
+
+        <template v-if="column.type == 'number'">
+                 <td
+            class="layui-table-cell"
+            :style="[
+              {
+                textAlign: column.align,
+                whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
+              },
+              renderFixedStyle(column, columnIndex),
+              renderCellStyle(data, column, index, columnIndex),
+            ]"
+            :class="[
+              renderCellClassName(data, column, index, columnIndex),
+              column.fixed ? `layui-table-fixed-${column.fixed}` : '',
+            ]"
+          >
+            <!-- 树表占位与缩进 -->
+            <span
+              v-if="expandSpace && columnIndex === 0"
+              :style="{ 'margin-right': currentIndentSize + 'px' }"
+            ></span>
+
+            <span
+              v-if="
+                expandSpace &&
+                !data[childrenColumnName] &&
+                !slot.expand &&
+                columnIndex === 0
+              "
+              class="layui-table-cell-expand-icon-spaced"
+            ></span>
+
+            <lay-icon
+              v-if="
+                (slot.expand || data[childrenColumnName]) && columnIndex === 0
+              "
+              class="layui-table-cell-expand-icon"
+              :type="expandIconType"
+              @click="handleExpand"
+            ></lay-icon>
+
+            <lay-tooltip
+              v-if="column.ellipsisTooltip"
+              :content="data[column.key]"
+              :isAutoShow="true"
+            >
+              {{ index + 1 }}
+            </lay-tooltip>
+            {{ index + 1 }}
+          </td>
+        </template>
+
         <!-- 插槽列 -->
         <template v-if="column.customSlot">
           <td
diff --git a/package/component/src/component/table/index.vue b/package/component/src/component/table/index.vue
index afb21416..f16bc8cb 100644
--- a/package/component/src/component/table/index.vue
+++ b/package/component/src/component/table/index.vue
@@ -72,7 +72,7 @@ const tableSelectedKeys = ref<Recordable[]>([...props.selectedKeys]);
 const tableColumns = ref([...props.columns]);
 const tableColumnKeys = ref(
   props.columns.map((item: any) => {
-    if(item.hide != true) {
+    if (item.hide != true) {
       return item.key;
     }
   })
@@ -358,7 +358,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
                       minWidth: column.minWidth ? column.minWidth : '100px',
                     }"
                   />
-                </template> 
+                </template>
               </template>
               <col v-if="scrollWidthCell > 0" :width="scrollWidthCell" />
             </colgroup>
@@ -492,12 +492,12 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
       </div>
       <div v-if="page" class="layui-table-page">
         <lay-page
+          show-page
+          show-skip
+          show-limit
           :total="page.total"
           :limit="page.limit"
           v-model="page.current"
-          show-page
-          show-limit
-          show-skip
           @jump="change"
         >
           <template #prev>
diff --git a/package/document-component/src/document/zh-CN/components/table.md b/package/document-component/src/document/zh-CN/components/table.md
index 1c2de3cd..d35fdf20 100644
--- a/package/document-component/src/document/zh-CN/components/table.md
+++ b/package/document-component/src/document/zh-CN/components/table.md
@@ -714,6 +714,12 @@ export default {
     const defaultToolbar5 = ref(true)
 
     const columns5 = [
+      {
+        title: "序号",
+        fixed: "left",
+        type: "number",
+        width: "30px",
+      },
       {
         title:"姓名",
         fixed:"left",
diff --git a/package/layer/src/component/Photos.vue b/package/layer/src/component/Photos.vue
index 9eadfdb9..2c508429 100644
--- a/package/layer/src/component/Photos.vue
+++ b/package/layer/src/component/Photos.vue
@@ -20,10 +20,22 @@
         :style="{ opacity: showLayerImgBar ? 1 : 0 }"
       >
         <div class="thumb-row" v-if="ifSetThumb">
-          <div class="thumb-box" v-for="(item,i) in imgList" :key="'thumb-box'+i" @click="index=i">
+          <div
+            class="thumb-box"
+            v-for="(item, i) in imgList"
+            :key="'thumb-box' + i"
+            @click="index = i"
+          >
             <img :src="item.thumb" />
           </div>
-          <div class="thumb-box-border" :style="{left:`calc(calc( calc(100% - ${100*imgList.length}px) / 2) + ${index*100}px)`}"></div>
+          <div
+            class="thumb-box-border"
+            :style="{
+              left: `calc(calc( calc(100% - ${100 * imgList.length}px) / 2) + ${
+                index * 100
+              }px)`,
+            }"
+          ></div>
         </div>
         <span class="layui-layer-imgtit" v-else>
           <span v-if="imgList[index].alt">{{ imgList[index].alt }}</span>
@@ -44,7 +56,7 @@ export default {
 import { watch, ref, onMounted, nextTick, computed } from "vue";
 
 export interface LayPhotoProps {
-  imgList: { src: string; alt: string,thumb:string }[];
+  imgList: { src: string; alt: string; thumb: string }[];
   startIndex: number;
 }
 const emit = defineEmits(["resetCalculationPohtosArea"]);
@@ -76,13 +88,13 @@ onMounted(() => {
   });
 });
 
-const ifSetThumb=computed(()=>{
-  let res=false;
-  props.imgList.forEach(e=>{
-    if(e.thumb){
-      res=true;
+const ifSetThumb = computed(() => {
+  let res = false;
+  props.imgList.forEach((e) => {
+    if (e.thumb) {
+      res = true;
     }
   });
   return res;
-})
+});
 </script>
diff --git a/package/layer/src/component/index.vue b/package/layer/src/component/index.vue
index df39e1b8..13aed69a 100644
--- a/package/layer/src/component/index.vue
+++ b/package/layer/src/component/index.vue
@@ -94,7 +94,7 @@ export interface LayModalProps {
   isMessage?: boolean;
   appContext?: any;
   startIndex?: number;
-  imgList?: { src: string; alt: string,thumb:string }[];
+  imgList?: { src: string; alt: string; thumb: string }[];
   min?: Function;
   full?: Function;
   restore?: Function;