From 0afa9f79b25b12ecf078dd70fd3c69bf9187b4cd Mon Sep 17 00:00:00 2001
From: mengxiong10 <15623530290@163.com>
Date: Thu, 26 Nov 2020 10:59:35 +0800
Subject: [PATCH] refactor: data-row-col replace data-date to fix test

---
 .../__snapshots__/date-picker.test.js.snap    | 90 ++++++++++---------
 .../__snapshots__/table-date.test.js.snap     | 84 ++++++++---------
 src/calendar/table-date.vue                   | 16 ++--
 3 files changed, 101 insertions(+), 89 deletions(-)

diff --git a/__tests__/__snapshots__/date-picker.test.js.snap b/__tests__/__snapshots__/date-picker.test.js.snap
index fb3eebf..e7ef0ea 100644
--- a/__tests__/__snapshots__/date-picker.test.js.snap
+++ b/__tests__/__snapshots__/date-picker.test.js.snap
@@ -154,13 +154,14 @@ exports[`DatePicker prop: formatter 1`] = `
     >
       <td
         class="mx-week-number"
+        data-row-col="0,0"
       >
         29
       </td>
       
       <td
         class="cell not-current-month"
-        data-date="1569686400000"
+        data-row-col="0,0"
         title="2019-09-29"
       >
         <div>
@@ -169,7 +170,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell not-current-month"
-        data-date="1569772800000"
+        data-row-col="0,1"
         title="2019-09-30"
       >
         <div>
@@ -178,7 +179,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1569859200000"
+        data-row-col="0,2"
         title="2019-10-01"
       >
         <div>
@@ -187,7 +188,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1569945600000"
+        data-row-col="0,3"
         title="2019-10-02"
       >
         <div>
@@ -196,7 +197,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1570032000000"
+        data-row-col="0,4"
         title="2019-10-03"
       >
         <div>
@@ -205,7 +206,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1570118400000"
+        data-row-col="0,5"
         title="2019-10-04"
       >
         <div>
@@ -214,7 +215,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1570204800000"
+        data-row-col="0,6"
         title="2019-10-05"
       >
         <div>
@@ -228,13 +229,14 @@ exports[`DatePicker prop: formatter 1`] = `
     >
       <td
         class="mx-week-number"
+        data-row-col="1,0"
       >
         6
       </td>
       
       <td
         class="cell"
-        data-date="1570291200000"
+        data-row-col="1,0"
         title="2019-10-06"
       >
         <div>
@@ -243,7 +245,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1570377600000"
+        data-row-col="1,1"
         title="2019-10-07"
       >
         <div>
@@ -252,7 +254,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1570464000000"
+        data-row-col="1,2"
         title="2019-10-08"
       >
         <div>
@@ -261,7 +263,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1570550400000"
+        data-row-col="1,3"
         title="2019-10-09"
       >
         <div>
@@ -270,7 +272,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1570636800000"
+        data-row-col="1,4"
         title="2019-10-10"
       >
         <div>
@@ -279,7 +281,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1570723200000"
+        data-row-col="1,5"
         title="2019-10-11"
       >
         <div>
@@ -288,7 +290,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1570809600000"
+        data-row-col="1,6"
         title="2019-10-12"
       >
         <div>
@@ -302,13 +304,14 @@ exports[`DatePicker prop: formatter 1`] = `
     >
       <td
         class="mx-week-number"
+        data-row-col="2,0"
       >
         13
       </td>
       
       <td
         class="cell active"
-        data-date="1570896000000"
+        data-row-col="2,0"
         title="2019-10-13"
       >
         <div>
@@ -317,7 +320,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1570982400000"
+        data-row-col="2,1"
         title="2019-10-14"
       >
         <div>
@@ -326,7 +329,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1571068800000"
+        data-row-col="2,2"
         title="2019-10-15"
       >
         <div>
@@ -335,7 +338,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1571155200000"
+        data-row-col="2,3"
         title="2019-10-16"
       >
         <div>
@@ -344,7 +347,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1571241600000"
+        data-row-col="2,4"
         title="2019-10-17"
       >
         <div>
@@ -353,7 +356,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1571328000000"
+        data-row-col="2,5"
         title="2019-10-18"
       >
         <div>
@@ -362,7 +365,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1571414400000"
+        data-row-col="2,6"
         title="2019-10-19"
       >
         <div>
@@ -376,13 +379,14 @@ exports[`DatePicker prop: formatter 1`] = `
     >
       <td
         class="mx-week-number"
+        data-row-col="3,0"
       >
         20
       </td>
       
       <td
         class="cell"
-        data-date="1571500800000"
+        data-row-col="3,0"
         title="2019-10-20"
       >
         <div>
@@ -391,7 +395,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1571587200000"
+        data-row-col="3,1"
         title="2019-10-21"
       >
         <div>
@@ -400,7 +404,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1571673600000"
+        data-row-col="3,2"
         title="2019-10-22"
       >
         <div>
@@ -409,7 +413,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1571760000000"
+        data-row-col="3,3"
         title="2019-10-23"
       >
         <div>
@@ -418,7 +422,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1571846400000"
+        data-row-col="3,4"
         title="2019-10-24"
       >
         <div>
@@ -427,7 +431,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1571932800000"
+        data-row-col="3,5"
         title="2019-10-25"
       >
         <div>
@@ -436,7 +440,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1572019200000"
+        data-row-col="3,6"
         title="2019-10-26"
       >
         <div>
@@ -450,13 +454,14 @@ exports[`DatePicker prop: formatter 1`] = `
     >
       <td
         class="mx-week-number"
+        data-row-col="4,0"
       >
         27
       </td>
       
       <td
         class="cell"
-        data-date="1572105600000"
+        data-row-col="4,0"
         title="2019-10-27"
       >
         <div>
@@ -465,7 +470,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1572192000000"
+        data-row-col="4,1"
         title="2019-10-28"
       >
         <div>
@@ -474,7 +479,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1572278400000"
+        data-row-col="4,2"
         title="2019-10-29"
       >
         <div>
@@ -483,7 +488,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1572364800000"
+        data-row-col="4,3"
         title="2019-10-30"
       >
         <div>
@@ -492,7 +497,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell"
-        data-date="1572451200000"
+        data-row-col="4,4"
         title="2019-10-31"
       >
         <div>
@@ -501,7 +506,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell not-current-month"
-        data-date="1572537600000"
+        data-row-col="4,5"
         title="2019-11-01"
       >
         <div>
@@ -510,7 +515,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell not-current-month"
-        data-date="1572624000000"
+        data-row-col="4,6"
         title="2019-11-02"
       >
         <div>
@@ -524,13 +529,14 @@ exports[`DatePicker prop: formatter 1`] = `
     >
       <td
         class="mx-week-number"
+        data-row-col="5,0"
       >
         3
       </td>
       
       <td
         class="cell not-current-month"
-        data-date="1572710400000"
+        data-row-col="5,0"
         title="2019-11-03"
       >
         <div>
@@ -539,7 +545,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell not-current-month"
-        data-date="1572796800000"
+        data-row-col="5,1"
         title="2019-11-04"
       >
         <div>
@@ -548,7 +554,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell not-current-month"
-        data-date="1572883200000"
+        data-row-col="5,2"
         title="2019-11-05"
       >
         <div>
@@ -557,7 +563,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell not-current-month"
-        data-date="1572969600000"
+        data-row-col="5,3"
         title="2019-11-06"
       >
         <div>
@@ -566,7 +572,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell not-current-month"
-        data-date="1573056000000"
+        data-row-col="5,4"
         title="2019-11-07"
       >
         <div>
@@ -575,7 +581,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell not-current-month"
-        data-date="1573142400000"
+        data-row-col="5,5"
         title="2019-11-08"
       >
         <div>
