74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<template>
|
|
<div :class="`custom-table-tree ${shadow ? 'custom-table-tree__shadow' : ''}`">
|
|
<div v-if="title" class="title">{{ title }}</div>
|
|
<el-tree
|
|
:data="data"
|
|
:node-key="option.nodeKey"
|
|
:show-checkbox="option.showCheckbox"
|
|
:default-expanded-keys="option.defaultExpandedKeys"
|
|
:default-checked-keys="option.defaultCheckedKeys"
|
|
:props="option.props ?? option.defaultProps"
|
|
@node-click="handleNodeClick"
|
|
>
|
|
<template #default="{ data: rows }">
|
|
<slot :data="rows"></slot>
|
|
</template>
|
|
</el-tree>
|
|
</div>
|
|
</template>
|
|
<script setup name="custom-table-tree">
|
|
const props = defineProps({
|
|
title: { type: String, default: '' },
|
|
shadow: { type: Boolean, default: true },
|
|
data: { type: Array, default: () => [] },
|
|
option: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
nodeKey: 'id',
|
|
showCheckbox: false,
|
|
props: {},
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'label',
|
|
},
|
|
defaultExpandedKeys: [],
|
|
defaultCheckedKeys: [],
|
|
};
|
|
},
|
|
},
|
|
});
|
|
const emit = defineEmits(['node-click']);
|
|
|
|
const handleNodeClick = (data, node) => {
|
|
emit('node-click', data, node);
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.custom-table-tree {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 200px;
|
|
@include flex-column();
|
|
|
|
&__shadow {
|
|
box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.title {
|
|
height: 36px;
|
|
padding: 0 20px;
|
|
line-height: 36px;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
background: var(--el-color-primary);
|
|
}
|
|
|
|
.el-tree {
|
|
padding: 16px 10px 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
</style>
|