Browse Source

a-table 增加rowKey

wandequan 2 years ago
parent
commit
60d2c6fdc6

+ 46 - 36
src/components/life/parking/components/lifeParkDetailTable.vue

@@ -1,5 +1,15 @@
 <template>
-  <a-table :columns="columns" :data-source="data" :pagination="false" :customRow="customRow">
+  <a-table
+    :rowKey="
+      (record, index) => {
+        return index;
+      }
+    "
+    :columns="columns"
+    :data-source="data"
+    :pagination="false"
+    :customRow="customRow"
+  >
     <a slot="name" slot-scope="text">{{ text }}</a>
   </a-table>
 </template>
@@ -10,59 +20,59 @@ export default {
     return {
       columns: [
         {
-          title: '车位',
-          dataIndex: 'position',
-          key: 'position',
+          title: "车位",
+          dataIndex: "position",
+          key: "position",
         },
         {
-          title: '拥有者',
-          dataIndex: 'owner',
-          key: 'owner',
+          title: "拥有者",
+          dataIndex: "owner",
+          key: "owner",
         },
         {
-          title: '单位',
-          dataIndex: 'company',
-          key: 'company',
+          title: "单位",
+          dataIndex: "company",
+          key: "company",
         },
         {
-          title: '停车时间',
-          key: 'time',
-          dataIndex: 'time',
+          title: "停车时间",
+          key: "time",
+          dataIndex: "time",
         },
       ],
       data: [
         {
-          position: 'B201',
-          owner: '北京规划院',
-          company: '2h',
-          time: '2min'
+          position: "B201",
+          owner: "北京规划院",
+          company: "2h",
+          time: "2min",
+        },
+        {
+          position: "B201",
+          owner: "北京规划院",
+          company: "2h",
+          time: "2min",
         },
         {
-          position: 'B201',
-          owner: '北京规划院',
-          company: '2h',
-          time: '2min'
-        }, {
-          position: 'B201',
-          owner: '北京规划院',
-          company: '2h',
-          time: '2min'
-        }
-      ]
-    }
+          position: "B201",
+          owner: "北京规划院",
+          company: "2h",
+          time: "2min",
+        },
+      ],
+    };
   },
   methods: {
     customRow(record, index) {
       return {
         style: {
-          'background-color': index%2===0 ? '#ffffff' : '#fafafa'
-        }
-      }
-    }
-  }
-}
+          "background-color": index % 2 === 0 ? "#ffffff" : "#fafafa",
+        },
+      };
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-
 </style>

+ 62 - 47
src/components/life/parking/components/lifeParkTopTable.vue

@@ -1,5 +1,15 @@
 <template>
-  <a-table :columns="columns" :data-source="tableData" :pagination="false" :customRow="customRow">
+  <a-table
+    :rowKey="
+      (record, index) => {
+        return index;
+      }
+    "
+    :columns="columns"
+    :data-source="tableData"
+    :pagination="false"
+    :customRow="customRow"
+  >
     <a slot="name" slot-scope="text">{{ text }}</a>
   </a-table>
 </template>
