table表格里面實現單選功能


<el-table
          ref="finishedJobTab"
          :data="packBathTableProductFormDataList"
          v-if="product"
          :row-key="getRowKey5"
          @select="handleSelectionChange5"
          border
          style="width: 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();
        }
      }
    },

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM