灵活用好VUE3中EL-CARD卡片列表和EL-TREE树形多选的应用

2023-12-06 10:54:39

结合el-card卡片列表和el-tree实现子节点id导出

随着前端技术的发展，ElementUI在Vue项目中的应用变得越来越广泛。它为我们提供了丰富的组件库，可以帮助我们快速构建出美观且功能丰富的Web应用程序。而在众多组件中，el-card卡片列表和el-tree树形多选是我们经常会用到的组件。

那么，如何结合使用这两款组件来实现子节点id的导出呢？接下来，我将一步一步地为大家演示。

首先，我们需要在Vue项目中引入ElementUI并将其安装好。在命令行中输入以下命令：

npm install element-ui

然后，在main.js文件中导入ElementUI：

import ElementUI from 'element-ui'
Vue.use(ElementUI)

在HTML模板文件中，我们先使用el-card卡片列表来创建出一个个卡片，并在每个卡片中放置一个el-tree树形多选组件。同时，我们需要在el-tree组件中绑定一个selectedIds属性，用于存储当前选中的子节点id。

<template>
  <div id="app">
    <el-card v-for="item in data" :key="item.id">
      <div slot="header">{{ item.name }}</div>
      <el-tree
        :data="item.children"
        :props="treeProps"
        :default-expand-all="true"
        :show-checkbox="true"
        v-model="selectedIds"
      ></el-tree>
    </el-card>
  </div>
</template>

在script脚本中，我们需要定义data()方法来初始化数据，以及定义一个selectedIds属性来存储当前选中的子节点id。我们还可以在mounted()方法中调用一个exportData()方法来导出选中的子节点id。

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          name: '部门1',
          children: [
            {
              id: 11,
              name: '子部门1-1'
            },
            {
              id: 12,
              name: '子部门1-2'
            }
          ]
        },
        {
          id: 2,
          name: '部门2',
          children: [
            {
              id: 21,
              name: '子部门2-1'
            },
            {
              id: 22,
              name: '子部门2-2'
            }
          ]
        }
      ],
      selectedIds: [],
      treeProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  mounted() {
    this.exportData()
  },
  methods: {
    exportData() {
      console.log(this.selectedIds)
    }
  }
}
</script>

最后，我们需要在样式文件中对组件进行美化。

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}

.el-card {
  margin: 10px;
  width: 300px;
}

.el-tree {
  height: 300px;
  overflow: auto;
}