elementui表格数据加载即勾选

搜索关键字：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);