【VUE3】ElementUI--el-card卡片列表、el-tree 结合多选框获取子节点id导出数据

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>{{ title }}</span>
        <el-button
          type="text"
          class="button"
          @click="handleExport"
        >
          导出
        </el-button>
      </div>
    </template>
    <div class="tree-container">
      <el-tree
        :data="treeData"
        show-checkbox
        node-key="id"
        ref="treeRef"
        :props="defaultProps"
        @check="handleCheckChange"
      />
    </div>
  </el-card>
</template>
 
<script setup>
import { ref } from 'vue';
import { exportData } from './api';
 
const title = '导航菜单';
const treeData = ref([{
  id: 1,
  label: '一级菜单1',
  children: [{
    id: 11,
    label: '二级菜单1-1'
  }]
}]); // 示例数据
const defaultProps = {
  children: 'children',
  label: 'label'
};
const treeRef = ref(null);
 
const handleCheckChange = (data, checked, indeterminate) => {
  // 当复选框状态改变时，可以在这里处理你的逻辑
  console.log('Check Change:', data, checked, indeterminate);
};
 
const handleExport = () => {
  const checkedNodes = treeRef.value.getCheckedNodes();
  const halfCheckedNodes = treeRef.value.getHalfCheckedNodes();
  const allIds = checkedNodes.map(node => node.id).concat(halfCheckedNodes.map(node => node.id));
  exportData(allIds);
};
</script>
 
<style scoped>
.box-card {
  width: 400px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.button {
  padding: 0;
}
.tree-container {
  max-height: 300px;
  overflow-y: auto;
}
</style>

在这个代码实例中，我们使用了Element UI的<el-card>组件来创建一个卡片，并在头部加入了一个导出按钮。使用<el-tree>组件展示树形结构数据，并且可以通过多选框选择节点。当用户点击导出按钮时，我们调用handleExport函数，它会收集所有选中和半选中节点的ID，并将这些ID作为参数传递给exportData函数，这个函数用于处理导出逻辑。注意，exportData函数是假设API，你需要根据实际情况替换为你的导出逻辑。