elementui表格数据加载即勾选

这篇具有很好参考价值的文章主要介绍了elementui表格数据加载即勾选。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

搜索关键字:elementui表格数据加载即勾选|elementui表格勾选

elementui表格数据加载即勾选,elementui,前端,javascript,SpingBoot,mybatis-plus

 1、关键点:

需要使用watch和nextTick,直接参考官方案例,在数据返回时候设置勾选不好使。

2、表格定义

            <el-table :height="570" :data="roleTableData" style="width: 100%" border stripe ref="msTable"

           >

3、data定义

    data() {

        return {

            queryInfo: {

                size:2,

                pageNow: 1

            },

            roleTableData: [],

            total: 0

        }

    },

4、生命周期调用

    created() {

        this.getRoleTableData();

    },

5、获取数据方法

getRoleTableData(pageNo,pageSize) {

            pageNo = pageNo ? pageNo : this.queryInfo.pageNow;

            pageSize = pageSize ? pageSize : this.queryInfo.size;

            this.$axios.get('/api/role/roles',{

                params: {

                    roleName: '',

                    page: pageNo,

                    size: pageSize

                }

            })

            .then( res => {

                console.log("角色列表数据",res.data);

                this.roleTableData =res.data.data;

                this.total = res.data.total;

                // 处理越界问题,后台已经设置从0开始,取记录数没有动

                if(this.total < ( this.queryInfo.pageNow - 1) * this.queryInfo.size) {

                    this.queryInfo.pageNow = 1;

                }

                // 不管用,在这是设置已分配的角色

                // this.setAssignedRoles(res.data.data);

            })

            .catch( function(error) {

                console.log(error);

            });

        },

6、watch用法

    watch: {

        roleTableData: function(data) {

            console.log("watch调用了",data);

            this.$nextTick( () => {

                this.setAssignedRoles(data);

            })

        }

    }

7、设置勾选,根据页面加载传递的参数

        setAssignedRoles(tableData) {

            let assignedRoles = this.$route.query.roleids;

            console.log("assignedRoles",assignedRoles);

            console.log("tableData",tableData);

            let rows = [];

            for(let r =0 ; r < tableData.length; r++) {

                for(let i = 0 ; i< assignedRoles.length;i++) {

                    if(tableData[r].id+'' === assignedRoles[i]) {

                        rows.push(tableData[r]);

                        break;

                    }

                }

            }

            console.log("rows",rows);

            for(let row=0; row < rows.length; row++) {

                this.$refs.msTable.toggleRowSelection(rows[row],true);

            }

        },

8、后台控制器

// 根据查询条件,返回符合条件的分页菜单

    // http://localhost:3000/role/roles

    @GetMapping("/roles")

    public JSONObject getRoles8RoleName(@RequestParam String roleName,@RequestParam Integer page,@RequestParam Integer size) {

        System.out.println("接收到前台roleName: "+roleName);

        System.out.println("接收到前台page: "+page);

        System.out.println("接收到前台size: "+size);

        JSONObject result = new JSONObject();

        R r = R.ok();

        try{



            Long total = roleMapper.getRoleCount8RoleName(roleName);

            // 处理越界

            int start = (page - 1) * size;

            if (total < start) {

                start = 0;

            }



            List<Role> ls = roleMapper.getRoles8RoleName(roleName,start,size);

            result.put("data",ls);

            result.put("total",total);

            r.setCode(ResultCode.CODE200);

            r.setMessage("获取角色成功");

            result.put("meta",r);

        }catch (Exception e) {

            e.printStackTrace();



            r.setCode(ResultCode.ERROR);

            r.setMessage("获取角色失败");

            result.put("meta",r);

        }

        return  result;

    }

9、接口定义文章来源地址https://www.toymoban.com/news/detail-639145.html

@Select("<script>"+ " select count(id) from tbl_role "+

        "<where>"+

        "<if test = 'roleName!=null and roleName.trim() != &quot;&quot; ' >"

        +"  Name like concat('%', #{roleName},'%')"

        +"</if>"+

        "</where>"+

"</script>")

Long getRoleCount8RoleName(String roleName );

@Select("<script>"+ " select * from tbl_role "+

        "<where>"+

        "<if test = 'roleName!=null and roleName.trim() != &quot;&quot; ' >"

        +"  Name like concat('%', #{roleName},'%')"

        +"</if>"+

        "</where>"+

        " order by display_no asc "+

        " LIMIT  #{page},#{size} "+

        "</script>")

