92 lines
2.0 KiB
Vue
92 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<div class="flex align-center justify-start">
|
||
|
|
<d-search icon-position="left" style="width: 380px" placeholder="请输入搜索组件名称"></d-search>
|
||
|
|
<d-checkbox class="ml-10" label="只显示有漏洞的组件" :isShowTitle="false" v-model="checked" />
|
||
|
|
</div>
|
||
|
|
<Card simple class="jyh-card mt-3">
|
||
|
|
<div class="clear-padding">
|
||
|
|
<d-table :indent="32" @check-change="treeCheckChange" :data="baseTreeTableData1" row-key="id">
|
||
|
|
<d-column field="firstName" header="组织名称" show-overflow-tooltip> </d-column>
|
||
|
|
<d-column field="lastName" header="版本"></d-column>
|
||
|
|
</d-table>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, reactive } from 'vue';
|
||
|
|
const checked = ref(false);
|
||
|
|
|
||
|
|
const baseTreeTableData1 = ref([
|
||
|
|
{
|
||
|
|
id: '1',
|
||
|
|
firstName: 'openssl',
|
||
|
|
lastName: 'N.A.',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: '2',
|
||
|
|
firstName: 'ssl',
|
||
|
|
lastName: 'N.A.',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: '3',
|
||
|
|
firstName: 'ssl',
|
||
|
|
lastName: 'N.A.'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '4',
|
||
|
|
firstName: 'crypto',
|
||
|
|
lastName: 'N.A.'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '5',
|
||
|
|
firstName: 'Text-Template-1.56',
|
||
|
|
lastName: 'N.A.',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: '6',
|
||
|
|
firstName: 'ssl',
|
||
|
|
lastName: 'N.A.',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: '7',
|
||
|
|
firstName: 'ssl',
|
||
|
|
lastName: 'N.A.'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '8',
|
||
|
|
firstName: 'crypto',
|
||
|
|
lastName: 'N.A.'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '9',
|
||
|
|
firstName: 'Text-Template-1.56',
|
||
|
|
lastName: 'N.A.'
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
|
||
|
|
const treeCheckChange = (val, row, selection) => {
|
||
|
|
console.log('treeCheckChange', selection);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.clear-padding {
|
||
|
|
margin: -16px -20px;
|
||
|
|
}
|
||
|
|
:deep(.devui-table__cell) {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
.devui-table__tree-operate {
|
||
|
|
transform: translateY(-3px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|