vue-cli4.x + elementUI树形控件实战：实现多级选择和节点数据展示

2023-09-07 21:17:50

在本文中，我们将探讨如何使用vue-cli4.x和elementUI创建一个树形控件，不仅可以支持多级选择，还能在点击节点时展示相应的节点数据。我们将介绍整个开发过程，包括搭建项目环境、引入所需依赖、编写组件代码、处理数据交互以及设置样式等。

搭建项目环境

我们首先需要创建一个新的vue-cli4.x项目，可以使用以下命令：

vue create my-project

按照提示选择所需的选项，创建完成后进入项目目录。

引入所需依赖

接下来，我们需要安装elementUI和一些辅助库：

npm install element-ui vue-router vuex

编写组件代码

接下来，我们开始编写树形控件组件的代码。首先，在src/components目录下创建一个名为Tree.vue的文件，并输入以下代码：

<template>
  <el-tree
    :data="treeData"
    :props="treeProps"
    @node-click="handleNodeClick"
  />
</template>

<script>
import { ElTree } from 'element-ui'

export default {
  components: { ElTree },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级节点1',
          children: [
            {
              id: 2,
              label: '二级节点1-1',
              children: [
                {
                  id: 3,
                  label: '三级节点1-1-1'
                },
                {
                  id: 4,
                  label: '三级节点1-1-2'
                }
              ]
            },
            {
              id: 5,
              label: '二级节点1-2'
            }
          ]
        },
        {
          id: 6,
          label: '一级节点2',
          children: [
            {
              id: 7,
              label: '二级节点2-1'
            },
            {
              id: 8,
              label: '二级节点2-2'
            }
          ]
        }
      ],
      treeProps: {
        children: 'children',
        label: 'label'
      },
      currentNode: null
    }
  },
  methods: {
    handleNodeClick(data) {
      this.currentNode = data
    }
  }
}
</script>

这段代码创建了一个基本的树形控件，并定义了数据源和一些属性。我们还添加了handleNodeClick方法，以便在用户点击节点时触发。

处理数据交互

接下来，我们需要在组件中处理数据交互。首先，在src/store目录下创建一个名为store.js的文件，并输入以下代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  currentNode: null
}

const mutations = {
  setCurrentNode(state, node) {
    state.currentNode = node
  }
}

const actions = {
  setCurrentNode({ commit }, node) {
    commit('setCurrentNode', node)
  }
}

const getters = {
  currentNode: state => state.currentNode
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

这段代码创建了一个Vuex store，用于管理当前选中的节点。

设置样式

最后，我们需要设置一些样式来美化我们的树形控件。可以在src/assets/styles/main.scss文件中添加以下代码：

.tree-container {
  width: 300px;
  margin: 0 auto;
}

.tree {
  width: 100%;
}

.tree-node {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

.tree-node:hover {
  background-color: #f5f5f5;
}

.tree-node-selected {
  background-color: #007bff;
  color: #fff;
}

这段代码添加了一些样式，使树形控件看起来更美观。

使用组件

现在，我们可以在其他组件中使用我们的树形控件组件。例如，可以在src/views/Home.vue文件中添加以下代码：

<template>
  <div class="tree-container">
    <tree />
  </div>
</template>

<script>
import Tree from '@/components/Tree'

export default {
  components: { Tree }
}
</script>