@@ -584,7 +590,7 @@ exports[`DatePicker prop: formatter 1`] = `
       </td>
       <td
         class="cell not-current-month"
-        data-date="1573228800000"
+        data-row-col="5,6"
         title="2019-11-09"
       >
         <div>
diff --git a/__tests__/__snapshots__/table-date.test.js.snap b/__tests__/__snapshots__/table-date.test.js.snap
index 37e7eb4..6c83263 100644
--- a/__tests__/__snapshots__/table-date.test.js.snap
+++ b/__tests__/__snapshots__/table-date.test.js.snap
@@ -101,7 +101,7 @@ exports[`TableDate corrent render 1`] = `
           
           <td
             class="cell"
-            data-date="1569686400000"
+            data-row-col="0,0"
             title="29/09/2019"
           >
             <div>
@@ -110,7 +110,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1569772800000"
+            data-row-col="0,1"
             title="30/09/2019"
           >
             <div>
@@ -119,7 +119,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1569859200000"
+            data-row-col="0,2"
             title="01/10/2019"
           >
             <div>
@@ -128,7 +128,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1569945600000"
+            data-row-col="0,3"
             title="02/10/2019"
           >
             <div>
@@ -137,7 +137,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1570032000000"
+            data-row-col="0,4"
             title="03/10/2019"
           >
             <div>
@@ -146,7 +146,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1570118400000"
+            data-row-col="0,5"
             title="04/10/2019"
           >
             <div>
@@ -155,7 +155,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1570204800000"
+            data-row-col="0,6"
             title="05/10/2019"
           >
             <div>
@@ -171,7 +171,7 @@ exports[`TableDate corrent render 1`] = `
           
           <td
             class="cell"
-            data-date="1570291200000"
+            data-row-col="1,0"
             title="06/10/2019"
           >
             <div>
@@ -180,7 +180,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1570377600000"
+            data-row-col="1,1"
             title="07/10/2019"
           >
             <div>
@@ -189,7 +189,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1570464000000"
+            data-row-col="1,2"
             title="08/10/2019"
           >
             <div>
@@ -198,7 +198,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1570550400000"
+            data-row-col="1,3"
             title="09/10/2019"
           >
             <div>
@@ -207,7 +207,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1570636800000"
+            data-row-col="1,4"
             title="10/10/2019"
           >
             <div>
@@ -216,7 +216,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1570723200000"
+            data-row-col="1,5"
             title="11/10/2019"
           >
             <div>
@@ -225,7 +225,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1570809600000"
+            data-row-col="1,6"
             title="12/10/2019"
           >
             <div>
@@ -241,7 +241,7 @@ exports[`TableDate corrent render 1`] = `
           
           <td
             class="cell"
-            data-date="1570896000000"
+            data-row-col="2,0"
             title="13/10/2019"
           >
             <div>
@@ -250,7 +250,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1570982400000"
+            data-row-col="2,1"
             title="14/10/2019"
           >
             <div>
@@ -259,7 +259,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1571068800000"
+            data-row-col="2,2"
             title="15/10/2019"
           >
             <div>
@@ -268,7 +268,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1571155200000"
+            data-row-col="2,3"
             title="16/10/2019"
           >
             <div>
@@ -277,7 +277,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1571241600000"
+            data-row-col="2,4"
             title="17/10/2019"
           >
             <div>
@@ -286,7 +286,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1571328000000"
+            data-row-col="2,5"
             title="18/10/2019"
           >
             <div>
@@ -295,7 +295,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1571414400000"
+            data-row-col="2,6"
             title="19/10/2019"
           >
             <div>
@@ -311,7 +311,7 @@ exports[`TableDate corrent render 1`] = `
           
           <td
             class="cell"
-            data-date="1571500800000"
+            data-row-col="3,0"
             title="20/10/2019"
           >
             <div>
@@ -320,7 +320,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1571587200000"
+            data-row-col="3,1"
             title="21/10/2019"
           >
             <div>
@@ -329,7 +329,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1571673600000"
+            data-row-col="3,2"
             title="22/10/2019"
           >
             <div>
@@ -338,7 +338,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1571760000000"
+            data-row-col="3,3"
             title="23/10/2019"
           >
             <div>
@@ -347,7 +347,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1571846400000"
+            data-row-col="3,4"
             title="24/10/2019"
           >
             <div>
@@ -356,7 +356,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1571932800000"
+            data-row-col="3,5"
             title="25/10/2019"
           >
             <div>
@@ -365,7 +365,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1572019200000"
+            data-row-col="3,6"
             title="26/10/2019"
           >
             <div>
@@ -381,7 +381,7 @@ exports[`TableDate corrent render 1`] = `
           
           <td
             class="cell"
