el-tree,el-table,el-dialog表格对话框常见后台管理界面前端使用经验分享

引言：其实编程思想是通过饿了么组件自身的方法，拿到组件上面的数据，拿这些数据进行查询条件或者进行下一步操作 ，饿了么组件上的回调函数不需要传参，在methods里可以直接定义参数接受

 

页面结构包括： 上部标签，下部 树结构 和 表格 分页，新增按钮弹出对话框

点击上面标签触发下面不同页面的展示，主要是click方法 @click="tab(1)"

  tab(e) {
            switch (e) {
                case 1:
                    this.isActiveA = true;
                    this.isActiveB = false;
                    this.isActiveC = false;
                    break;
                case 2:
                    this.isActiveB = true;
                    this.isActiveA = false;
                    this.isActiveC = false;
                    break;
                case 3:
                    this.isActiveC = true;
                    this.isActiveA = false;
                    this.isActiveB = false;
                    break;
                default:
            }
        },

定义的isactive那些变量用于控制页面 v- if显示，页面用子组件写的

单个子组件下部分功能分析

  左部分树结构代码

 treedata 结构形式：

节点点击方法： 

 handleNodeClick(data) {

            this.shovesTreeDevice(data.id, this.pageNum, this.pageSize); 

           上面这个方法是根据节点id和分页数和条目数查询表格数据

        },

 至于表格的tabledata的数据是在created中先查询到树结构，拿到树结构的设备id，根据设备id和分页数据拿到表格数据

分页部分：

 代码：

 handleCurrentChange(val) {

            this.shovesTreeDevice(this.deviceTypeId, val, this.pageSize);

        },

基本上就是拿到val 作为参数 调用查询表格数据的方法。这边需要在data里定义好pagesize：10 //一行显示几个，条目

pageNum：1  //当前分页数

对话框：

至于对话框的使用，一般就是表格当前行的row对象，进行一层浅拷贝，然后传参给后端，操作，记得每次用完后调用初始化数据方法。一些小细节清空对话框的表单对象。