element vue表格单选

表格内容

 <el-dialog
        :visible.sync="dialogVisible"
        :title="$t('新增批次')"
        width="50%"
        top="15vh">
        <el-form ref="lineForm" :model="lineForm" :rules="rules" label-width="100px" class="lineForm" style="display: flex;">
          <el-form-item :label="$t('计划时间')" prop="planDate" style="flex: 2;">
            <el-date-picker v-model="lineForm.planDate" :clearable="false" :start-placeholder="$t('LBL072STARTDATE')" :end-placeholder="$t('LBL072ENDDATE')" type="datetimerange" range-separator="-" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" @change="planDateChange"/>
          </el-form-item>
          <el-form-item :label="$t('单批数量')" prop="mainQty" style="flex: 1;">
            <el-input-number v-model="lineForm.mainQty" :min="1" class="input-number"/>
          </el-form-item>
          <el-button type="primary" @click="confirmSave()" style="margin-left: 20px;">保存</el-button>
        </el-form>
        <div style="text-align: right;padding-top: 40px">
          <el-input
            v-model="addSearchForm.woId"
            clearable
            :placeholder="$t('订单号')"
            style="width: 200px;"
          />
          <el-input
            v-model="addSearchForm.partNo"
            clearable
            :placeholder="$t('产品料号')"
            style="width: 200px;"
          />
          <el-button type="primary" style="margin-left: 20px;">查询</el-button>
        </div>
        <el-table
          :header-cell-style="{background:'#3eb6d8',color:'#fff'}"
          ref="multipleTable"
          :data="tableDataList"
          tooltip-effect="dark"
          style="width: 100%"
          border
          stripe
          :row-key="getRowKey"
          @selection-change="selectItem"
          @row-click="onSelectOp">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="工单号"
            prop="woId"
            width="120">
          </el-table-column>
          <el-table-column
            prop="partNo"
            label="产品料号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="partName"
            label="产品描述"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="totalQty"
            label="工单数量"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="woStatus"
            label="状态"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="releaseDate"
            label="下达时间"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>

        <div class="block" style="padding-bottom: 40px; text-align: right;">
          <el-pagination
            :current-page="pagination.page"
            :page-sizes="[2, 5, 10, 20, 30, 40]"
            :page-size="pagination.size"
            layout="total, sizes, prev, pager, next, jumper"
            class="pagination"
            :total="pagination.total"
            @size-change="handlePaginationSizeChange"
            @current-change="handlePaginationCurrentChange"
          />
        </div>

      </el-dialog>

方法

/** 保存选中的数据编号 */
getRowKey(row) {
  return row.id
},

selectItem(rows) {
  if (rows.length > 1) {
    const newRows = rows.filter((it, index) => {
      if (index == rows.length - 1) {
        this.$refs.multipleTable.toggleRowSelection(it, true);
        return true;
      } else {
        this.$refs.multipleTable.toggleRowSelection(it, false);
        return false;
      }
    });
    this.multipleSelection = newRows;
  } else {
    this.multipleSelection = rows;
  }
},

onSelectOp(row) {
  this.$refs.multipleTable.clearSelection();
  this.$refs.multipleTable.toggleRowSelection(row, true);
  this.multipleSelection = [];
  this.multipleSelection.push(row);
},