element-ui表格el-table回显时默认全选数据

摘要:
1、html代码˂el-table-columntype="selection"width="45"

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

免责声明:文章转载自《element-ui表格el-table回显时默认全选数据》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇记一次Arcgis Server10.2许可过期导致发布图层失败C# 没落了吗?下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

官方online ddl

一、5.6版本online DDL 操作 In Place Rebuilds Table Concurrent DML Only Modifies Metadata 说明 add/create secondary index yes No yes* no 当表上有FULLTEXT索引除外,需要锁表,阻塞写 drop index yes no y...

文本超过长度后隐藏,显示省略号

table{   table-layout:fixed; } td{    white-space:nowrap;   overflow:hidden;   text-overflow:ellipsis; }   在table和td分别新增这几个样式就可以了,效果如下: 本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式: 1....

GPT转MBR

故事背景: 一个朋友说他的移动硬盘在有的电脑有打的开,在有的上面打不开。我问是不是在win7上打的开,但在单位的windows xp上打不开? 把盘拿来一看,的确是这个问题。应该是在win7上分的GTP分区,windows xp不识别。 目标: 将GPT分区转为MBR 步骤: 先查看当前盘的分区: ➜ ~ sudo fdisk /dev/sdb Wel...

JAVA Swing开发单机版项目

一、序   最近公司做的项目里出现了一个新的需求,项目大部分是为金融业定制开发的数据集成平台,包括数据的采集,处理,使用。   数据的采集方式不固定,有机构化数据,有非结构话数据,还有附件等其它文件形式。   对于采集端,大部分要求具备硬件服务器架设能力,这时就出现了一个问题,有些采集端是不具备硬件服务器架设能力的,或者主观上不愿意架设,   要求公司拿...

phoenix 索引实践

准备工作    创建测试表    CREATE TABLE my_table ( rowkey VARCHAR NOT NULL PRIMARY KEY, v1 VARCHAR, v2 VARCHAR, v3 VARCHAR ); UPSERT INTO my_tabl...

SQL Server数据库级别触发器

  禁止修改表结构和加表 CREATE TRIGGER [Object_Change_Trigger_DDL] ON DATABASE FOR ALTER_TABLE,DROP_TABLE,CREATE_TABLE,CREATE_INDEX,ALTER_INDEX, DROP_INDEX AS DECLARE @EventData AS XML;...