表格勾选操作

src/views/agent/siteServiceList.vue

@@ -10,9 +10,10 @@
             <!-- page header -->
             <div class="pageheader">
                 <div class="pageheader-left">
-                    <el-checkbox @change="toggleAllSelection">全选</el-checkbox>
-                    <span class="checked-text">共80条，已选0条</span>
-                    <GuipButton type="ignore" :btnstyle="btnInfostyleObj">批量删除</GuipButton>
+                    <el-checkbox @change="toggleAllSelection" :indeterminate="isIndeterminate" v-model="selectAll">全选</el-checkbox>
+                    <span class="checked-text">共{{ serviceList.length }}条，已选{{ selectedCount }}条</span>
+
+                    <GuipButton type="ignore" :btnstyle="btnInfostyleObj" @click="bantchDelete">批量删除</GuipButton>
                 </div>
                 <div class="pageheader-right">
                     <GuipButton type="primary" :btnstyle="btnstyleObj" @click="jumpAdd(1)">添加查重服务</GuipButton>
@@ -23,13 +24,13 @@
 
             <!-- page content -->
             <el-form>
-                <GuipTable :tableData="serviceList" ref="multipleTable" autoColumn="true" :loading="tableLoading">
-
-                    <el-table-column label="选择" width="70" header-align="center" align="center">
-                        <template slot-scope="scope">
-                            <el-checkbox @change="toggleSelection(scope.row)"></el-checkbox>
-                        </template>
-                    </el-table-column>
+                <GuipTable :tableData="serviceList" ref="multipleTable" autoColumn="true" :loading="tableLoading"
+                @selection-change="handleSelectionChange" @select="handleSelect">
+                    <el-table-column type="selection" width="100">
+                            <template slot="header">
+                                <span class="selection-header-text">选择</span>
+                            </template>
+                        </el-table-column>
 
                     <el-table-column prop="type_desc" label="服务版本"></el-table-column>
 
@@ -164,6 +165,9 @@ export default {
     },
     data() {
         return {
+            selectedRows:[],//表格选中项
+            selectAll: false,//是否全选
+            isIndeterminate: false,//全选/半选状态
             // AUTH
             token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
             //删除按钮样式
@@ -219,6 +223,11 @@ export default {
     mounted() {
         this.getSiteServiceList();
     },
+    computed: {
+        selectedCount() {
+                return this.selectedRows.length;
+            },
+    },
     methods: {
         jumpAdd(type){
             this.$router.push(this.serviceAddUrl + '?type=' + type + '&uid=' + this.uid)
@@ -226,9 +235,6 @@ export default {
         toggleAllSelection() {
             this.$refs.multipleTable.$refs.guiptable.toggleAllSelection();
         },
-        toggleSelection(row){
-            console.log(row)
-        },
         // 获取服务列表
         getSiteServiceList() {
             this.tableLoading = true
@@ -250,6 +256,10 @@ export default {
                 console.error(error, 'error')
             })
         },
+        // 批量删除
+        bantchDelete(){
+            console.log(this.selectedRows,'全部的选中项');
+        },
         onSwitchChange(row){
             row.is_display = row.is_display == 1 ? 0 : 1
 
@@ -259,6 +269,21 @@ export default {
             obj.is_display = row.is_display
             this.saveRequest('/agentnew/ajax_set_service_display_index', obj, row)
         },
+        handleSelect(selection, row) {
+            console.log('操作的行:', row);
+            console.log('当前所有选中行:', selection);
+           
+        },
+        // 处理选择变化
+        handleSelectionChange(rows) {
+            this.selectedRows = rows;
+            // 更新全选按钮状态
+            const allSelected = rows.length === this.serviceList.length;
+            const noneSelected = rows.length === 0;
+
+            this.selectAll = allSelected;
+            this.isIndeterminate = !noneSelected && !allSelected;
+        },
         // 点击价格单元格时触发
         handleEditClick(row, index, type) {
             // 关闭其他行的弹框
@@ -423,6 +448,30 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+::v-deep .el-table__header-wrapper .el-checkbox {
+    display: none;
+}
+
+/* 隐藏表头的复选框 */
+::v-deep .el-table__header-wrapper .el-checkbox {
+    display: none !important;
+}
+
+/* 确保选择文字可见 */
+::v-deep .selection-header-text {
+    display: inline-block;
+    margin-left: 8px;
+    /* 调整位置 */
+    font-size: 14px;
+    color: #606266;
+    font-weight: bold;
+}
+
+/* 调整表头单元格的padding */
+::v-deep .el-table .el-table__header th {
+    padding: 8px 0;
+    /* 根据需要调整 */
+}
 .flex-service-title{
   margin-bottom: 12px;
 }