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

本文分享了如何在前端使用饿了么组件(el-tree, el-table, el-dialog)构建常见的后台管理界面,包括上部标签、树结构、表格和分页功能。点击标签触发页面展示,利用组件的回调函数处理数据,如handleNodeClick用于获取节点ID并查询表格数据。分页功能通过handleCurrentChange方法实现。对话框中,使用行对象进行浅拷贝,调用后端操作后进行数据初始化和对话框表单清空。" 108315722,10047406,CTF初学者资源大全,"['信息安全', '安全', 'Web开发', '逆向工程', '加密技术', 'Android开发']
摘要由CSDN通过智能技术生成

引言:其实编程思想是通过饿了么组件自身的方法,拿到组件上面的数据,拿这些数据进行查询条件或者进行下一步操作 ,饿了么组件上的回调函数不需要传参,在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:
           
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值