-            data-date="1572105600000"
+            data-row-col="4,0"
             title="27/10/2019"
           >
             <div>
@@ -390,7 +390,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1572192000000"
+            data-row-col="4,1"
             title="28/10/2019"
           >
             <div>
@@ -399,7 +399,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1572278400000"
+            data-row-col="4,2"
             title="29/10/2019"
           >
             <div>
@@ -408,7 +408,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1572364800000"
+            data-row-col="4,3"
             title="30/10/2019"
           >
             <div>
@@ -417,7 +417,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1572451200000"
+            data-row-col="4,4"
             title="31/10/2019"
           >
             <div>
@@ -426,7 +426,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1572537600000"
+            data-row-col="4,5"
             title="01/11/2019"
           >
             <div>
@@ -435,7 +435,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1572624000000"
+            data-row-col="4,6"
             title="02/11/2019"
           >
             <div>
@@ -451,7 +451,7 @@ exports[`TableDate corrent render 1`] = `
           
           <td
             class="cell"
-            data-date="1572710400000"
+            data-row-col="5,0"
             title="03/11/2019"
           >
             <div>
@@ -460,7 +460,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1572796800000"
+            data-row-col="5,1"
             title="04/11/2019"
           >
             <div>
@@ -469,7 +469,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1572883200000"
+            data-row-col="5,2"
             title="05/11/2019"
           >
             <div>
@@ -478,7 +478,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1572969600000"
+            data-row-col="5,3"
             title="06/11/2019"
           >
             <div>
@@ -487,7 +487,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1573056000000"
+            data-row-col="5,4"
             title="07/11/2019"
           >
             <div>
@@ -496,7 +496,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1573142400000"
+            data-row-col="5,5"
             title="08/11/2019"
           >
             <div>
@@ -505,7 +505,7 @@ exports[`TableDate corrent render 1`] = `
           </td>
           <td
             class="cell"
-            data-date="1573228800000"
+            data-row-col="5,6"
             title="09/11/2019"
           >
             <div>
diff --git a/src/calendar/table-date.vue b/src/calendar/table-date.vue
index b299657..8f717a9 100644
--- a/src/calendar/table-date.vue
+++ b/src/calendar/table-date.vue
@@ -33,13 +33,17 @@
             :key="i"
             :class="[`${prefixClass}-date-row`, getRowClasses(row)]"
           >
-            <td v-if="showWeekNumber" :class="`${prefixClass}-week-number`">
+            <td
+              v-if="showWeekNumber"
+              :data-row-col="`${i},0`"
+              :class="`${prefixClass}-week-number`"
+            >
               {{ getWeekNumber(row[0]) }}
             </td>
             <td
               v-for="(cell, j) in row"
               :key="j"
-              :data-date="cell.getTime()"
+              :data-row-col="`${i},${j}`"
               class="cell"
               :class="getCellClasses(cell)"
               :title="getCellTitle(cell)"
@@ -155,9 +159,11 @@ export default {
       if (target.tagName.toUpperCase() === 'DIV') {
         target = target.parentNode;
       }
-      const date = target.getAttribute('data-date');
-      if (date) {
-        this.$emit('select', new Date(parseInt(date, 10)));
+      const index = target.getAttribute('data-row-col');
+      if (index) {
+        const [row, col] = index.split(',').map((v) => parseInt(v, 10));
+        const date = this.dates[row][col];
+        this.$emit('select', new Date(date));
       }
     },
     formatDate(date, fmt) {