Situation-Awareness-Platform-Frontend/src/views/Jyh/Version/Detail/SBOM.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>
          <template #default="scope">
            <a class="devui-link" @click="showDetail = true">{{ scope.row.firstName }}</a>
          </template>
        </d-column>
        <d-column field="lastName" header="版本"></d-column>
      </d-table>
    </div>
  </Card>
  <d-drawer v-model="showDetail" style="width: 800px; padding: 20px">
    <SBOMDetail @close="showDetail = false" />
  </d-drawer>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import SBOMDetail from './SBOMDetail.vue';
const checked = ref(false);
const showDetail = 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>