vue中el-tree動態(tài)初始默認選中和全選實現方法

更新時間：2023年09月11日 09:05:25 作者：coinisi_li

這篇文章主要給大家介紹了關于vue中el-tree動態(tài)初始默認選中和全選實現的相關資料,eltree默認選中eltree是一種常用的樹形控件,通常用于在網頁上呈現樹形結構的數據,例如文件夾、目錄、組織結構等,需要的朋友可以參考下

一、我們常用到element-ui組件中，Tree 樹形控件。

官網鏈接：Element - The world's most popular Vue UI framework

二、實現效果如下圖所示

涉及：1. 樹結構轉換一維數組

2. 與全選關聯

3. 父子組件間傳值

<template>
  <div>
//全選選擇框
    <el-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      @change="handleCheckAllChange"
    >
      全選
    </el-checkbox>
    <div style="margin: 15px 0" />
//可選擇層級框
    <el-tree
      ref="tree"
      default-expand-all //是否默認展開所有節(jié)點 默認是false
      show-checkbox      //節(jié)點是否可被選擇
      :data="menuOptions"
      node-key="id"      //每個樹節(jié)點用來作為唯一標識的屬性，整棵樹應該是唯一的
      highlight-current
      //默認勾選的節(jié)點的 key 的數組，formmenu是從父組件拿到的值。在此組件中通過this.$refs.tree.getCheckedKeys();返回目前被選中的節(jié)點的 key 所組成的數組，傳給formmenu。
      :default-checked-keys="formmenu"  
      :props="defaultProps"
    />
    <div style="margin: 15px 0" />
  </div>
</template>
<script>
import { getAllMenu } from '@/views/api/index';  //樹數據接口
export default {
  props: {
    formmenu: {    //父組件傳值子組件
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      checkAll: false,
      menuOptions: [],
      mydata: [],
      defaultProps: {
        children: 'children',
        label: 'menuName',
      },
      isIndeterminate: false,
    };
  },
  watch: {
    formmenu() {
      this.getTreeselect();
    },
  },
  created() {
    this.getTreeselect();
  },
  methods: {
    getTreeselect() {
      getAllMenu().then((response) => {
        this.menuOptions = response.data || []; //從接口拿到樹數據
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(this.formmenu);  //通過 keys 設置目前勾選的節(jié)點，使用此方法必須設置 node-key 屬性
          this.mydata = this.convertTreeData(this.menuOptions);//因為下面要判斷數組長度，樹的結構里包含children，所以要將其展開。
          //與全選關聯起來，判斷是否全部選中還是部分選中
          let checkedCount = this.formmenu.length;
          this.checkAll = checkedCount === this.mydata.length;
          this.isIndeterminate = 
      checkedCount > 0 && checkedCount < this.mydata.length;
        });
      });
    },
    // tree 結構轉化成一維數組
    convertTreeData(menuOptions) {
      for (let i = 0; i < menuOptions.length; i++) {
        if (menuOptions[i].children != undefined) {
          const temp = menuOptions[i].children;
          delete menuOptions[i].children;
          menuOptions = menuOptions.concat(temp);
        }
      }
      return menuOptions;
    },
    handleCheckAllChange(val) {
      if (this.checkAll) {
        this.$refs.tree.setCheckedNodes(this.menuOptions);
      } else {
        this.$refs.tree.setCheckedKeys([]);
      }
      this.isIndeterminate = false;
    },
  },
};
</script>