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


    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);
              }
            })
          })
        },
      },
  • 相关阅读:
    Windows系统创建符号链接文件
    msi软件包无法安装
    删除我的电脑里面软件快捷方式
    本地连接速度100.0mbps变10.0mbps如何恢复
    如何清理多余的Windows桌面右键菜单
    Windows免密码远程桌面
    Win8节省C盘空间攻略
    利用FTP将Linux文件备份到Windows
    Windows服务器之间rsync同步文件
    解决“Word无法访问您试图使用的功能所在的网络位置”问题
  • 原文地址:https://www.cnblogs.com/BobXie85/p/15181896.html
Copyright © 2020-2023  润新知