新增TableList footer slot

src/components/TableList.vue

@@ -47,6 +47,9 @@
       </el-table>
     </div>
     <div class="table-list-ft">
+      <div>
+        <slot name="footer"></slot>
+      </div>
       <el-pagination
         class="table-list-pagination"
         layout="total, prev, pager, next, sizes, jumper"
@@ -188,6 +191,9 @@ export default {
   flex: 1;
 }
 .table-list-ft {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 .table-list-pagination {
   padding: 10px 0;

src/pages/content-manage/ads/index.vue

 <template>
   <div class="ads page_container">
-    <table-list v-bind="tableOptions" ref="tableList">
+    <table-list v-bind="tableOptions" ref="tableList" @selection-change="handleSelectionChange">
       <template #header-aside>
         <el-button type="primary" size="mini" @click="handleCreate">新建广告</el-button>
       </template>
@@ -34,6 +34,10 @@
       <template v-slot:top-status="{ row }">
         <el-switch :active-value="1" :inactive-value="0" v-model="row.is_top"></el-switch>
       </template>
+
+      <template #footer>
+        <el-button size="mini" :disabled="!multipleSelection.length" @click="handleRemove">删除</el-button>
+      </template>
     </table-list>
     <el-drawer :visible.sync="drawerVisible" size="1100px" :destroy-on-close="true">
       <template slot="title">
@@ -92,7 +96,8 @@ export default {
         details: {}
       },
       drawItem: '',
-      dialogVisible: false
+      dialogVisible: false,
+      multipleSelection: []
     }
   },
   computed: {
@@ -128,6 +133,7 @@ export default {
           }
         ],
         columns: [
+          { type: 'selection' },
           { prop: 'image_url', label: '图片', slots: 'image' },
           { prop: 'id', label: '广告ID', slots: 'table-id' },
           { prop: 'title', label: '标题' },
@@ -162,6 +168,12 @@ export default {
         this.$message.success('更改状态成功')
       })
     },
+    // 选择
+    handleSelectionChange(value) {
+      this.multipleSelection = value
+    },
+    // 删除
+    handleRemove() {},
     handleCreate() {
       this.drawFormOptions.type = 'create'
       this.drawerVisible = true