list添加批量操作功能

src/components/List.vue

@@ -2,8 +2,36 @@
   <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>
+      <span  v-if="isShowCheckbox">
+      <el-button type="info" size="small" @click="isShowCheckbox=false">取消操作</el-button>
+      <el-button type="danger"  size="small" @click="handleMultipleDelete">批量删除</el-button>
+      <el-select
+        @change="handleMultipleStatusChange"
+        v-model="status"
+        size='medium'
+        placeholder="批量修改状态"
+        style="margin-left: 30px">
+        <el-option
+          v-for="item in statusOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      <el-select
+        @change="handleMultipleAssignmentChange"
+        v-model="assignment"
+        size='medium'
+        placeholder="批量修改负责人"
+        style="margin-left: 30px">
+        <el-option
+          v-for="item in assignmentOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      </span>
     </div>
     <el-table
       :data="listData"
@@ -67,26 +95,64 @@ export default {
   props: {
     listData: Array,
     total: Number,
+    statusOptions: {
+      type: Array,
+      default() {
+        return [
+          {
+            label: '未分配',
+            value: 1,
+          },
+          {
+            label: '未完成',
+            value: 2,
+          },
+          {
+            label: '已完成',
+            value: 3,
+          },
+          {
+            label: '已关闭',
+            value: 4,
+          }];
+      },
+    },
+    assignmentOptions: {
+      type: Array,
+      default() {
+        return [
+          {
+            label: '组员A',
+            value: 1,
+          },
+          {
+            label: '组员B',
+            value: 2,
+          },
+          {
+            label: '组员C',
+            value: 3,
+          },
+          {
+            label: '组员D',
+            value: 4,
+          }];
+      },
+    },
   },
   data() {
     return {
       isShowCheckbox: false,
       pageSize: 10,
       selectedId: [],
+      status: null,
+      assignment: null,
     };
   },
   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 = [];
@@ -95,6 +161,24 @@ export default {
       });
       this.selectedId = tempArray;
     },
+    // 分页切换事件
+    handleCurrentChange(currentPage) {
+      console.log(currentPage);
+      this.$emit('current-change', currentPage);
+    },
+    // 批量删除
+    handleMultipleDelete() {
+      console.warn('deleteMultiply');
+      this.$emit('multiple-delete', this.selectedId);
+    },
+    // 批量修改状态
+    handleMultipleStatusChange() {
+      this.$emit('multiple-status-change', this.selectedId);
+    },
+    // 批量修改分配人
+    handleMultipleAssignmentChange() {
+      this.$emit('multiple-assignment-change', this.selectedId);
+    },
   },
 };
 </script>

src/element-plus.ts

@@ -11,9 +11,8 @@ import {
   ElTableColumn,
   ElPagination,
   ElButton,
-  ElDropdown,
-  ElDropdownItem,
-  ElDropdownMenu,
+  ElSelect,
+  ElOption,
 } from 'element-plus';
 
 export const Components = [
@@ -29,9 +28,8 @@ export const Components = [
   ElTableColumn,
   ElPagination,
   ElButton,
-  ElDropdown,
-  ElDropdownItem,
-  ElDropdownMenu,
+  ElSelect,
+  ElOption,
 ];
 
 export const Plugins = [];