推荐订阅源

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