feat: table组件替换
This commit is contained in:
@ -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: '生成日期',
|
||||
|
||||
@ -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">
|
||||
|
||||
Reference in New Issue
Block a user