feat: table组件替换

This commit is contained in:
rd
2025-09-04 18:05:16 +08:00
parent aaa8a320c8
commit 3f5249c731
42 changed files with 1816 additions and 1833 deletions

View File

@ -1,6 +1,6 @@
<template>
<div class="business-wrap">
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
<div class="filter-wrap bg-#fff rounded-8px">
<div class="top flex h-64px px-24px py-10px justify-between items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">业务洞察报告</p>
</div>
@ -40,9 +40,18 @@
</div>
</div>
<div
class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
class="table-wrap bg-#fff rounded-8px px-24px py-24px flex-1 flex flex-col"
>
<a-table :columns="columns" :data="tableData" @change="handleChange" :pagination="false"> </a-table>
<Table :dataSource="tableData" :pagination="false" :showSorterTooltip="false" @change="handleChange">
<Table.Column
v-for="column in columns"
:key="column.dataIndex"
:title="column.title"
:dataIndex="column.dataIndex"
:width="column.width"
:minWidth="column.minWidth"
/>
</Table>
<div class="pagination-row">
<a-pagination
:total="pageInfo.total"
@ -62,7 +71,7 @@
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Button, Input, Space } from 'ant-design-vue';
import { Button, Input, Space, Table } from 'ant-design-vue';
const pageInfo = reactive({
page: 1,
@ -86,8 +95,8 @@ const columns = [
title: '服务/产品',
dataIndex: 'service_name',
slotName: 'rank',
width: 60,
minWidth: 60,
width: 100,
minWidth: 100,
},
{
title: '生成日期',

View File

@ -1,6 +1,6 @@
<template>
<div class="competitive-wrap">
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
<div class="filter-wrap bg-#fff rounded-8px ">
<div class="top flex h-64px px-24px py-10px justify-between items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">竞品对比报告</p>
</div>
@ -9,8 +9,8 @@
<div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center">
<span class="label">服务/产品</span>
<Space size="medium">
<Input v-model:value="query.name" class="w-240px" placeholder="请搜索..." size="medium" allowClear>
<Space>
<Input v-model:value="query.name" class="w-240px" placeholder="请搜索..." allowClear>
<template #prefix>
<icon-search />
</template>
@ -42,9 +42,46 @@
</div>
</div>
<div
class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
class="table-wrap bg-#fff rounded-8px px-24px py-24px flex-1 flex flex-col"
>
<a-table :columns="columns" :data="tableData" @change="handleChange" :pagination="false"> </a-table>
<Table :dataSource="tableData" :pagination="false" :showSorterTooltip="false" @change="handleChange">
<Table.Column
title="服务/产品"
dataIndex="service_name"
:width="60"
:minWidth="60"
/>
<Table.Column
title="生成日期"
dataIndex="create_time"
:width="120"
:minWidth="120"
/>
<Table.Column
:width="180"
:minWidth="180"
title="竞争对手"
dataIndex="customer"
/>
<Table.Column
title="最后更新日期"
dataIndex="volumeRate"
:width="180"
:minWidth="180"
/>
<Table.Column
title="操作人"
dataIndex="operator"
:width="120"
:minWidth="120"
/>
<Table.Column
title="操作"
dataIndex="operator"
:width="120"
:minWidth="120"
/>
</Table>
<div class="pagination-row">
<a-pagination
:total="pageInfo.total"
@ -63,7 +100,7 @@
</template>
<script setup lang="ts">
import { Button, Input, Space } from 'ant-design-vue';
import { Button, Input, Space, Table } from 'ant-design-vue';
import { reactive, ref } from 'vue';
const pageInfo = reactive({
@ -80,50 +117,7 @@ const onPageChange = () => {};
const onPageSizeChange = () => {};
const tableData = ref([]);
const columns = [
{
title: '服务/产品',
dataIndex: 'service_name',
slotName: 'rank',
width: 60,
minWidth: 60,
},
{
title: '生成日期',
dataIndex: 'create_time',
width: 120,
minWidth: 120,
},
{
titleSlotName: 'customer',
width: 180,
minWidth: 180,
title: '竞争对手',
dataIndex: 'customer',
slotName: 'hot',
},
{
titleSlotName: 'lasterUpdateTime',
title: '最后更新日期',
dataIndex: 'volumeRate',
width: 180,
minWidth: 180,
slotName: 'lasterUpdateTime',
},
{
title: '操作人',
dataIndex: 'operator',
width: 120,
minWidth: 120,
},
{
title: '操作',
dataIndex: 'operator',
width: 120,
minWidth: 120,
},
];
</script>
<style scoped lang="scss">