List<Role> getRoles8RoleName(String roleName ,Integer page , Integer size);

到了这里,关于elementui表格数据加载即勾选的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • elementui el-table表格实现翻页和搜索均保持勾选状态(后端分页)

    需求: 不管是页面切换还是通过搜索获取数据,都要保持已选中的行保持勾选状态,同时将选中行的内容以标签的形式显示出来,当点击关闭标签时可以对应取消选中状态,点击行中的任意位置也可以切换选中状态,单独勾选复选框一样可以达到要求。 由于需求相对还是蛮

    2024年02月10日
    浏览(63)
  • vue实现elementUI table表格树形结构-使用懒加载时-解决子节点增删改后,不刷新子节点数据问题

    在使用element-ui的table组件时,使用树形结构,并使用了懒加载,可出现了一个问题,在对当前节点添加一个子节点数据,或删除一个子节点数据时,当前节点的子节点数据并不自动刷新出来。element-ui官方没有提供实时刷新子节点数据的方法。 可以使用window.location.reload();但每

    2024年02月09日
    浏览(50)
  • 【前端】layui table表格勾选事件,以及常见模块

    欢迎来到《小5讲堂》,大家好,我是全栈小5。 这是《前端》系列文章,每篇文章将以博主理解的角度展开讲解, 温馨提示:博主能力有限,理解水平有限,若有不对之处望指正! 在 layui 的 table 表格中,想要监听勾选事件可以通过监听 checkbox 类型的列实现。 可以使用 ch

    2024年04月22日
    浏览(39)
  • 40、使用elementUI分别实现前端,后端表格分页

    一、前端分页 1、创建表格 说明:slice(a,b)的作用是从已有的数组中返回选定的元素\\\"a\\\"表示开始,\\\"b\\\"表示结束。 而currentPage和pageSize在此网页的作用会在接下来进行说明。 2、创建分页 说明分页器绑定变量说明: :current-page的值表示当前是第几页; :page-sizes的值表示可以选择一

    2024年02月12日
    浏览(89)
  • < element-Ui表格组件:表格多选功能回显勾选时因分页问题,导致无法勾选回显的全部数据 >

    在 Vue + elementUi 开发中,elementUI中表格在本身是自带多选功能的,但是在某些情况下,并不能完全适用,甚至可能产生bug。例如本次案例所遇Bug,情景如下: 本案例场景 :在表单中, 通过表单参数筛选某个明细表格数据 ,后端要求新增时可多选明细表格中的内容。但由于明

    2024年02月09日
    浏览(58)
  • JAVA poi-tl 制作word模板 表格数据行循环 带有复选框勾选的表格

            java项目实际开发中经常会遇到制作word表单且表格数据行循环功能,甚至带有复选框勾选功能,本文简单介绍如何制作模板以及使用poi-tl生成word。 提示:以下是本篇文章正文内容,下面案例可供参考 如果只用到word那么需要导入的依赖如下(本案例只需要如下2个依

    2024年04月12日
    浏览(41)
  • elementUi - - - - table 勾选功能 & 禁止勾选

    代码如下: 上述代码即可实现勾选功能 代码如下:

    2024年02月12日
    浏览(60)
  • 前端vue+elementui导出复杂(单元格合并,多级表头)表格el-table转为excel导出

    需求 :前端对el-table表格导出 插件 : npm install xlsx -S npm install file-saver --save 原理 :直接导出el-table的表格里面的数据,这样就会存在缺点,只会导出当前页面的数据,如果需要导出全部数据,可以自己重新渲染一个全部数据不可见的el-table表格,来导出就可以了 扩展 :经过

    2024年02月04日
    浏览(66)
  • ElementUI之动态树+数据表格+分页->动态树,动态表格

    动态树 动态表格 1.动态树 2.动态表格  

    2024年02月07日
    浏览(54)
  • elementUI Table 表格编辑数据后停留当前位置

    后台管理系统在实际开发中,表格如果在一定高度出现滚动条。 这时如果对表格行数据进行编辑或者拖拽排序操作,数据刷新后滚动条会默认回到顶部,这样体验会不太好。 如果想保留在当前位置可以这样操作: table表格出现滚动条渲染的结构和样式  

    2023年04月18日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包