采购需求处理页面表格调整

src/views/purchase/DemandSummary/index.vue

@@ -234,7 +234,13 @@
 
           <!-- <el-button type="primary" size="mini">转请购</el-button> -->
         </div>
-        <el-table
+        <vxe-toolbar ref="xToolbar1" custom>
+        </vxe-toolbar>
+
+        <vxe-table
+          id="toolbar_demo5"
+          :custom-config="{storage: true, checkMethod: checkColumnMethod}"
+          @resizable-change="resizableChangeEvent"
           v-loading="loading"
           :data="tableList" 
           :cell-style="{ borderColor: '#c0c0c0' }"
@@ -247,131 +253,133 @@
           max-height="620"
           style="font-size: 12px;"
           :cell-class-name="cellClassName"
-          @selection-change="handleSelectionChange"
-          @row-click="rowSelect"
-          @row-dblclick="doubleClick"
+          @checkbox-all="selectAllEvent"
+          @checkbox-change="handleSelectionChange"
+          @cell-click="rowSelect"
+          @cell-dblclick="doubleClick"
           ref="table"
+          :column-config="{resizable: true}"
         >
-          <el-table-column type="selection" width="60" fixed="left"/>
-          <el-table-column show-overflow-tooltip  label="序号" type="index" align="center" width="50px" fixed="left"/>
-          <!-- <el-table-column show-overflow-tooltip v-if="showColumn.status" label="行号" align="center" prop="rowNo"/> -->
-          <el-table-column show-overflow-tooltip v-if="showColumn.status" label="行状态" align="center" prop="status" width="50px" :formatter="hangStatus"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.finalBuyQty" label="最终采购量" align="center" prop="finalBuyQty" width="80px">
+          <vxe-column type="checkbox" width="40" fixed="left"/>
+          <vxe-column show-header-overflow show-overflow  title="序号" type="seq" align="center" width="50px" fixed="left"/>
+          <!-- <vxe-column show-header-overflow show-overflow v-if="showColumn.status" title="行号" align="center" field="rowNo"/> -->
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.status" title="行状态" align="center" field="status" width="50px" :formatter="hangStatus"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.finalBuyQty" title="最终采购量" align="center" field="finalBuyQty" width="80px">
             <template slot-scope="scope">
-                <el-input size="mini" :disabled="scope.row.status !== '1' || lineDisable" v-model="scope.row.finalBuyQty" @change="jilu(scope.$index)"/>
+                <el-input size="mini" :disabled="scope.row.status !== '1' || lineDisable" v-model="scope.row.finalBuyQty" @change="jilu(scope.$rowIndex)"/>
             </template>
-          </el-table-column>
-          <el-table-column show-overflow-tooltip v-if="showColumn.artificialAdjust" label="人工调整数" align="center" prop="artificialAdjust" width="50px">
+          </vxe-column>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.artificialAdjust" title="人工调整数" align="center" field="artificialAdjust" width="50px">
             <template slot-scope="scope">
               {{scope.row.artificialAdjust = scope.row.finalBuyQty - scope.row.suggestionPurchase}}
             </template>
-          </el-table-column>
-          <el-table-column show-overflow-tooltip v-if="showColumn.materialClassifyOneName" label="一级品类" align="center" prop="materialClassifyOneName" width="50"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.materialCode" label="物料编码" align="center" prop="materialCode" width="50px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.materialName" label="品名" align="center" prop="materialName" width="50px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.specification" label="规格" align="center" prop="specification" width="50px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.unit" label="单位" align="center" prop="unit" width="50"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.manufacturer" label="生产厂家/代理人" align="center" prop="manufacturer" width="80px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.demandNum" label="需求单位数" align="center" prop="demandNum" width="50px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.netDemandNum" label="总最终净需求量" align="center" prop="netDemandNum" width="80px">
+          </vxe-column>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.materialClassifyOneName" title="一级品类" align="center" field="materialClassifyOneName" width="80"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.materialCode" title="物料编码" align="center" field="materialCode" width="100px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.materialName" title="品名" align="center" field="materialName" width="100px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.specification" title="规格" align="center" field="specification" width="100px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.unit" title="单位" align="center" field="unit" width="50"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.manufacturer" title="生产厂家/代理人" align="center" field="manufacturer" width="100px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.demandNum" title="需求单位数" align="center" field="demandNum" width="50px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.netDemandNum" title="总最终净需求量" align="center" field="netDemandNum" width="80px">
             <template slot-scope="scope">
               {{scope.row.netDemandNum ? parseFloat(scope.row.netDemandNum).toFixed(2) : '0.00'}}
             </template>
