勾选

src/components/Pagination/index.vue

@@ -33,7 +33,7 @@ const props = defineProps({
   pageSizes: {
     type: Array,
     default() {
-      return [10, 20, 30, 50]
+      return [10, 20, 30, 50,100,150,200]
     }
   },
   // 移动端页码按钮的数量端默认值5

src/views/components/ListPage/Table.vue

@@ -80,7 +80,7 @@
 </template>
 <script setup>
 import { ref } from 'vue'
-
+import { provide,inject } from 'vue'
 const props = defineProps({
     column: {
         type: Object,
@@ -118,10 +118,12 @@ const props = defineProps({
 const ids = ref([])
 const dialogVisible = ref(false)
 const images = ref([]);
+const injects = inject('selectChange');
+
 /** 多选框选中数据 */
-const handleSelectionChange = (selection) => {
+const handleSelectionChange = (selection,row) => {
     console.log('selection', selection);
-
+    injects(selection)
     ids.value = selection.map(item => item[props.tableKey]);
     console.log('ids', ids);
 

src/views/components/ListPage/index.vue

@@ -10,6 +10,7 @@
             <Table :isScope="isScope" :tableKey="tableKey" ref="tableRef" :column="tableColumn" :data="tableData.list" :loading="loading" :scopeBtns="scopeBtns" :isSelect="isSelect" />
         </div>
         <div class="pagination-div">
+            <slot name="footerLeft"></slot>
             <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="queryParams.pageNum"
                 v-model:limit="queryParams.pageSize" @pagination="getList" />
         </div>
@@ -64,10 +65,12 @@ const props = defineProps({
     isScope:{
         type: Boolean,
         default: true
-    }
+    },
 })
 const tabsValue = ref('2')
 
+
+
 const queryParams = reactive({
     pageNum: 1,
     pageSize: 10

src/views/finance/wallet/index.vue

@@ -10,7 +10,18 @@
             </el-row>
         </div>
         <ListPage :column="listPageData.tableColumn" :tableApi="listPageData.tableApi" :isSelect="listPageData.isSelect"
-            :scopeBtns="listPageData.scopeBtns" :searchBtns="listPageData.searchBtns" ref="userTableRef" :isScope="false"/>
+            :scopeBtns="listPageData.scopeBtns" :searchBtns="listPageData.searchBtns" ref="userTableRef" :isScope="false" >
+        <template #footerLeft>
+            <el-row :gutter="20">
+                <el-col :span="4">
+                    <div class="card-title">总金额: {{ totalMoney }}</div>
+                </el-col>
+                <el-col :span="4">
+                    <div class="card-title">可提现金额: {{ balanceMoney }}</div>
+                </el-col>
+            </el-row>
+        </template>
+        </ListPage>
     </div>
 </template>
 
@@ -18,6 +29,7 @@
 import { ref } from 'vue';
 import ListPage from '@/views/components/ListPage/index.vue';
 import { list, walletTotal } from "@/api/finance/wallet.js";
+import { provide,inject } from 'vue'
 const { proxy } = getCurrentInstance();
 const userTableRef = ref();
 const listPageData = reactive({
@@ -99,10 +111,36 @@ const listPageData = reactive({
         },
     ],
     tableApi: list,//接口地址
-    isSelect: false,//是否勾选
-    scopeBtns: []
+    isSelect: true,//是否勾选
+    scopeBtns: [],
+
 })
 
+const selectList = ref([]);
+
+//总金额
+const totalMoney = computed(() => {
+    let total = 0;
+    selectList.value.forEach((item) => {
+        total += Number(item.totalAmount);
+    });
+    return total;
+});
+//可提现金额
+const balanceMoney = computed(() => {
+    let total = 0;
+    selectList.value.forEach((item) => {
+        total += Number(item.balance);
+    });
+    return total;
+});
+const selectChange = (rows) => {
+console.log("TCL: selectChange -> rows", rows)
+selectList.value = rows;
+}
+
+provide('selectChange',selectChange)
+
 const cardList = [
     {
         name: '总金额',