• element-ui中的table可分页多选功能-记住上一页勾选数据


    vue中使用el-table,常需要记住上一页所勾选的数据,如果是在弹窗中,编辑时也希望能够自动勾选上不同页面所勾选的数据,曾百思不得其解,直到看了上面的实现~嗯,大道至简~
    步骤:

    • 在el-table中添加:row-key="getRowKeys"
     <el-table
          ref="form"
          :model="form"
          :row-key="getRowKeys"
          ........
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 然后第一列,即有多选框的一列,添加:reserve-selection="true"
    <el-table-column type="selection" :reserve-selection="true"></el-table-column>
    
    • 1
    • 然后在methods中添加函数:
    getRowKeys(row) {
    	return row.id
    },
    • 1
    • 2
    • 3

    完成后需要清空选中,不然会在下一个批量操作中记录上一次选中的数据,
    但如果你接下来的工作是跳转/刷新页面,那么这一步也可以省略,看你需求了:

    this.$refs.form.clearSelection();
  • 相关阅读:
    2
    vue学习03
    vue学习02
    2
    vue学习01
    pycharm中安装vue
    git
    form
    ajax
    中间件
  • 原文地址:https://www.cnblogs.com/lonelyshy/p/13810444.html
Copyright © 2020-2023  润新知