-          </el-table-column>
-          <el-table-column show-overflow-tooltip v-if="showColumn.evensalesforyear" label="近1月月均需求" align="center" prop="evensalesforyear" width="50">
+          </vxe-column>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.evensalesforyear" title="近1月月均需求" align="center" field="evensalesforyear" width="50">
             <template slot-scope="scope">
               {{scope.row.evensalesforyear ? parseFloat(scope.row.evensalesforyear).toFixed(2) : '0.00'}}
             </template>
-          </el-table-column>
-          <el-table-column show-overflow-tooltip v-if="showColumn.evensalesforthrmonth" label="近3月月均需求" align="center" prop="evensalesforthrmonth" width="50">
+          </vxe-column>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.evensalesforthrmonth" title="近3月月均需求" align="center" field="evensalesforthrmonth" width="50">
             <template slot-scope="scope">
               {{scope.row.evensalesforthrmonth ? parseFloat(scope.row.evensalesforthrmonth).toFixed(2) : '0.00'}}
             </template>
-          </el-table-column>
-          <el-table-column show-overflow-tooltip v-if="showColumn.totalMonthlySales" label="总月销量" align="center" prop="totalMonthlySales" width="50">
+          </vxe-column>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.totalMonthlySales" title="总月销量" align="center" field="totalMonthlySales" width="50">
             <template slot-scope="scope">
               {{scope.row.totalMonthlySales ? parseFloat(scope.row.totalMonthlySales).toFixed(2) : '0.00'}}
             </template>
-          </el-table-column>
-          <el-table-column show-overflow-tooltip v-if="showColumn.demandCycle" label="需求可用周期" align="center" prop="demandCycle" width="50px">
+          </vxe-column>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.demandCycle" title="需求可用周期" align="center" field="demandCycle" width="50px">
             <template slot-scope="scope">
               {{scope.row.demandCycle ? parseFloat(scope.row.demandCycle).toFixed(1) : '-'}}
             </template>
-          </el-table-column>
-          <el-table-column show-overflow-tooltip v-if="showColumn.dullQut" label="呆滞量" align="center" prop="dullQut" width="50px">
+          </vxe-column>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.dullQut" title="呆滞量" align="center" field="dullQut" width="50px">
             <template slot-scope="scope">
               {{parseFloat(scope.row.dullQut).toFixed(2)}}
             </template>
-          </el-table-column>
-          <el-table-column show-overflow-tooltip v-if="showColumn.buyPeriod" label="采购周期" align="center" prop="buyPeriod" width="50px" />
-          <el-table-column show-overflow-tooltip v-if="showColumn.centralPublicStock" label="中心公共库存" align="center" prop="centralPublicStock" width="50"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.centralWarehouse" label="中心仓专属货位" align="center" prop="centralWarehouse" width="50"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.eachWarehouseStock" label="各项目仓库存" align="center" prop="eachWarehouseStock" width="50"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.commerceWarehouse" label="电商仓库" align="center" prop="commerceWarehouse"  width="50" />
-          <el-table-column show-overflow-tooltip v-if="showColumn.regionPublicStock" label="区域分仓公共库存" align="center" prop="regionPublicStock" width="50"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.buyTransit" label="采购在途" align="center" prop="buyTransit"  width="80px" />
-          <el-table-column show-overflow-tooltip v-if="showColumn.lendTransit" label="借出在途" align="center" prop="lendTransit"  width="80px" />
-          <el-table-column show-overflow-tooltip v-if="showColumn.transferTransit" label="调拨在途" align="center" prop="transferTransit"  width="80px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.stockTotal" label="库存总计" align="center" prop="stockTotal" width="80px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.minPackage" label="最小包装量" align="center" prop="minPackage"  width="80px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.minOrder" label="最小订货量" align="center" prop="minOrder"  width="80px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.minBatch" label="最小批量" align="center" prop="minBatch"  width="80px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.modifyReason" label="修改原因" align="center" prop="modifyReason" width="150px">
+          </vxe-column>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.buyPeriod" title="采购周期" align="center" field="buyPeriod" width="50px" />
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.centralPublicStock" title="中心公共库存" align="center" field="centralPublicStock" width="50"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.centralWarehouse" title="中心仓专属货位" align="center" field="centralWarehouse" width="50"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.eachWarehouseStock" title="各项目仓库存" align="center" field="eachWarehouseStock" width="50"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.commerceWarehouse" title="电商仓库" align="center" field="commerceWarehouse"  width="50" />
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.regionPublicStock" title="区域分仓公共库存" align="center" field="regionPublicStock" width="50"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.buyTransit" title="采购在途" align="center" field="buyTransit"  width="80px" />
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.lendTransit" title="借出在途" align="center" field="lendTransit"  width="80px" />
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.transferTransit" title="调拨在途" align="center" field="transferTransit"  width="80px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.stockTotal" title="库存总计" align="center" field="stockTotal" width="80px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.minPackage" title="最小包装量" align="center" field="minPackage"  width="80px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.minOrder" title="最小订货量" align="center" field="minOrder"  width="80px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.minBatch" title="最小批量" align="center" field="minBatch"  width="80px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.modifyReason" title="修改原因" align="center" field="modifyReason" width="150px">
             <template slot-scope="scope">
