关于VUE前端页面tree组件 ---多选框（回显、后台交互、数据显示）

最新推荐文章于 2024-09-13 17:57:32 发布

贪恋的人

最新推荐文章于 2024-09-13 17:57:32 发布

阅读量8.8k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/study_xiaoyu/article/details/105245794

版权

本文介绍了在Vue项目中使用el-tree组件实现复选框功能时，如何处理回显和后台交互的问题。重点强调了数据库中父节点PID为0的设定对正确显示数据的重要性，并分享了开发过程中的经验与代码片段，旨在提高开发效率。

摘要由CSDN通过智能技术生成

关于el-tree 组件复选框的值显示问题以及回显----后台交互

首先附上效果图：

<el-tree
        :data="dataForm.roleData"
        node-key=""   -- 父节点字段名
        :load=""    -- 子节点字段名
        show-checkbox
        default-expand-all  -- 默认展开所有节点
        @check-change="handleCheckChange"  -- 单选以及全选
        ref="tree"   
        :props="defaultProps">    -- 用来定义children 以及lobel的名称（父节点名Name）
</el-tree>

```javascript
 -- js代码块
//单选
handleCheckChange() {
   
  this.prdIdList = this.$refs.tree.getCheckedKeys() ;
},

//设置全选或反选
handleCheckAll() {
   
  let idList = [] ;
  for (var i=0;i<this.dataForm.roleData.length;i++) {
   
    idList.push(this.dataForm.roleData[i].Id) ;

  }
  defaultProps: {
   
  children: