zoukankan      html  css  js  c++  java
  • 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);
              }
            })
          })
        },
      },
  • 相关阅读:
    inMap 经纬度 全国 全球
    SpringCloud Stream 使用
    beta阶段贡献分配实施
    20181113-3 Beta阶段贡献分配规则
    作业 20181120-3 Beta发布
    β发布:文案+美工展示博客
    Scrum立会报告+燃尽图(十一月二十七日总第三十五次):β阶段最后完善
    Beta发布——视频博客
    Scrum立会报告+燃尽图(十一月二十六日总第三十四次):上传β阶段展示视频
    Scrum立会报告+燃尽图(十一月二十五日总第三十三次):展示博客
  • 原文地址:https://www.cnblogs.com/BobXie85/p/15181896.html
Copyright © 2011-2022 走看看