给Element-ui里的tree添加右键功能

问题描述：

在vue项目中，页面是用Element-ui，使用tree标签得到数据库返回的数据，但是数据量多，需要分页显示，在tree区域内点击鼠标右键，显示下一页，当在第一页时只显示下一页，当在最后一页时只显示上一页

第二个问题是通过axios得到返回值是对象数组，形式是[{},{},{}]，怎么能得到对象里的属性值？

答

哈喽，简单解答一下，代码大概是这样：

node-contextmenu触发右键点击事件，显示菜单；上一页下一页显示根据当前页码数和总页码数进行判断；切换时进行数据请求；样式代码自行添加哦


<div>
  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" @node-contextmenu="handelNodeContextmenu" ></el-tree>
  <div v-if="menuShow">
    <el-button @click="last" v-if="pageNo!==1">上一页</el-button>
    <el-button @click="next" v-if="pageNo!==total">下一页</el-button>
  </div>
</div>

  data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        menuShow:false, // 右键菜单显示
        pageNo:1, // 当前页
        total:3, // 总页数
      };
    },
    methods: {
      // 左键点击
      handleNodeClick() {
        this.menuShow=false
      },
      // 右键点击
      handelNodeContextmenu(){
        this.menuShow=true
      },
      // 下一页
      last(){
        this.pageNo-=1
        // 数据请求
      },
      // 上一页
      next(){
        this.pageNo+=1
        // 数据请求
      },
    }

[{},{},{}] 先进行数组遍历，再用Object.keys()返回对象属性数组数组，再对改数组进行遍历，大概是这样：

const arr = [{aaa:'1',bbb:'2'},{ccc:'3'},{ddd:'4'}]

arr.forEach(obj=>{
  Object.keys(obj).forEach(key=>{
    console.log(key);
  })
})

学遍历器的话，有空可以看看我这篇文章~

全网最完整的JavaScript迭代器（遍历器）整理长文，强烈建议收藏！！！_been_ss的博客-CSDN博客全网最完整的JavaScript迭代器（遍历器）整理长文.Iterator,for...in,for...of,for await... of,forEach(),map(),every(),some(),find(),findIndex(),filter(),reduce(),reduceRight()迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。for...of不能遍历object对象

https://blog.csdn.net/qq_39287602/article/details/108795880

给Element-ui里的tree添加右键功能

相关推荐