feat: table组件替换
This commit is contained in:
@ -10,70 +10,77 @@
|
||||
<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 === 'hot'" #customRender="{ record }">
|
||||
<img
|
||||
v-for="i in record.hot"
|
||||
:key="i"
|
||||
:src="starImages[i - 1]"
|
||||
style="width: 16px; height: 16px"
|
||||
class="mr-2px"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.slotName === 'sentiment'" #customRender="{ record }">
|
||||
<img v-if="record.felling == '2'" src="@/assets/img/hottranslation/good.png" class="w-24px h-24px" />
|
||||
<img v-else-if="record.felling == '1'" src="@/assets/img/hottranslation/normal.png" class="w-24px h-24px" />
|
||||
<img v-else-if="record.felling == '0'" src="@/assets/img/hottranslation/poor.png" class="w-24px h-24px" />
|
||||
</template>
|
||||
<template v-else-if="column.slotName === 'optional'" #customRender="{ record }">
|
||||
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
|
||||
</template>
|
||||
<template v-else-if="column.titleSlotName === 'hotTitle'" #title>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-8px">热度指数</span>
|
||||
<Tooltip>
|
||||
<template #title>综合话题出现频次、互动数据(如点赞、收藏、评论)加权计算的热度得分。</template>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.titleSlotName === 'sentimentTitle'" #title>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-8px">情感倾向</span>
|
||||
<Tooltip>
|
||||
<template #title
|
||||
>统计该行业下全部内容的情绪分布,选取占比最高的情绪类型作为该话题的整体情感倾向。</template
|
||||
>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #hotTitle>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-8px">热度指数</span>
|
||||
<Tooltip>
|
||||
<template #title>综合话题出现频次、互动数据(如点赞、收藏、评论)加权计算的热度得分。</template>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<template #sentimentTitle>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-8px">情感倾向</span>
|
||||
<Tooltip>
|
||||
<template #title
|
||||
>统计该行业下全部内容的情绪分布,选取占比最高的情绪类型作为该话题的整体情感倾向。</template
|
||||
>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</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 #hot="{ record }">
|
||||
<img
|
||||
v-for="i in record.hot"
|
||||
:key="i"
|
||||
:src="starImages[i - 1]"
|
||||
style="width: 16px; height: 16px"
|
||||
class="mr-2px"
|
||||
/>
|
||||
</template>
|
||||
<template #sentiment="{ record }">
|
||||
<img v-if="record.felling == '2'" src="@/assets/img/hottranslation/good.png" class="w-24px h-24px" />
|
||||
<img v-else-if="record.felling == '1'" src="@/assets/img/hottranslation/normal.png" class="w-24px h-24px" />
|
||||
<img v-else-if="record.felling == '0'" src="@/assets/img/hottranslation/poor.png" class="w-24px h-24px" />
|
||||
</template>
|
||||
|
||||
<template #optional="{ record }">
|
||||
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
|
||||
</template>
|
||||
</a-table>
|
||||
</Table>
|
||||
</div>
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
@ -146,7 +153,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 { ref, computed } from 'vue';
|
||||
import { fetchIndustriesTree, fetchIndustryTopics, fetchIndustryTopicDetail } from '@/api/all/index';
|
||||
import star1 from '@/assets/img/hottranslation/star-fill1.png';
|
||||
@ -256,7 +263,7 @@ onMounted(() => {
|
||||
const getIndustriesTree = async () => {
|
||||
const res = await fetchIndustriesTree();
|
||||
industriesTree.value = res;
|
||||
selectedIndustry.value = res[0].id;
|
||||
selectedIndustry.value = res[0]?.id;
|
||||
getIndustryTopics();
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user