element-ui表格如何实现跨页保留选中状态

最新推荐文章于 2025-03-06 10:14:23 发布

babywenever

最新推荐文章于 2025-03-06 10:14:23 发布

阅读量462

点赞数 1

文章标签： ui vue.js elementui

本文链接：https://blog.youkuaiyun.com/babywenever/article/details/134942937

版权

文章介绍了如何在Vue的ElementUI库中的el-table组件中，实现数据表格的多选功能，并确保在数据更新后能保留用户之前的选中状态，包括设置row-key和reserve-selection属性以处理跨页时的状态保持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-table
            :data="tableData"
            row-key="transNo"
            v-loading="loading"
            @selection-change="handleSelectionChange"
            ref="multipleTable"
            style="width: 100%;margin-top: 30px;"
          >
            <el-table-column type="selection" width="45" fixed="left" reserve-selection/>
            <el-table-column
              label="应用名称"
              prop="appName"
              min-width="100"
              align="center"
            />
            <el-table-column
              label="所属商户"
              prop="mchtName"
              min-width="100"
              align="center"
            />
            <el-table-column
              label="国家"
              prop="countryCode"
              min-width="100"
              align="center"
            >
              <template slot-scope="scope">
                <SelecttSpan
                  :key="scope.row.countryCode"
                  v-model="scope.row.countryCode"
                  selectUrl="/sys/data/country"
                  :field="['countryCode', 'cnName']"
                >
                </SelecttSpan>
              </template>
            </el-table-column>
            <el-table-column
              label="待结算金额"
              prop="beforeTransAmt"
              min-width="100"
              align="center"
            />
            <el-table-column
              label="结算金额"
              prop="changeAmt"
              min-width="100"
              align="center"
            />
            <el-table-column
              label="操作结果"
              prop="result"
              min-width="100"
              align="center"
            />
          </el-table>

在type="selection"的column中添加reserve-selection属性，在数据更新之后保留之前选中的数据（需指定 row-key），跨页则会保留之前的选中状态