-                <el-input size="mini" :disabled="scope.row.status !== '1'|| lineDisable || scope.row.artificialAdjust == '0'" v-model="scope.row.modifyReason" @change="jilu(scope.$index)"/>
+                <el-input size="mini" :disabled="scope.row.status !== '1'|| lineDisable || scope.row.artificialAdjust == '0'" v-model="scope.row.modifyReason" @change="jilu(scope.$rowIndex)"/>
             </template>
-          </el-table-column>
-          <el-table-column show-overflow-tooltip v-if="showColumn.suggestionPurchase" label="建议采购量" align="center" prop="suggestionPurchase"  width="80px"/>
-          <!-- <el-table-column show-overflow-tooltip v-if="showColumn.status" label="建议净采购量" align="center" prop="suggestBuyQty" width="100px"/> -->
-          <el-table-column show-overflow-tooltip v-if="showColumn.materialClassifyTwoName" label="二级品类" align="center" prop="materialClassifyTwoName" width="120px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.materialClassifyThreeName" label="三级品类" align="center" prop="materialClassifyThreeName" width="120px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.materialClassifyFourName" label="四级品类" align="center" prop="materialClassifyFourName" width="120px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.buyerName" label="采购员" align="center" prop="buyerName" width="150px">
+          </vxe-column>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.suggestionPurchase" title="建议采购量" align="center" field="suggestionPurchase"  width="80px"/>
+          <!-- <vxe-column show-header-overflow show-overflow v-if="showColumn.status" title="建议净采购量" align="center" field="suggestBuyQty" width="100px"/> -->
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.materialClassifyTwoName" title="二级品类" align="center" field="materialClassifyTwoName" width="120px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.materialClassifyThreeName" title="三级品类" align="center" field="materialClassifyThreeName" width="120px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.materialClassifyFourName" title="四级品类" align="center" field="materialClassifyFourName" width="120px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.buyerName" title="采购员" align="center" field="buyerName" width="150px">
             <template slot-scope="scope">
                 <el-input readonly :disabled="scope.row.status !== '1' || lineDisable" size="mini" v-model="scope.row.buyerName">
-                  <el-button size="mini" :disabled="scope.row.status !== '1' || lineDisable" slot="append" icon="el-icon-more" @click="chooseSon(scope.$index, 'CONTACTS_PARAM', true, '明细采购员')"></el-button>
+                  <el-button size="mini" :disabled="scope.row.status !== '1' || lineDisable" slot="append" icon="el-icon-more" @click="chooseSon(scope.$rowIndex, 'CONTACTS_PARAM', true, '明细采购员')"></el-button>
                 </el-input>
             </template>
-          </el-table-column>
-          <el-table-column show-overflow-tooltip v-if="showColumn.purchaseOrgName" label="默认采购组织" align="center" prop="purchaseOrgName" width="150px">
+          </vxe-column>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.purchaseOrgName" title="默认采购组织" align="center" field="purchaseOrgName" width="150px">
             <!-- <template slot-scope="scope">
                 <el-input readonly :disabled="scope.row.status !== '1' || lineDisable" size="mini" v-model="scope.row.purchaseOrgName">
                   <el-button size="mini" :disabled="scope.row.status !== '1' || lineDisable" slot="append" icon="el-icon-more" @click="chooseSon(scope.$index, 'ORG_PARAM', true, '明细默认采购组织')"></el-button>
                 </el-input>
             </template> -->
