您的位置:首页 > 编程学习 > > 正文

vue按需引入elementui组件(vue ElementUI实现异步加载树)

更多 时间:2022-01-14 02:11:05 类别:编程学习 浏览量:2781

vue按需引入elementui组件

vue ElementUI实现异步加载树

本文实例为大家分享了vue ElementUI实现异步加载树的具体代码,供大家参考,具体内容如下

路由文件修改

  • import List from '@/components/list.vue'
    import Add from '@/components/add.vue'
    import Tree from '@/components/tree.vue'
    import AsynTree from '@/components/asyntree.vue'
    
    export default{
        routes:[
            {path:"/list",component:List},
            {path:"/add",component:Add},
            {path:"/add/:id",component:Add},
            {path:"/tree",component:Tree},
            {path:"/asyntree",component:AsynTree}
        ]
    
    }
    
  • 首页app.vue

  • <template>
      <li id="app">
        <router-link to="/add">添加</router-link>&nbsp;&nbsp;
        <router-link to="/list">列表</router-link>&nbsp;&nbsp;
        <router-link to="/tree">树结构</router-link>&nbsp;&nbsp;
        <router-link to="/asyntree">异步树结构</router-link>&nbsp;&nbsp;
        <router-view></router-view>
      </li>
    </template>
    
    <script>
    import List from './components/list.vue'
    
    export default {
      name: 'app',
      components: {
        List
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    
  • 异步加载树页面

  • <template>
    
    
    <el-container>
      <el-aside width="200px">
        <el-tree ref="tree"
        :data="data"
        lazy
        show-checkbox
        node-key="id"
        check-strictly
        :load="loadnode"
        :props="defaultProps"
        @node-click="nodeclick">
        </el-tree>
      </el-aside>
      <el-main>
    
        <el-form :model="typeinfo" class="demo-form-inline">
        <el-form-item label="ID">
            <el-input v-model="typeinfo.id" readonly></el-input>
        </el-form-item>
        <el-form-item label="分类名称">
            <el-input v-model="typeinfo.label" placeholder="分类名称"></el-input>
        </el-form-item>
        <el-form-item label="序号">
            <el-input v-model="typeinfo.seqno" placeholder="序号"></el-input>
        </el-form-item>
       <el-form-item label="父ID">
            <el-input v-model="typeinfo.pid" readonly></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="dosave">保存</el-button>
            <el-button type="primary" @click="dochildsave">添加节点</el-button>
        </el-form-item>
        </el-form>
    
      </el-main>
    </el-container>
    
    </template>
    
    <script>
    import axios from 'axios'
    
    export default {
        data() {
            return {
                data:[],//树对象数据模型
                defaultProps: {//树对象属性对应关系
                    children: 'children',
                    label: 'label'
                },
                typeinfo: {//商品分类实体对象
                    id:'',
                    pid:'',
                    label: '',
                    seqno: ''
                }
            }
        },
        methods: {
            loadnode(node,resolve){
                //如果展开第一级节点,从后台加载一级节点列表
                if(node.level==0)
                {
                    this.loadfirstnode(resolve);
                }
                //如果展开其他级节点,动态从后台加载下一级节点列表
                if(node.level>=1)
                {
                    this.loadchildnode(node,resolve);
                }
            },
            //加载第一级节点
            loadfirstnode(resolve){
                axios.get('http://localhost:6060/loadtype')
                    .then(function(resp){
                        resolve(resp.data);
                    })
            },
            //刷新树组件
            refreshtree(){
                var _this = this;
                axios.get('http://localhost:6060/loadtype')
                    .then(function(resp){
                        _this.data = resp.data;
                    })
            },
            //加载节点的子节点集合
            loadchildnode(node,resolve){
                axios.get('http://localhost:6060/loadtypechild?pid='+node.data.id)
                    .then(function(resp){
                        resolve(resp.data);
                    })
            },
            //点击节点上触发的事件,传递三个参数,数据对象使用第一个参数
            nodeclick(data,dataObj,self)
            {
                //alert(data.label+",id="+data.id);
                this.typeinfo.id=data.id;
                this.typeinfo.pid=data.pid;
                this.typeinfo.label=data.label;
                this.typeinfo.seqno=data.seqno;
            },
            //保存分类方法
            dosave()
            {
                var _this = this;
                 axios.post('http://localhost:6060/savetype',this.typeinfo)
                    .then(function(resp){
                        if(resp.data)
                            _this.refreshtree();
                    })
            },
            //保存子分类方法
            dochildsave()
            {
                //判断左侧树组件是否选择了一个节点
                var cnt=this.$refs['tree'].getCheckedNodes().length;
                if(cnt!=1)
                {
                    this.$message('必须选择唯一父节点');
                    return;
                }
                //通过this.$refs['tree']获取树对象,其中tree是树组件的ref属性
                var dataObj = this.$refs['tree'].getCheckedNodes()[0];
        
                this.typeinfo.id='';
                this.typeinfo.pid=dataObj.id;
                var _this = this;
                axios.post('http://localhost:6060/savetype',this.typeinfo)
                    .then(function(resp){
                        if(resp.data)
                            _this.refreshtree();
                    })
            }
        }
    
    }
    </script>
    
  • 后台Controller

  • @RequestMapping("/loadtype")
     @ResponseBody
     public List<TypeInfo> getTypeJson()
     {
      List<TypeInfo> rtn = getFirstNode();
      
      return rtn;
     }
      
     @RequestMapping("/loadtypechild")
     @ResponseBody
     public List<TypeInfo> getTypeByPid(Integer pid)
     {
      System.out.println("pid==="+pid);
      List<TypeInfo> rtn = addsrv.getTypeList(pid);
      
      return rtn;
     }
     
     private List<TypeInfo> getFirstNode()
     {
      TypeInfo root = addsrv.getRootType();
      List<TypeInfo> firstList = addsrv.getTypeList(root.getId());
      for(TypeInfo ti:firstList)
       recurseNode(ti);
      return firstList;
     }
     
     private void recurseNode(TypeInfo ti)
     {
      List<TypeInfo> children = addsrv.getTypeList(ti.getId());
      System.out.println("ti.id"+ti.getId()+",children="+children);
      if(children==null || children.size()==0)
       return;
      ti.setChildren(children);
      for(TypeInfo chd:children)
      {
       recurseNode(chd);
      }
     }
     
     @RequestMapping("/savetype")
     @ResponseBody
     public Boolean savetype(@RequestBody TypeInfo ti)
     {
      try {
       Integer id = ti.getId();
       if(id != null)
        addsrv.updateType(ti);
       else {
        addsrv.saveType(ti);
       }
       return true;
      } catch (Exception e) {
       return false;
      }
      
     }
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    您可能感兴趣