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);
              }
            })
          })
        },
      },
  • 相关阅读:
    Kinect 开发 —— 硬件设备解剖
    Kinect 开发 —— 引言
    (转)OpenCV 基本知识框架
    OpenCV —— 摄像机模型与标定
    OpenCV —— 跟踪与运动
    OpenCV —— 图像局部与分割(二)
    OpenCV —— 图像局部与部分分割(一)
    OpenCV —— 轮廓
    OpenCV —— 直方图与匹配
    OpenCV —— 图像变换
  • 原文地址:https://www.cnblogs.com/BobXie85/p/15181896.html
Copyright © 2011-2022 走看看