@@ -10,66 +20,71 @@ export default {
     return {
       columns: [
         {
-          title: '车位',
-          dataIndex: 'position',
-          key: 'position',
+          title: "车位",
+          dataIndex: "position",
+          key: "position",
+        },
+        {
+          title: "单位",
+          dataIndex: "company",
+          key: "company",
+        },
+        {
+          title: "占用最长时间",
+          key: "longTime",
+          dataIndex: "longTime",
+        },
+        {
+          title: "占用最短时间",
+          key: "shortTime",
+          dataIndex: "shortTime",
+        },
+      ],
+      tableData: [
+        {
+          position: "B201",
+          name: "北京规划院",
+          longTime: "2h",
+          shortTime: "2min",
+        },
+        {
+          position: "B201",
+          name: "北京规划院",
+          longTime: "2h",
+          shortTime: "2min",
         },
         {
-          title: '单位',
-          dataIndex: 'company',
-          key: 'company',
+          position: "B201",
+          name: "北京规划院",
+          longTime: "2h",
+          shortTime: "2min",
         },
         {
-          title: '占用最长时间',
-          key: 'longTime',
-          dataIndex: 'longTime',
+          position: "B201",
+          name: "北京规划院",
+          longTime: "2h",
+          shortTime: "2min",
         },
         {
-          title: '占用最短时间',
-          key: 'shortTime',
-          dataIndex: 'shortTime',
+          position: "B201",
+          name: "北京规划院",
+          longTime: "2h",
+          shortTime: "2min",
         },
       ],
-      tableData: [{
-        position: 'B201',
-        name: '北京规划院',
-        longTime: '2h',
-        shortTime: '2min'
-      }, {
-        position: 'B201',
-        name: '北京规划院',
-        longTime: '2h',
-        shortTime: '2min'
-      }, {
-        position: 'B201',
-        name: '北京规划院',
-        longTime: '2h',
-        shortTime: '2min'
-      }, {
-        position: 'B201',
-        name: '北京规划院',
-        longTime: '2h',
-        shortTime: '2min'
-      }, {
-        position: 'B201',
-        name: '北京规划院',
-        longTime: '2h',
-        shortTime: '2min'
-      }]
-    }
+    };
   },
   methods: {
     customRow(record, index) {
       return {
         style: {
-          'background-color': index%2===0 ? '#ffffff' : '#fafafa'
-        }
-      }
-    }
-  }
-}
+          "background-color": index % 2 === 0 ? "#ffffff" : "#fafafa",
+        },
+      };
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-
 </style>

+ 47 - 36
src/components/life/restaurant/components/lifeRestDailyMenu.vue

@@ -1,9 +1,16 @@
 <template>
-  <a-table :columns="columns"
-           :show-header="false"
-           :data-source="tableData"
-           :pagination="false"
-           :customRow="customRow">
+  <a-table
+    :rowKey="
+      (record, index) => {
+        return index;
+      }
+    "
+    :columns="columns"
+    :show-header="false"
+    :data-source="tableData"
+    :pagination="false"
+    :customRow="customRow"
+  >
     <a slot="name" slot-scope="text">{{ text }}</a>
   </a-table>
 </template>
@@ -14,49 +21,53 @@ export default {
     return {
       columns: [
         {
-          dataIndex: 'type',
-          key: 'type',
+          dataIndex: "type",
+          key: "type",
+        },
+        {
+          dataIndex: "name",
+          key: "name",
+        },
+        {
+          dataIndex: "price",
+          key: "price",
+        },
+      ],
+      tableData: [
+        {
+          type: "热菜",
+          name: "铁锅蘑菇炖柴鸡",
+          price: "16大/12小",
+        },
+        {
+          type: "热菜",
+          name: "铁锅蘑菇炖柴鸡",
+          price: "16大/12小",
         },
         {
-          dataIndex: 'name',
-          key: 'name',
+          type: "热菜",
+          name: "铁锅蘑菇炖柴鸡",
+          price: "16大/12小",
         },
         {
-          dataIndex: 'price',
-          key: 'price',
+          type: "主食",
+          name: "米饭",
+          price: "3",
         },
       ],
-      tableData: [{
-        type: '热菜',
-        name: '铁锅蘑菇炖柴鸡',
-        price: '16大/12小'
-      }, {
-        type: '热菜',
-        name: '铁锅蘑菇炖柴鸡',
-        price: '16大/12小'
-      }, {
-        type: '热菜',
-        name: '铁锅蘑菇炖柴鸡',
-        price: '16大/12小'
-      }, {
-        type: '主食',
-        name: '米饭',
-        price: '3'
-      }]
-    }
+    };
   },
   methods: {
     customRow(record, index) {
       return {
         style: {
-          'background-color': index%2===0 ? '#ffffff' : '#fafafa'
-        }
-      }
-    }
-  }
-}
+          "background-color": index % 2 === 0 ? "#ffffff" : "#fafafa",
+        },
+      };
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-
 </style>

+ 52 - 40
src/components/life/restaurant/components/lifeRestTopMenu.vue

@@ -1,9 +1,16 @@
 <template>
-  <a-table :columns="columns"
-           :show-header="false"
-           :data-source="tableData"
-           :pagination="false"
-           :customRow="customRow">
+  <a-table
+    :rowKey="
+      (record, index) => {
+        return index;
+      }
+    "
+    :columns="columns"
+    :show-header="false"
+    :data-source="tableData"
+    :pagination="false"
+    :customRow="customRow"
+  >
     <a slot="name" slot-scope="text">{{ text }}</a>
   </a-table>
 </template>
