美文网首页
vue,elementui table组件多选框数据回显,前端假

vue,elementui table组件多选框数据回显,前端假

作者: shirley媛 | 来源:发表于2020-04-29 10:18 被阅读0次

    应用场景:从后端请求一次性拿到所有的数据,前端进行假分页;当勾选或去掉多选框,切换分页的时候,勾选上和去掉的数据需要回填上;具体如下:


    image.png

    具体实现代码如下:
    1、通过接口拿到所有的数据,进行假分页


    请求拿到数据

    2、渲染页面中需要用到的方法和数据


    定义的data
    表格多选框勾选方法
    分页方法

    3、表格多选框勾选方法:handleSelectionImportChange


    image.png

    4、分页方法:handleImportCurrentChange
    这也是最主要的方法,每次分页要回填当前页已经选中的数据


    image.png

    5、最后multipleImportSelectionAll中的值就是所有选中的数据
    输出的结果为:


    结果显示

    相关文章

      网友评论

          本文标题:vue,elementui table组件多选框数据回显,前端假

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