list添加批量操作功能

src/components/List.vue

@@ -1,31 +1,38 @@
 <template>
-  <div class="table">
+  <div style="width: 100%">
+    <div>
+      <el-button type="primary"  v-if="!isShowCheckbox" size="small" @click="showCheckbox">批量操作</el-button>
+      <el-button type="info" v-if="isShowCheckbox" size="small" @click="isShowCheckbox=false">取消操作</el-button>
+      <el-button type="danger" v-if="isShowCheckbox" size="small" @click="handleDeleteMultiply">批量删除</el-button>
+    </div>
     <el-table
       :data="listData"
+      @selection-change="handleSelectionChange"
       style="width: 100%">
       <el-table-column
         v-if="isShowCheckbox"
         type="selection"
-        width="55">
+        width="60">
       </el-table-column>
       <el-table-column
         prop="projectCode"
         label="编号"
-        width="150">
+        width="180">
       </el-table-column>
       <el-table-column
         prop="title"
+        min-width="180"
         label="标题">
       </el-table-column>
       <el-table-column
         prop="assignment"
         label="优先级"
-        width="150">
+        width="180">
       </el-table-column>
       <el-table-column
         prop="status"
         label="状态"
-        width="150">
+        width="180">
       </el-table-column>
       <el-table-column
         prop="assignment"
@@ -47,7 +54,7 @@
       style="display: flex;flex-direction: row;justify-content: center;margin-top: 20px"
       background
       @current-change="handleCurrentChange"
-      page-size="10"
+      :page-size="pageSize"
       layout="prev, pager, next"
       :total="total">
     </el-pagination>
@@ -60,13 +67,34 @@ export default {
   props: {
     listData: Array,
     total: Number,
-    isShowCheckbox: Boolean,
+  },
+  data() {
+    return {
+      isShowCheckbox: false,
+      pageSize: 10,
+      selectedId: [],
+    };
   },
   methods: {
+    showCheckbox() {
+      this.isShowCheckbox = true;
+    },
     handleCurrentChange(currentPage) {
       console.log(currentPage);
       this.$emit('current-change', currentPage);
     },
+    handleDeleteMultiply() {
+      console.warn('deleteMultiply');
+      this.$emit('multiple-delete', this.selectedId);
+    },
+    handleSelectionChange(val) {
+      console.warn(val);
+      const tempArray = [];
+      val.forEach((item) => {
+        tempArray.push(item.projectCode);
+      });
+      this.selectedId = tempArray;
+    },
   },
 };
 </script>

src/components/RightForm.vue

@@ -16,7 +16,7 @@ export default {
   name: 'RightForm',
   data() {
     return {
-      isFormShow: true,
+      isFormShow: false,
     };
   },
   methods: {

src/element-plus.ts

@@ -10,6 +10,10 @@ import {
   ElTable,
   ElTableColumn,
   ElPagination,
+  ElButton,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
 } from 'element-plus';
 
 export const Components = [
@@ -24,6 +28,10 @@ export const Components = [
   ElTable,
   ElTableColumn,
   ElPagination,
+  ElButton,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
 ];
 
 export const Plugins = [];

src/views/Project/BugList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="content">
     <button @click="showRightForm">from test</button>
     <div></div>
     <List
@@ -91,7 +91,4 @@ export default {
 </script>
 
 <style scoped>
-.container{
-  width: 100%;
-}
 </style>

src/views/ProjectContainer.vue

@@ -29,5 +29,13 @@ export default {
   margin-left: 42px;
   min-height: 60vh;
 }
-
+.content{
+  width: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+}
 </style>