VUE-Element组件（四）tree

w_t_y_y

已于 2022-06-07 17:15:42 修改

阅读量354

点赞数

分类专栏： # VUE页面开发文章标签： vue.js elementui javascript

于 2020-04-29 14:49:43 首次发布

本文链接：https://blog.youkuaiyun.com/w_t_y_y/article/details/105839806

版权

本文介绍了Vue中Element UI的Tree组件的使用方法，包括如何获取点击的节点信息、实现可选择的树并处理默认选中状态，以及解决父子节点强制关联的问题，通过设置check-strictly属性和后端数据处理来优化选中状态。

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

一、点击tree，获取点击的item：

<template>
  <div class="container">
    <el-card>
      <table>
        <tr class="thclass">
          <th class="menuselect">
            <span style="float:left">菜单</span>
            <i style="float:right" class="el-icon-caret-bottom" />
          </th>
          <th>
            <el-button type="primary" size="mini">新增</el-button>
          </th>
        </tr>
        <tr class="maintr">
          <td class="linetd">
            <el-tree
              class="treecss"
              :data="menus"
              :props="defaultProps"
              node-key="id"
              @node-click="handleNodeClick"
            ></el-tree>
          </td>
          <td>
            当前选择的是{
  {currmenu.label}},id为{
  {currmenu.id}}
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="日期" width="180"></el-table-column>
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>
            </el-table>
          </td>
        </tr>
      </table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currmenu: "",
      menus: [
        {
          id: -1,
          label: "全部",
          children: [
            {
              id: 1,
              label: "小学",