zoukankan      html  css  js  c++  java
  • table表格里面实现单选功能

    <el-table
              ref="finishedJobTab"
              :data="packBathTableProductFormDataList"
              v-if="product"
              :row-key="getRowKey5"
              @select="handleSelectionChange5"
              border
              style=" 100%; margin: auto"
            >
              <el-table-column
                type="selection"
                width="55"
                :reserve-selection="true"
                v-if="product"
              >
              </el-table-column>
              <el-table-column
                type="index"
                width="70"
                label="序号"
                v-if="product"
              ></el-table-column>
              <el-table-column
                :resizable="true"
                prop="finishedProductCode"
                label="编号"
                v-if="product"
              >
                <template slot-scope="scope"
                  >{{ scope.row.finishedProductCode }}
                </template>
              </el-table-column>
              <el-table-column
                :resizable="true"
                prop="productName"
                label="名称"
                v-if="product"
              >
                <template slot-scope="scope"
                  >{{ scope.row.productName }}
                </template>
              </el-table-column>
              <el-table-column
                :resizable="true"
                prop="specification"
                label="规格"
                v-if="product"
              >
              </el-table-column>
              <el-table-column
                :resizable="true"
                prop="batchNumber"
                label="批号"
                v-if="product"
              >
                <template slot-scope="scope">{{ scope.row.batchNumber }}</template>
              </el-table-column>
              <el-table-column
                :resizable="true"
                prop="periodValidity"
                label="有效期至"
                v-if="product"
              >
                <template slot-scope="scope">{{ scope.row.periodValidity }}</template>
              </el-table-column>
              <el-table-column
                :resizable="true"
                prop="numberCases"
                label="件数"
                v-if="product"
              >
                <template slot-scope="scope">{{ scope.row.numberCases }}</template>
              </el-table-column>
              <el-table-column
                :resizable="true"
                prop="actualWeightNumber"
                label="重量/数量"
                v-if="product"
              >
                <template slot-scope="scope"
                  >{{ scope.row.actualWeightNumber }}
                </template>
              </el-table-column>
            </el-table>
    

      

    方法为

    async handleSelectionChange5(selection, row) {
          this.radioSelection1 = [row]
          this.packageMaterialAndProduct = false
          this.materialPackage = false
          this.$refs.finishedJobTab.clearSelection();
          if(selection.length == 0) return ;
          this.$refs.finishedJobTab.toggleRowSelection(row, true)
          this.packageMaterialAndProduct = true
          this.productPackage = true
          let qualityState = "";
          if(this.packageTableTrayFormDataList.length == 0){
            let data = await initQueryPackage(
              this.page9.currentPage,
              this.page9.pageSize,
              qualityState,
              row.storageRealTimeId,
              this.formData5.packageSource
            );
            
            if (data.code == 20000) {
              this.packageProductInfoTableFormDataList = data.data.rows;
              this.page9.total = data.data.total;
              // this.$refs["finishedJobTab"].clearSelection();
            }
          }else if(this.packageTableTrayFormDataList.length > 0){
            console.log(111)
            this.packageTableTrayFormDataList.forEach((item)=>{
              console.log(item)
              qualityState = item.qualityCondition 
            })
            let data = await initQueryPackage(
              this.page9.currentPage,
              this.page9.pageSize,
              qualityState,
              row.storageRealTimeId,
              this.formData5.packageSource
            );
            if (data.code == 20000) {
              this.packageProductInfoTableFormDataList = data.data.rows;
              this.page9.total = data.data.total;
              // this.$refs["finishedJobTab"].clearSelection();
            }
          }
        },
    

      

    生前无需久睡,死后自会长眠,努力解决生活中遇到的各种问题,不畏将来,勇敢面对,加油,你是最胖的,哈哈哈
  • 相关阅读:
    python入学代码
    python安装和pycharm安装与笔记
    python预习day1
    python-tyoira基本
    Typora基础
    学习一下saltstack 服务器批量管理
    消息队列与kafka
    消息队列rabbitmq
    redis数据库在linux上的学习
    蓝绿部署、滚动发布、灰度发布的介绍以及最佳实践
  • 原文地址:https://www.cnblogs.com/panshao51km-cn/p/14006115.html
Copyright © 2011-2022 走看看