@@ -14,53 +21,58 @@ export default {
     return {
       columns: [
         {
-          dataIndex: 'img',
-          key: 'img',
+          dataIndex: "img",
+          key: "img",
+        },
+        {
+          dataIndex: "name",
+          key: "name",
+        },
+        {
+          dataIndex: "num",
+          key: "num",
+        },
+      ],
+      tableData: [
+        {
+          img: "",
+          name: "铁锅蘑菇炖柴鸡",
+          num: "200",
         },
         {
-          dataIndex: 'name',
-          key: 'name',
+          img: "",
+          name: "铁锅蘑菇炖柴鸡",
+          num: "200",
         },
         {
-          dataIndex: 'num',
-          key: 'num',
+          img: "",
+          name: "铁锅蘑菇炖柴鸡",
+          num: "200",
+        },
+        {
+          img: "",
+          name: "铁锅蘑菇炖柴鸡",
+          num: "200",
+        },
+        {
+          img: "",
+          name: "铁锅蘑菇炖柴鸡",
+          num: "200",
         },
       ],
-      tableData: [{
-        img: '',
-        name: '铁锅蘑菇炖柴鸡',
-        num: '200'
-      }, {
-        img: '',
-        name: '铁锅蘑菇炖柴鸡',
-        num: '200'
-      }, {
-        img: '',
-        name: '铁锅蘑菇炖柴鸡',
-        num: '200'
-      }, {
-        img: '',
-        name: '铁锅蘑菇炖柴鸡',
-        num: '200'
-      }, {
-        img: '',
-        name: '铁锅蘑菇炖柴鸡',
-        num: '200'
-      }]
-    }
+    };
   },
   methods: {
     customRow(record, index) {
       return {
         style: {
-          'background-color': index%2===0 ? '#ffffff' : '#fafafa'
-        }
-      }
-    }
-  }
-}
+          "background-color": index % 2 === 0 ? "#ffffff" : "#fafafa",
+        },
+      };
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-
 </style>

+ 52 - 38
src/components/life/supermarket/components/lifeSupermarketTopTable.vue

@@ -1,5 +1,15 @@
 <template>
-  <a-table :columns="columns" :data-source="data" :pagination="false" :customRow="customRow">
+  <a-table
+    :rowKey="
+      (record, index) => {
+        return index;
+      }
+    "
+    :columns="columns"
+    :data-source="data"
+    :pagination="false"
+    :customRow="customRow"
+  >
     <a slot="name" slot-scope="text">{{ text }}</a>
   </a-table>
 </template>
@@ -10,48 +20,52 @@ export default {
     return {
       columns: [
         {
-          title: '图片',
-          dataIndex: 'img',
-          key: 'img',
+          title: "图片",
+          dataIndex: "img",
+          key: "img",
         },
         {
-          title: '名称',
-          dataIndex: 'name',
-          key: 'name',
+          title: "名称",
+          dataIndex: "name",
+          key: "name",
         },
-
       ],
-      tableData: [{
-        url: '',
-        name: '商品1',
-        num: '200',
-        price: '20元/个'
-      }, {
-        url: '',
-        name: '商品2',
-        num: '200',
-        price: '20元/个'
-      }, {
-        url: '',
-        name: '商品3',
-        num: '200',
-        price: '20元/个'
-      }, {
-        url: '',
-        name: '商品4',
-        num: '200',
-        price: '20元/个'
-      }, {
-        url: '',
-        name: '商品5',
-        num: '200',
-        price: '20元/个'
-      }]
-    }
-  }
-}
+      tableData: [
+        {
+          url: "",
+          name: "商品1",
+          num: "200",
+          price: "20元/个",
+        },
+        {
+          url: "",
+          name: "商品2",
+          num: "200",
+          price: "20元/个",
+        },
+        {
+          url: "",
+          name: "商品3",
+          num: "200",
+          price: "20元/个",
+        },
+        {
+          url: "",
+          name: "商品4",
+          num: "200",
+          price: "20元/个",
+        },
+        {
+          url: "",
+          name: "商品5",
+          num: "200",
+          price: "20元/个",
+        },
+      ],
+    };
+  },
+};
 </script>
 
 <style lang="less" scoped>
-
 </style>