完成数据库增删改

src/components/MyTable/index.vue

@@ -2,14 +2,18 @@
   <div class="table-box">
     <el-table class="table-el" :data="tableData" style="background-color: transparent;">
       <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label" :width="column.width">
-      <div v-if="column.prop=='operationDelete'">
-        <button class="imgOperationDelete"></button>
-      </div>
-      <div v-if="column.prop=='operationEdit'">
-        <button class="imgOperationEdit"></button>
-      </div>
+        <template slot-scope="scope">
+          <div v-if="column.prop=='operationDelete'">
+            <button class="imgOperationDelete" @click="handleDelete(scope.row[column.prop])"></button>
+          </div>
+          <div v-if="column.prop=='operationEdit'">
+            <button class="imgOperationEdit" @click="handleEdit(scope.row)"></button>
+          </div>
+          <div v-if="column.prop!=='operationDelete' && column.prop!=='operationEdit'">{{scope.row[column.prop]}}</div>
+        </template>
       </el-table-column>
     </el-table>
+    <button class="imgOperationAdd" @click="handleAdd()"></button>
   </div>
 </template>
 
@@ -24,6 +28,9 @@ export default {
       type: Array,
       required: true
     },
+    handleDelete: Function,
+    handleEdit: Function,
+    handleAdd: Function,
   }
 };
 </script>
@@ -45,6 +52,26 @@ export default {
   height: 20px;
   width: 20px;
 }
+.flex-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh; /* or any other height */
+}
+.imgOperationAdd{
+  background-image: url(../../assets/add.png);
+  background-color:transparent;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-size: 100% 100%;
+  height: 20px;
+  width: 20px;
+  display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
 
 .el-table__header-wrapper,.el-table__body-wrapper,.el-table__cell,tr {
   background-color: transparent !important;
@@ -86,7 +113,7 @@ tbody tr {
   background-color: transparent;
   overflow: auto;
   width: 70vw;
-  height: 70vh;
+  height: 65vh;
 }
 
 </style>

src/components/TabList/index.vue

@@ -16,7 +16,9 @@
         <vue-scroll class="tab-content" :class="tabClass" v-if="activeTabSettings === 0"
           :style="{ height: '85vh', marginLeft: '-1.4vw', marginTop: '5vh' }">
           <div class="tab-detail">
-            <my-table class="my-tab" :columns="issueColumns" :table-data="issueTableData"></my-table>
+            <my-table class="my-tab" :columns="issueColumns" :table-data="issueTableData"
+            :handleDelete="handleDeleteCard" :handleEdit="handleEditCard"
+            :handleAdd="handleAddCard"></my-table>
           </div>
           <div class="item-detail">
             <div class="detail-text">卡号配置</div>
@@ -259,6 +261,29 @@ export default {
   updated() {
   },
   methods: {
+    handleDeleteCard(card_id) {
+      // Your delete logic here
+      console.log('Deleting card',card_id);
+      var strSql = 'delete from dat_card where card_id='+card_id;
+      console.log(strSql);
+      var Promise1 = this.exesql(strSql);
+      console.log('sql result cards', Promise1);
+      this.showCardList();
+    },
+    handleAddCard()
+    {
+      console.log('add');
+      this.valueCardId = '0010000000001'
+      this.valueCardType = '人卡'
+      this.valueBattery = '45%'
+    },
+    handleEditCard(card) {
+      // Your delete logic here
+      console.log('Editing card', card, card.card_id, card.card_type, card.battery);
+      this.valueCardId = card.card_id
+      this.valueCardType = card.card_type
+      this.valueBattery = card.battery
+    },
     clickCancel: function() {
       console.log('Cancel button clicked');
       // Add any cancellation logic here
@@ -269,6 +294,7 @@ export default {
       console.log(strSql);
       var Promise1 = this.exesql(strSql);
       console.log('sql result cards', Promise1);
+      this.showCardList();
 
       // Add any cancellation logic here
     },
@@ -319,7 +345,7 @@ export default {
             console.log(result);
             result.forEach((item) => {
             this.issueTableData.push(
-              { card_id: item.card_id, card_type: item.card_type_id == '1' ? '人卡':'车卡', battery: '45%', operation: '删除' }
+              { card_id: item.card_id, card_type: item.card_type_id == '1' ? '人卡':'车卡', battery: '45%', operationDelete: item.card_id, operationEdit: item.card_id }
             )})
             // Process result here
           });