acro 实现树形结构前端搜索和样式设计

web守航者

已于 2024-04-09 14:31:07 修改

阅读量137

点赞数 4

文章标签： vue.js javascript 前端

于 2024-04-09 14:29:48 首次发布

本文链接：https://blog.csdn.net/weixin_48022484/article/details/137551097

版权

本文详细介绍了如何在Vue应用中使用复合tree组件，包括搜索功能、节点拖拽、选中事件处理以及编辑、新增和删除操作。展示了如何使用`v-model`,`computed`和自定义模板来构建可交互的树形结构。

摘要由CSDN通过智能技术生成

```yaml
title:
  zh-CN: 复合 tree
  en-US: composite tree

<template>
  <div class="tree_style">
    <ga-input-search placeholder="请输入内容" style="margin-bottom: 8px;" v-model="searchKey" />
    <ga-tree
      class="tree-node-title-text-block"
      block-node
      extra-mouseenter-show
      draggable
      :data="treeData"
      :default-selected-keys="['all']"
      :field-names="{ key: 'key', title: 'title', children: 'children' }"
      @select="handleOnSelect"
      @drop="handleOnDrop"
    >
      <template #drag-icon></template>
      <template #title="nodeData">
        <div class="tree-title-operation">
          <div class="tree-title-text">{{ nodeData.title }}</div>
          <div v-if="!['all', 'undistributed'].includes(nodeData.id)" class="tree-title-extra">
            <ga-space>
              <icon-edit class="icon_color" @click="handleEdit(nodeData)"></icon-edit>
              <icon-delete class="icon_color" @click="handleDelete(nodeData)"></icon-delete>
              <icon-plus class="icon_color" @click="() => handleAdd(nodeData)" />
            </ga-space>
          </div>
        </div>
      </template>
    </ga-tree>
  </div>
</template>
<script setup>
import { reactive, ref, computed } from 'vue';
// 搜索
const searchKey = ref('');
const treeData = computed(() => {
  if (!searchKey.value) return treeArr;
  return searchData(searchKey.value);
});
const searchData = (keyword) => {
  const loop = (data) => {
    const result = [];
    data.forEach((item) => {
      if (item.title.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
        result.push({ ...item });
      } else if (item.children) {
        const filterData = loop(item.children);
        if (filterData.length) {
          result.push({
            ...item,
            children: filterData,
          });
        }
      }
    });
    return result;
  };
  return loop(treeArr);
};
// 当前选中项
const handleOnSelect = (val) => {
  console.log('当前选中项---', val);
};
// 拖拽
const handleOnDrop = (val) => {
  console.log('拖拽---', val);
};
// 编辑
const handleEdit = (val) => {
  console.log('编辑---', val);
};
// 新增
const handleAdd = (val) => {
  console.log('新增---', val);
};
// 删除
const handleDelete = (val) => {
  console.log('删除---', val);
};
const baseTreeData = reactive([{ title: '全部', key: 'all', draggable: false }]);
const data = reactive([
  {
    level: 1,
    title: '卡园数据中心',
    key: '0',
    children: [
      {
        title: '哈哈哈哈',
        key: '011',
      },
      {
        title: '恍恍惚惚',
        key: '022',
      },
    ],
  },
  {
    level: 1,
    title: '金桥数据中心',
    key: '1',
    children: [
      {
        title: '业务支撑区',
        key: '122',
      },
      {
        title: '网上交易区',
        key: '133',
      },
    ],
  },
]);
const treeArr = [...baseTreeData, ...data]

</script>