快捷導(dǎo)航

element-plus的el-tree的雙向綁定示例代碼

更新時(shí)間：2024年12月09日 14:24:33 作者：i_am_a_div_日積月累_

這篇文章主要介紹了element-plus的el-tree的雙向綁定的示例代碼,代碼簡單易懂,結(jié)合圖文給大家展示,感興趣的朋友跟隨小編一起看看吧

el-tree改造了下
可選可取消有默認(rèn)值不包含父級id（也可打開注釋包含父級id）默認(rèn)展開點(diǎn)擊節(jié)點(diǎn)也可觸發(fā)選擇節(jié)點(diǎn)內(nèi)容自定義

<template>
  <div class="absolute">
    <el-scrollbar class="pall">
      <div class="ball mb radius overflow">
        <div class="bb" style="background: rgba(124, 162, 121, 0.1); padding: 4px 16px;">
          <el-checkbox @change="selectCheckBox($event,1)">拓?fù)鋱D樹結(jié)構(gòu)</el-checkbox>
        </div>
        <!--
      default-checked-keys:默認(rèn)展開值（正常來說需要包含父級id的 但是我們后端不要后端id ）
      show-checkbox：多選框
      node-key：每個(gè)樹節(jié)點(diǎn)用來作為唯一標(biāo)識的屬性，整棵樹應(yīng)該是唯一的
      default-expand-all：是否默認(rèn)展開所有節(jié)點(diǎn)
      expand-on-click-node：是否在點(diǎn)擊節(jié)點(diǎn)的時(shí)候展開或者收縮節(jié)點(diǎn)， 默認(rèn)值為 true，如果為 false，則只有點(diǎn)箭頭圖標(biāo)的時(shí)候才會展開或者收縮節(jié)點(diǎn)
      default-checked-keys：默認(rèn)勾選的節(jié)點(diǎn)的 key 的數(shù)組
      check-on-click-node：是否在點(diǎn)擊節(jié)點(diǎn)的時(shí)候選中節(jié)點(diǎn)，默認(rèn)值為 false，即只有在點(diǎn)擊復(fù)選框時(shí)才會選中節(jié)點(diǎn)
      props：配置選項(xiàng)，具體看下表
      -->
        {{ childKeys }}
        <div style="padding: 4px 20px">
          <el-tree :key="keyIndex" ref="treeRef" class="tree_ref" style="max-width: 600px" :data="data" show-checkbox
            node-key="id" :default-expand-all="true" :expand-on-click-node='false' :default-checked-keys="childKeys"
            :check-on-click-node="true" :props="defaultProps" @check-change="checkChange">
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ node.label }}</span>
                <span style="color:red;margin-left: 10px">id:{{data.id }}</span>
              </span>
            </template>
          </el-tree>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup>
import { ref } from 'vue';
let treeRef = ref(null);
let childKeys = ref([5, 10]); // 初始化選中子節(jié)點(diǎn)的 ID
const defaultProps = {
  children: 'children',
  label: 'label',
};
let keyIndex = ref(1) // 注意該key在需要全id和只需要子集id的時(shí)候用法不同
const data = [
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
];
const checkChange = () => {
  // 獲取所有選中的節(jié)點(diǎn)對象
  const checkedNodes = treeRef.value.getCheckedNodes();
  // // 結(jié)果1:獲取包含父節(jié)點(diǎn)的id
  // childKeys.value = treeRef.value.getCheckedKeys()
  // 結(jié)果2：提取子節(jié)點(diǎn)的 ID，不包括父節(jié)點(diǎn)
  childKeys.value = checkedNodes
    .filter(node => !node.children) // 只保留沒有子節(jié)點(diǎn)的節(jié)點(diǎn)
    .map(node => node.id); // 提取 ID
  console.log('默認(rèn)值', childKeys.value, checkedNodes); // 只包含子節(jié)點(diǎn)的 ID
  keyIndex.value++
}
// 手動(dòng)全選
const selectCheckBox = (value, num) => {
  // console.log(value, num);
  // // 結(jié)果1:獲取包含父節(jié)點(diǎn)的id
  // if (value) {
  //   childKeys.value = getAllNodeIds(data)
  //   console.log('所有層級id', getAllNodeIds(data));
  // } else {
  //   // 取消勾選所有節(jié)點(diǎn)
  //   childKeys.value = []
  //   treeRef.value.setCheckedKeys([]);
  // }
  // keyIndex.value++
  // 結(jié)果2：提取子節(jié)點(diǎn)的 ID，不包括父節(jié)點(diǎn)
  if (value) {
    // 勾選所有節(jié)點(diǎn)
    const allKeys = data.flatMap(node => getAllNodeKeys(node));
    treeRef.value.setCheckedKeys(allKeys);
  } else {
    childKeys.value = []
    // 取消勾選所有節(jié)點(diǎn)
    treeRef.value.setCheckedKeys([]);
  }
};
const getAllNodeKeys = (node) => {
  let keys = [node.id];
  if (node.children) {
    node.children.forEach(child => {
      keys = keys.concat(getAllNodeKeys(child));
    });
  }
  console.log(keys);
  return keys;
}
// 遞歸函數(shù)獲取所有節(jié)點(diǎn)的 ID
const getAllNodeIds = (nodes) => {
  let ids = [];
  nodes.forEach(node => {
    ids.push(node.id); // 添加當(dāng)前節(jié)點(diǎn)的 ID
    if (node.children) {
      ids = ids.concat(getAllNodeIds(node.children)); // 遞歸調(diào)用以獲取子節(jié)點(diǎn)的 ID
    }
  });
  return ids;
};
</script>
<style lang="scss" scoped>
:deep(.tree_ref) {
  margin-left: 12px;
  .el-tree-node__expand-icon {
    display: none;
  }
}
</style>

到此這篇關(guān)于element-plus的el-tree的雙向綁定的文章就介紹到這了,更多相關(guān)element-plus el-tree雙向綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: