表格选择

src/components/newTable/NewTable.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-18 16:30:17
- * @LastEditTime: 2021-09-26 14:53:37
+ * @LastEditTime: 2021-09-26 15:19:32
  * @LastEditors: Please set LastEditors
  * @Description: 表格的封装
  * @FilePath: \hyyfClient\src\components\NewTable.vue
@@ -18,7 +18,7 @@
       </div>
     </div>
     <div class="content">
-      <el-table :data="listData" border :height="height">
+      <el-table :data="listData" border :height="height" @selection-change="handleSelectionChange">
 
         <el-table-column 
           v-if="shows.showSelect" 
@@ -70,12 +70,16 @@ export default {
       default: 500
     }
   },
+  methods: {
+    handleSelectionChange(rows) {
+      this.$emit('selectionChange', rows)
+    }
+  },
 }
 </script>
 <style scoped>
   .bio-table {
     margin-top: 20px;
-    border: 1px solid rgba(228, 228, 228, 1);
   }
 
   /* 标题栏 */
@@ -88,6 +92,8 @@ export default {
     display: flex;
     justify-content: space-between;
     height: 50px;
+    border: 1px solid rgba(235, 238, 245, 1);
+    border-bottom: 0;
   }
   /* 左边 */
   .header>.left {

src/views/BioSafety/StiflingAdmin.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-16 11:27:35
- * @LastEditTime: 2021-09-26 14:55:04
+ * @LastEditTime: 2021-09-26 15:23:17
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \hyyfClient\src\views\BioSafety\StiflingAdmin.vue
@@ -12,7 +12,12 @@
     <query-conditions :formItems="formItems" :propFormData="propFormData" @getQueryParams="handleQuery"></query-conditions>
 
     <!-- 表格 -->
-    <new-table :title="title" :listData="listData" :tableItems="tableItems" :shows="tableShows" :height="height"></new-table>
+    <new-table :title="title" :listData="listData" :tableItems="tableItems" :shows="tableShows" :height="height" @selectionChange="handleSelectChange">
+      <!-- 按钮 -->
+      <template v-slot:handler="scope">
+        <el-button @click="handleClick(scope.row)">删除</el-button>
+      </template>
+    </new-table>
   </div>
 </template>
 
@@ -34,7 +39,15 @@ export default {
       formItems: [], // 传给 QueryCondition 组件的 formItems
       propFormData: {}, // 传给 QueryCondition 组件的 propFormData
       title: '', // 传给 BioTable 组件的 title
-      listData: [], // 传给 BioTable 组件的表格展示的值 listData
+      // listData: [], // 传给 BioTable 组件的表格展示的值 listData
+      listData: [
+        {
+          place: '一一一',
+          startTime: '2222',
+          endTime: '3333',
+          long: '4444'
+        }
+      ],
       tableItems: [], // 传给 BioTable 组件的表格的列表 tableItems
       tableShows: {},
       height: 550
@@ -51,6 +64,12 @@ export default {
     // 获取查询条件
     handleQuery(params) {
       console.log(params)
+    },
+    handleClick(row) {
+      console.log(row)
+    },
+    handleSelectChange(rows) {
+      console.log(rows)
     }
   },
 }