<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，你需要根据实际情况替换为你的导出逻辑。