el-tree的使用及控制全选、反选、获取选中

el-tree的使用及控制全选、反选、获取选中

组件使用

  1. 引入组件,可以参考官网组件引入
  2. 参考官网示例写好基础数据结构,不知道怎么转换树形机构的看文章:一维数组转树形
html 复制代码
<template>
  <el-tree
    style="max-width: 600px"
    :data="data"
    :props="props"
    show-checkbox
  />
</template>

<script setup>
const handleNodeClick = (data) => {
  console.log(data)
}

const data = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]

const props= {
  children: 'children',
  label: 'label',
}
</script>

获取选中的id

通过获取tree组件,操作方法进行获取

  1. 给组件绑定一个ref
html 复制代码
<el-tree ref="treeRef" node-key="id" style="max-width: 600px" :props="props" :data="data" show-checkbox />
  1. 声明变量
js 复制代码
const treeRef = ref(null)
  1. 操作组件方法
js 复制代码
// 获取选中数据
const handleCheckChange = () => {
  // 方法一:获取key,此方法必须设置属性node-key!!!
  console.log(treeRef.value.getCheckedKeys(false))// 返回被选中的key,也就是id
  // 方法二:获取节点node
  console.log(treeRef.value.getCheckedNodes(false))// 返回被选中的对象
}

全选实现

思路:获取全部的key,也就是id,然后通过赋值的操作来实现效果

js 复制代码
// 用于判断是全选还是取消
let isAll = false;
// 全选
const all = () => {
  if (isAll) {
    treeRef.value.setCheckedKeys([], false)
    isAll = false
  } else {
    // 获取所以的id,如果有一维数组,则直接循环获取即可
    const nodeKeys = [];
    function getAllKeys(data) {
      data.forEach(node => {
        nodeKeys.push(node.id);
        if (node.children) {
          getAllKeys(node.children);
        }
      });
    }
    getAllKeys(treeData.value);
    treeRef.value.setCheckedKeys(nodeKeys, false)
    isAll = true
  }
}

反选实现

思路:

  1. 获取当前选中的key
  2. 全部选中
  3. 将第一步获取的key节点设置为取消
js 复制代码
// 反选
const reverse = () => {
  // 1. 获取当前选中的key
  let checked = treeRef.value.getCheckedKeys(false);
  // 2. 全部选中
  const nodeKeys = [];
  function getAllKeys(data) {
    data.forEach(node => {
      nodeKeys.push(node.id);
      if (node.children) {
        getAllKeys(node.children);
      }
    });
  }
  getAllKeys(treeData.value);
  treeRef.value.setCheckedKeys(nodeKeys, false)
  // 3. 将第一步获取的key节点设置为取消
  checked.forEach(val => {
    treeRef.value.setChecked(val, false)
  })
}

全部代码

html 复制代码
<template>
  <el-tree
    style="max-width: 600px"
    :data="data"
    :props="props"
    show-checkbox
    ref="treeRef"
  />
  <el-button type="primary" @click="handleCheckChange">获取选中数据</el-button>
  <el-button type="primary" @click="all">全选</el-button>
  <el-button type="primary" @click="reverse">反选</el-button>
</template>

<script setup>
import { ref } from 'vue';
const treeRef = ref(null)
const handleNodeClick = (data) => {
  console.log(data)
}

const data = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]

const props= {
  children: 'children',
  label: 'label',
}
// 获取选中数据
const handleCheckChange = () => {
  // 方法一:获取key,此方法必须设置属性node-key!!!
  console.log(treeRef.value.getCheckedKeys(false))// 返回被选中的key,也就是id
  // 方法二:获取节点node
  console.log(treeRef.value.getCheckedNodes(false))// 返回被选中的对象
}

// 用于判断是全选还是取消
let isAll = false;
// 全选
const all = () => {
  if (isAll) {
    treeRef.value.setCheckedKeys([], false)
    isAll = false
  } else {
    // 获取所以的id,如果有一维数组,则直接循环获取即可
    const nodeKeys = [];
    function getAllKeys(data) {
      data.forEach(node => {
        nodeKeys.push(node.id);
        if (node.children) {
          getAllKeys(node.children);
        }
      });
    }
    getAllKeys(treeData.value);
    treeRef.value.setCheckedKeys(nodeKeys, false)
    isAll = true
  }
}

// 反选
const reverse = () => {
  // 1. 获取当前选中的key
  let checked = treeRef.value.getCheckedKeys(false);
  // 2. 全部选中
  const nodeKeys = [];
  function getAllKeys(data) {
    data.forEach(node => {
      nodeKeys.push(node.id);
      if (node.children) {
        getAllKeys(node.children);
      }
    });
  }
  getAllKeys(treeData.value);
  treeRef.value.setCheckedKeys(nodeKeys, false)
  // 3. 将第一步获取的key节点设置为取消
  checked.forEach(val => {
    treeRef.value.setChecked(val, false)
  })
}
</script>
相关推荐
十八朵郁金香42 分钟前
【JavaScript】深入理解模块化
开发语言·javascript·ecmascript
YaHuiLiang1 小时前
一切的根本都是前端“娱乐圈化”
前端·javascript·代码规范
菜鸟一枚在这2 小时前
深入解析设计模式之单例模式
开发语言·javascript·单例模式
浪九天4 小时前
Vue 不同大版本与 Node.js 版本匹配的详细参数
前端·vue.js·node.js
C#Thread4 小时前
C#上位机--流程控制(IF语句)
开发语言·javascript·ecmascript
尚学教辅学习资料5 小时前
基于SpringBoot+vue+uniapp的智慧旅游小程序+LW示例参考
vue.js·spring boot·uni-app·旅游
椰果uu5 小时前
前端八股万文总结——JS+ES6
前端·javascript·es6
~废弃回忆 �༄5 小时前
CSS中伪类选择器
前端·javascript·css·css中伪类选择器
IT、木易5 小时前
跟着AI学vue第五章
前端·javascript·vue.js
薛定谔的猫-菜鸟程序员5 小时前
Vue 2全屏滚动动画实战:结合fullpage-vue与animate.css打造炫酷H5页面
前端·css·vue.js