美文网首页程序员
element-ui Table组件实现表格多选当前页切换时多选

element-ui Table组件实现表格多选当前页切换时多选

作者: ing1023 | 来源:发表于2019-12-27 14:25 被阅读0次

    在使用table组件时会遇到以下情况:
    1.表格多选时如果存在分页,当点击下一页后再次返回当前页时选中状态没有保留下来。
    2.如果当前页的弹窗显示时,表格的勾选状态会被取消。

    解决上述两个问题需要用到table组件中的两个属性:reserve-selection和row-key,使用方法如下图所示:

    row-key.png

    附上代码:

    <el-table
      :row-key="(row)=>{ return row.id}"
      :row-class-name="tableRowClassName"
       @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="100px" :reserve-selection="true"></el-table-column>
    </el-table>
    

    相关文章

      网友评论

        本文标题:element-ui Table组件实现表格多选当前页切换时多选

        本文链接:https://www.haomeiwen.com/subject/zokdoctx.html