首页 > 技术文章 > table表格里面实现单选功能

panshao51km-cn 原文

<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();
        }
      }
    },

  

生前无需久睡,死后自会长眠,努力解决生活中遇到的各种问题,不畏将来,勇敢面对,加油,你是最胖的,哈哈哈

推荐阅读