From 39c0488ddb79b56d52175a49700027a702d563d7 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: Fri, 18 Mar 2022 11:15:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20table=20column=20=E6=96=B0=E5=A2=9E=20s?=
 =?UTF-8?q?ort=20=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/table.md |  3 +-
 src/component/table/index.vue          | 52 +++++++++++++++++++++++++-
 2 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/example/docs/zh-CN/components/table.md b/example/docs/zh-CN/components/table.md
index 703a0a21..bef116d5 100644
--- a/example/docs/zh-CN/components/table.md
+++ b/example/docs/zh-CN/components/table.md
@@ -243,7 +243,8 @@ export default {
       },{
         title:"年龄",
         width: "180px",
-        key:"age"
+        key:"age",
+        sort: true
       },{
         title:"操作",
         width: "180px",
diff --git a/src/component/table/index.vue b/src/component/table/index.vue
index 8a0b71f5..f871872e 100644
--- a/src/component/table/index.vue
+++ b/src/component/table/index.vue
@@ -14,6 +14,7 @@ import LayDropdown from "../dropdown";
 import LayPage from "../page";
 import LayIcon from "../icon";
 import "./index.less";
+import { AnyARecord } from "dns";
 
 const tableId = guid();
 
@@ -47,6 +48,7 @@ const slot = useSlots();
 const slots = slot.default && slot.default();
 
 const allChecked = ref(false);
+const tableDataSource = ref([...props.dataSource]);
 const tableSelectedKeys = ref([...props.selectedKeys]);
 const tableColumns = ref([...props.columns]);
 const tableColumnKeys = ref(
@@ -55,6 +57,13 @@ const tableColumnKeys = ref(
   })
 );
 
+watch(
+  () => props.dataSource,
+  () => {
+    tableDataSource.value = [...props.dataSource];
+  }
+);
+
 const changeAll = function (checked: any) {
   const ids = props.dataSource.map((item: any) => {
     return item[props.id];
@@ -127,6 +136,41 @@ const exportData = () => {
   return;
 };
 
+const sortTable = (e: any, key: string, sort: string) => {
+  // 当前排序
+  let currentSort = e.target.parentNode.getAttribute("lay-sort");
+  // 点击排序
+  if (sort === "desc") {
+    if (currentSort === sort) {
+      // 取消排序
+      e.target.parentNode.setAttribute("lay-sort", "");
+      tableDataSource.value = [...props.dataSource];
+    } else {
+      // 进行 desc 排序
+      e.target.parentNode.setAttribute("lay-sort", "desc");
+      tableDataSource.value.sort((x, y) => {
+        if (x[key] < y[key]) return 1;
+        else if (x[key] > y[key]) return -1;
+        else return 0;
+      });
+    }
+  } else {
+    if (currentSort === sort) {
+      // 取消排序
+      e.target.parentNode.setAttribute("lay-sort", "");
+      tableDataSource.value = [...props.dataSource];
+    } else {
+      // 进行 asc 排序
+      e.target.parentNode.setAttribute("lay-sort", "asc");
+      tableDataSource.value.sort((x, y) => {
+        if (x[key] < y[key]) return -1;
+        else if (x[key] > y[key]) return 1;
+        else return 0;
+      });
+    }
+  }
+};
+
 let tableHeader = ref<HTMLElement | null>(null);
 let tableBody = ref<HTMLElement | null>(null);
 
@@ -210,13 +254,15 @@ onMounted(() => {
                       <span
                         v-if="column.sort"
                         class="layui-table-sort layui-inline"
-                        lay-sort=""
+                        lay-sort="desc"
                       >
                         <i
+                          @click.stop="sortTable($event, column.key, 'asc')"
                           class="layui-edge layui-table-sort-asc"
                           title="升序"
                         ></i>
                         <i
+                          @click.stop="sortTable($event, column.key, 'desc')"
                           class="layui-edge layui-table-sort-desc"
                           title="降序"
                         ></i>
@@ -232,11 +278,12 @@ onMounted(() => {
         <div class="layui-table-body layui-table-main" ref="tableBody">
           <table class="layui-table" :lay-size="size">
             <tbody>
-              <template v-for="data in dataSource" :key="data">
+              <template v-for="data in tableDataSource" :key="data">
                 <tr
                   @click.stop="rowClick(data)"
                   @dblclick.stop="rowDoubleClick(data)"
                 >
+                  <!-- 复选框 -->
                   <td v-if="checkbox" class="layui-table-col-special">
                     <div class="layui-table-cell laytable-cell-checkbox">
                       <LayCheckbox
@@ -247,6 +294,7 @@ onMounted(() => {
                     </div>
                   </td>
 
+                  <!-- 数据列 -->
                   <template v-for="column in columns" :key="column">
                     <template v-if="tableColumnKeys.includes(column.key)">
                       <!-- 插 槽 Column -->