VUE-Element组件（四）tree

深藏阁楼爱情的钟 2023-05-21 07:23 24阅读 0赞

一、点击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: "小学",
                  children: [
                    { id: 11, label: "一年级" },
                    { id: 12, label: "二年级" },
                    { id: 13, label: "三年级" }
                  ]
                },
                {
                  id: 2,
                  label: "初中",
                  children: [
                    { id: 21, label: "初一" },
                    { id: 22, label: "初二" },
                    { id: 23, label: "初三" }
                  ]
                },
                {
                  id: 3,
                  label: "高中",
                  children: [
                    { id: 31, label: "高一" },
                    { id: 32, label: "高二" },
                    { id: 33, label: "高三" }
                  ]
                }
              ]
            }
          ],
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              }]
        };
      },
      methods: {
        handleNodeClick(data) {
          this.currmenu = data;
        }
      }
    };
    </script>
    
    
    <style lang = "scss"scoped>
    .container {
      width: 100%;
      height: 100%;
      margin: 0;
      table {
        width: 100%;
        height: 400px;
        text-align: left;
    
        /* border: 1px solid rgb(131, 109, 109); */
        tr {
          width: 100%;
        }
        th {
          padding: 5px;
        }
        .menuselect {
          background-color: rgb(6, 6, 99);
          color: white;
          line-height: 5px;
          text-align: center;
          border-radius:5px;
        }
        td {
          width: 50%;
    
          vertical-align: top;
        }
        .linetd {
          /* border-right: 1px solid pink; */
          width: 20%;
        }
        .maintr {
          height: 80%;
        }
        .thclass {
          line-height: 20px;
        }
        .treecss {
          /* background-color: yellowgreen; */
        }
      }
    }
    </style>

二、可选择的tree：默认选中部分节点，并获取全选中和半选中的节点：

<template>
      <div>
        <table>
          <tr>
            <td style="text-align:left;width:30%"><el-tree
          show-checkbox
          :data="menus"
          :props="defaultProps"
          node-key="id"
          ref="tree"
          @node-click="handleNodeClick"
        ></el-tree></td>
            <td style="text-align:right;width:70%">
              当前选中{
       {currMenu.label}},id为{
       {currMenu.id}}
            </td>
          </tr>
    
        </table>
        
        <el-button type="primary" @click="submit()">提交</el-button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          selectMenus: [12, 112],
          currMenu:'',
          menus: [
            {
              id: -1,
              label: "全部",
              children: [
                {
                  id: 1,
                  label: "小学",
                  children: [
                    {
                      id: 11,
                      label: "一年级",
                      children: [
                        { id: 111, label: "1班" },
                        { id: 112, label: "2班" }
                      ]
                    },
                    {
                      id: 12,
                      label: "二年级",
                      children: [
                        { id: 221, label: "1班" },
                        { id: 222, label: "2班" }
                      ]
                    },
                    { id: 13, label: "三年级" }
                  ]
                },
                {
                  id: 2,
                  label: "初中",
                  children: [
                    { id: 21, label: "初一" },
                    { id: 22, label: "初二" },
                    { id: 23, label: "初三" }
                  ]
                },
                {
                  id: 3,
                  label: "高中",
                  children: [
                    { id: 31, label: "高一" },
                    { id: 32, label: "高二" },
                    { id: 33, label: "高三" }
                  ]
                }
              ]
            }
          ]
        };
      },
      mounted() {
        this.initTree();
      },
      methods: {
        //初始化选中内容
        initTree() {
          this.$refs.tree.setCheckedKeys(this.selectMenus);
        },
        handleNodeClick(data) {
          this.currMenu = data;
        },
        submit() {
          var ids = [];
          //获取全选中节点id
          var allIds = this.$refs.tree.getCheckedKeys();
          alert("全选" + allIds);
          //获取半选中的节点Id
          var halfIds = this.$refs.tree.getHalfCheckedKeys();
          alert("半选" + halfIds);
          ids = ids.concat(allIds);
          ids = ids.concat(halfIds);
          alert(JSON.stringify(ids));
          console.info(ids);
        }
      }
    };
    </script>
    <style scoped>
    </style>

页面初始效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70][]

从Elemment官网上可以看到获取选中节点可以获取半选中，也可以获取全选中，但是设置节点默认选中使用setCheckedNodes或setCheckedKeys是全选中，这时候可以在后端做个处理：如果该节点没有子节点，就加到selectMenus里面。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70]: /images/20230521/cff95be6ecf34c30916f842b916278d3.png