element-ui表格el-table回顯時默認全選數據


1、html代碼

<el-table ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ 'background-color': '#F9F9F9' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="45" :selectable="selectable"> </el-table-column>
          <el-table-column prop="pictureUrl" label="商品圖片">
            <template slot-scope="scope">
              <img :src="scope.row.pictureUrl" height="50px" />
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名稱">
          </el-table-column>
          <el-table-column prop="unitPrice" label="單價(含稅)">
            <template slot-scope="scope">
              <span class="price">¥{{ scope.row.unitPrice || "0.00" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="resourcesNo" label="資源號"> </el-table-column>
          <el-table-column prop="baleNo" label="捆包號"> </el-table-column>
          <el-table-column prop="grossWeight" label="重量(噸)"> </el-table-column>
          <el-table-column prop="grossWeight" label="狀態">
            <template slot-scope="scope">
              <el-tag size="small" :type="scope.row.productState === 1 ? 'success':'info'">
                {{scope.row.productState === 1 ? '可用':'失效'}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="添加時間"> </el-table-column>
          <el-table-column prop="address" label="操作" width="100">
            <template slot-scope="scope">
              <el-button v-if="scope.row.productState === 1" size="mini" class="delete" @click="delRows(scope.row)"
                >刪除</el-button>
              <el-button v-else size="mini" class="edit" @click="delRows(scope.row)"
              >移除失效商品</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paginations" v-show="total>page.pageSize">
          <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="total"
                  :page-size="page.pageSize"
                  @current-change="pagesClick"

          >
          </el-pagination>
        </div>

2、js代碼

watch: {
    'tableData': function () {
      this.$nextTick(() => {
        this.tableData.forEach((item) => {
          if (item.productState === 1) {
            this.$refs.multipleTable.toggleRowSelection(item, true);
          }
        })
      })
    },
  },

 


免責聲明!

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



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