-          </el-table-column>
-          <el-table-column show-overflow-tooltip v-if="showColumn.validityPeriod" label="有效期" align="center" prop="validityPeriod"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.validityPeriodUnit" label="有效期单位" align="center" prop="validityPeriodUnit" width="80px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.businessType" label="业务类型" align="center" prop="businessType" :formatter="formatterBusinessType"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.safetyStock" label="安全库存量" align="center" prop="safetyStock" width="80px">
+          </vxe-column>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.validityPeriod" title="有效期" align="center" field="validityPeriod"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.validityPeriodUnit" title="有效期单位" align="center" field="validityPeriodUnit" width="80px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.businessType" title="业务类型" align="center" field="businessType" :formatter="formatterBusinessType"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.safetyStock" title="安全库存量" align="center" field="safetyStock" width="80px">
             <template slot-scope="scope">
               {{scope.row.safetyStock ? parseFloat(scope.row.safetyStock).toFixed(2) : '0.00'}}
             </template>
-          </el-table-column>
-          <el-table-column show-overflow-tooltip v-if="showColumn.billSource" label="单据来源" align="center" prop="billSource" :formatter="formatterSource"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.registrant" label="注册人" align="center" prop="registrant" width="120px"/>
-          <!-- <el-table-column label="可用量" align="center" prop="qty"/> -->
-          <el-table-column show-overflow-tooltip v-if="showColumn.buyDiscrepancy" label="总需与终采差异" align="center" prop="buyDiscrepancy" width="80px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.forecastClassification" label="集团预测分类" align="center" prop="forecastClassification" width="80px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.centerBinPossession" label="中心仓占有量" align="center" prop="centerBinPossession" width="80px"/>
-          <el-table-column show-overflow-tooltip v-if="showColumn.centralWarehouseAvailable" label="中心仓可用量" align="center" prop="centralWarehouseAvailable" width="80px"/>
-          <!-- <el-table-column label="物料类别" align="center" prop="materialCategory" width="150px"/> -->
-          <!-- <el-table-column label="业务部门" align="center" prop="departmentName" width="150px"/> -->
-          <!-- <el-table-column show-overflow-tooltip v-if="showColumn.status" label="需求单位" align="center" prop="demandUnit"/> -->
-          <el-table-column show-overflow-tooltip v-if="showColumn.puManagerAuditor" label="采购经理审核人" align="center" prop="puManagerAuditor" width="120px"/>
-          <el-table-column
+          </vxe-column>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.billSource" title="单据来源" align="center" field="billSource" :formatter="formatterSource"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.registrant" title="注册人" align="center" field="registrant" width="120px"/>
+          <!-- <vxe-column title="可用量" align="center" field="qty"/> -->
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.buyDiscrepancy" title="总需与终采差异" align="center" field="buyDiscrepancy" width="80px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.forecastClassification" title="集团预测分类" align="center" field="forecastClassification" width="80px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.centerBinPossession" title="中心仓占有量" align="center" field="centerBinPossession" width="80px"/>
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.centralWarehouseAvailable" title="中心仓可用量" align="center" field="centralWarehouseAvailable" width="80px"/>
+          <!-- <vxe-column title="物料类别" align="center" field="materialCategory" width="150px"/> -->
+          <!-- <vxe-column title="业务部门" align="center" field="departmentName" width="150px"/> -->
+          <!-- <vxe-column show-header-overflow show-overflow v-if="showColumn.status" title="需求单位" align="center" field="demandUnit"/> -->
+          <vxe-column show-header-overflow show-overflow v-if="showColumn.puManagerAuditor" title="采购经理审核人" align="center" field="puManagerAuditor" width="120px"/>
+          <vxe-column
           fixed="right"
-          label="操作"
+          title="操作"
           align="center"
-          width="100"
+          width="50"
           >
           <template slot-scope="scope">
             <el-button type="text" size="mini" @click="check(scope.row)">查看</el-button>
           </template>
-        </el-table-column>
-        </el-table>
+        </vxe-column>
+        </vxe-table>
 
-        <el-button size="mini" style="position: absolute;left: 20px;bottom: 20px;" @click="tols.open = true">隐藏列</el-button>
+        <!-- <el-button size="mini" style="position: absolute;left: 20px;bottom: 20px;" @click="tols.open = true">隐藏列</el-button> -->
 
         <colTol :isVisible.sync="tols.open" @reDraw="reDraw" :showColumn.sync="showColumn" :arrs.sync="arrs"/>
 
@@ -428,7 +436,7 @@ export default {
         open: false
       },
       hangStatus(row) {
-        switch (row.status) {
+        switch (row.row.status) {
           case '0':
             return '需补货'
           case '1':
@@ -444,7 +452,7 @@ export default {
         }
       },
       formatterBusinessType(row) {
-        switch (row.businessType) {
+        switch (row.row.businessType) {
           case 'ZQBH':
             return '周期备货'
           case 'FXXQ':
@@ -462,7 +470,7 @@ export default {
         }
       },
       formatterSource(row) {
-        switch (row.billSource) {
+        switch (row.row.billSource) {
           case '1':
             return '手工导入'
           case '2':
@@ -543,15 +551,34 @@ export default {
     }
   },
   created() {
-    this.getList(this.queryParams)
+    this.$nextTick(() => {
+      // 手动将表格和工具栏进行关联
+      this.$refs.table.connect(this.$refs.xToolbar1)
+      this.getList(this.queryParams)
+    })
   },
   methods: {
+    checkColumnMethod ({ column }) {
+      if (column.property === 'role') {
+        return false
+      }
+      return true
+    },
+    resizableChangeEvent () {
+      const columns = this.$refs.table.getColumns()
+      const customData = columns.map(column => {
+        return {
+          width: column.renderWidth
+        }
+      })
+      console.log(customData)
+    },
     reDraw() {
-      this.$refs.table.doLayout();
+      // this.$refs.table.doLayout();
     },
     // 单元格标红
     cellClassName({row, column, rowIndex, columnIndex}) {
-      if(column.label == "需求可用周期" && Number(row.demandCycle) > 1.5 ) {
+      if(column.title == "需求可用周期" && Number(row.demandCycle) > 1.5 ) {
         return 'success-row';
       }
     },
@@ -640,7 +667,15 @@ export default {
         this.loading = false
       })
     },
-    handleSelectionChange(selection) {
+    selectAllEvent({checked}) {
+      const selection = this.$refs.table.getCheckboxRecords()
+      console.log('选中', selection)
+      this.allSelection = selection
+      this.ids = selection.map(item => item.demandItemId)
+      console.log('选中数组', this.ids.join())
+    },
+    handleSelectionChange({checked}) {
+      const selection = this.$refs.table.getCheckboxRecords()
       console.log('选中', selection)
       this.allSelection = selection
       this.ids = selection.map(item => item.demandItemId)
@@ -674,7 +709,7 @@ export default {
       this.rowDetail = row
       this.disable = true
     },
-    doubleClick(row) {
+    doubleClick({row}) {
       this.isList = false
       this.page = 'check'
       this.rowDetail = row
@@ -682,7 +717,8 @@ export default {
     },
     // 表格选中数据
     rowSelect(row) {
-      this.$refs.table.toggleRowSelection(row);
+      // console.log(row)
+      this.$refs.table.toggleCheckboxRow(row.row);
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
@@ -962,13 +998,13 @@ export default {
   margin-top: 10px;
   text-align: right;
 }
-::v-deep .el-table__row > td {
+::v-deep .vxe-body--row > td {
   border-right: none;
 }
  ::v-deep .el-card .el-form-item {
   margin-bottom: 3px;
 }
-::v-deep .el-table__row .success-row {
+::v-deep .vxe-body--row .success-row {
   background-color: #ff8a8a!important;
 }
 </style>

src/views/purchase/PurchaseDemandList/add.vue

@@ -184,6 +184,8 @@
           show-overflow="tooltip"
           keep-source
           beautifyTable
+          show-summary
+          @summary-method="jisuan"
           :checkbox-config="{highlight: true, trigger: 'row'}"
           :edit-config="{trigger: 'click', mode: 'row'}"
           :validConfig="{autoPos: true}">
@@ -1843,6 +1845,9 @@ export default {
         }
       })
     },
+    jisuan({columns, data}) {
+      console.log('生效了吗', {columns, data})
+    }
   }
 }
 </script>