feat: table组件替换
This commit is contained in:
@ -17,44 +17,51 @@
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="dataList"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
:scroll="true"
|
||||
<Table
|
||||
:dataSource="dataList"
|
||||
:pagination="false"
|
||||
:showSorterTooltip="false"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #empty>
|
||||
<Table.Column
|
||||
v-for="column in columns"
|
||||
:key="column.dataIndex"
|
||||
:title="column.title"
|
||||
:dataIndex="column.dataIndex"
|
||||
:width="column.width"
|
||||
:minWidth="column.minWidth"
|
||||
:sortable="column.sortable"
|
||||
>
|
||||
<template v-if="column.slotName === 'rank'" #customRender="{ record }">
|
||||
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<span v-else>{{ record.rank }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.slotName === 'keywords'" #customRender="{ record }">
|
||||
<a-tag
|
||||
v-for="item in record.keywords"
|
||||
:key="item"
|
||||
class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-5px"
|
||||
>{{ item }}</a-tag
|
||||
>
|
||||
</template>
|
||||
<template v-else-if="column.slotName === 'frequency'" #customRender="{ record }">
|
||||
<a-tag
|
||||
:class="`!rounded-2px !px-8px !py-1px !bg-${frequencyStatus[record.frequency].bgColor} !h-22px !color-${
|
||||
frequencyStatus[record.frequency].color
|
||||
}`"
|
||||
>{{ frequencyStatus[record.frequency].label }}</a-tag
|
||||
>
|
||||
</template>
|
||||
<template v-else-if="column.slotName === 'optional'" #customRender="{ record }">
|
||||
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #rank="{ record }">
|
||||
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<span v-else>{{ record.rank }}</span>
|
||||
</template>
|
||||
<template #keywords="{ record }">
|
||||
<a-tag
|
||||
v-for="item in record.keywords"
|
||||
:key="item"
|
||||
class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-5px"
|
||||
>{{ item }}</a-tag
|
||||
>
|
||||
</template>
|
||||
<template #frequency="{ record }">
|
||||
<a-tag
|
||||
:class="`!rounded-2px !px-8px !py-1px !bg-${frequencyStatus[record.frequency].bgColor} !h-22px !color-${
|
||||
frequencyStatus[record.frequency].color
|
||||
}`"
|
||||
>{{ frequencyStatus[record.frequency].label }}</a-tag
|
||||
>
|
||||
</template>
|
||||
|
||||
<template #optional="{ record }">
|
||||
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
|
||||
</template>
|
||||
</a-table>
|
||||
</Table>
|
||||
</Space>
|
||||
|
||||
<Modal
|
||||
@ -120,7 +127,7 @@
|
||||
|
||||
<script setup>
|
||||
import topHeader from './topHeader.vue';
|
||||
import { Modal, Button, Tooltip, Space } from 'ant-design-vue';
|
||||
import { Modal, Button, Tooltip, Space, Table } from 'ant-design-vue';
|
||||
import { fetchUserPainPointsDetail, fetchUserPainPointsList } from '@/api/all/index';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import top1 from '@/assets/img/captcha/top1.svg';
|
||||
|
||||
Reference in New Issue
Block a user