vue+element 实现树结构

最新推荐文章于 2025-06-12 18:03:36 发布

侧耳倾听...

最新推荐文章于 2025-06-12 18:03:36 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js-功能文章标签： tree

本文链接：https://blog.youkuaiyun.com/xm_w_xm/article/details/91992339

vue.js-功能专栏收录该内容

41 篇文章

订阅专栏

本文详细介绍了Element UI中树形组件的使用方法，包括如何设置显示数据、处理选中变化事件、配置默认展开和选中节点等。通过具体代码示例，展示了树组件的灵活配置和交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说直接先上图

 <el-tree
              style="overflow:auto;text-align: left;"
              :data="Allxzlist"
              :props="props1"
              :show-checkbox="true"
              @check-change="handleCheckChange"
              ref="treecheck"
              node-key="ID"
              :highlight-current="true"
              :default-expanded-keys="defaultexpandedkeys"
              :default-checked-keys="defaultcheckedkeys"
              :check-strictly="false"
            ></el-tree>

Allxzlist: [],
      props1: {
        value: "ID",
        label: "XZQHMC",
        children: "CHILDREN"
      },
      defaultcheckedkeys: [],
      defaultexpandedkeys: [],

Allxzlist: [], 这个是获取的全部的值

props1: {

value: "ID",

label: "XZQHMC",

children: "CHILDREN"

},//这个是我们要展示的模板

defaultcheckedkeys: [],//这个是获取详情或者想要设置的默认值

defaultexpandedkeys: [],//这个是获取详情或者想要设置的默认值

handleCheckChange(data, checked, indeterminate) {
      if (this.$refs.treecheck.getCheckedKeys(true, false)) {
        this.sjlxform.slsj.SJFW = this.$refs.treecheck
          .getCheckedKeys(true, false)
          .join(",");
      } else {
        this.sjlxform.slsj.SJFW = null;
      }
      console.log(this.sjlxform, " this.sjlxform");
    },