elementui表格数据加载即勾选

博客围绕ElementUI表格数据加载即勾选的问题展开,介绍了实现该功能的关键点,需使用watch和nextTick。给出了表格定义、data定义、生命周期调用、获取数据方法等前端代码,还涉及watch用法和设置勾选的方法,此外还提及后台控制器和接口定义。

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

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

 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、接口定义

@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);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赵海燕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值