1、html代码
<el-table ref="multipleTable":data="tableData"style=" 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); } }) }) }, },