1

src/components/XyTable/index.vue

@@ -331,6 +331,7 @@ export default {
                       prop={item.prop}
                       sortable={item.sortable ?? false}
                       type={item.type}
+                      reserve-selection={item.reserveSelection}
                       selectable={item.selectable}
                       scopedSlots={item.type === 'expand' ? {
                         default(props){

src/views/customer/customer.vue

@@ -32,7 +32,7 @@
                 size="small"
                 placeholder="关键字搜索"
                 v-model="select.keyword"
-                style="width: 200px; margin-right: 10px"
+                style="width: 140px; margin-right: 10px"
               />
 
               <Button
@@ -50,6 +50,37 @@
                 "
                 >新增客户
               </Button>
+              <Button style="margin-left: 10px"
+                      v-show="!startBind && !startUnbind"
+                      type="primary"
+                      @click="startBind = true">
+                批量绑定
+              </Button>
+              <Button style="margin-left: 10px"
+                      v-show="!startBind && !startUnbind"
+                      type="primary"
+                      @click="startUnbind = true">
+                批量解绑
+              </Button>
+              <Button style="margin-left: 10px"
+                      ghost
+                      v-show="startBind || startUnbind"
+                      type="primary"
+                      @click="startUnbind = true">
+                确认选择
+              </Button>
+              <Button style="margin-left: 10px"
+                      ghost
+                      v-show="startBind || startUnbind"
+                      type="primary"
+                      @click="() => {
+                        startBind = false;
+                        startUnbind = false;
+                        $refs['table'].clearSelection();
+                        selections = [];
+                      }">
+                取消选择
+              </Button>
             </div>
           </slot>
         </lx-header>
@@ -62,6 +93,7 @@
       :list="list"
       :table-item="tableItem"
       :default-expand-all="false"
+      @selection-change="sel => selections = sel"
       @pageSizeChange="
         (e) => {
           select.page_size = e;
@@ -182,6 +214,9 @@ export default {
   },
   data() {
     return {
+      startBind: false,
+      startUnbind: false,
+      selections: [],
       select: {
         product_type_id: [],
         page: 1,
@@ -197,6 +232,13 @@ export default {
       total: 0,
       list: [],
       tableItem: [
+        {
+          type: "selection",
+          width: 42,
+          align: 'center',
+          selectable: _ => (this.startBind || this.startUnbind),
+          reserveSelection: true
+        },
         {
           type: "expand",
           expandFn: (props) => {
@@ -466,6 +508,8 @@ export default {
         this.getCustomers();
       });
     },
+
+
   },
   created() {
     this.getDisabilityLevel();
@@ -484,4 +528,12 @@ export default {
 ::v-deep .ivu-table-header thead tr th {
   text-align: center !important;
 }
+::v-deep .el-table-column--selection .cell {
+  padding-right: 10px;
+}
+</style>
+<style>
+.el-table-column--selection .cell .el-checkbox:last-of-type {
+  margin-right: 0 !important;
+}
 </style>