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