|
@@ -11,6 +11,14 @@
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
|
|
+ <template #platform="{ row }">
|
|
|
|
|
+ <div class="flex flex-wrap gap-2">
|
|
|
|
|
+ <template v-for="item in (Array.isArray(row.platformList) ? row.platformList : (row.platformList ? row.platformList.split(',') : []))" :key="item">
|
|
|
|
|
+ <span class="platform-tag" :style="getPlatformStyle(item)">{{ item }}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+
|
|
|
<!-- 操作列 -->
|
|
<!-- 操作列 -->
|
|
|
<template #action="{ row }">
|
|
<template #action="{ row }">
|
|
|
<el-button link type="primary" @click="handleEdit(row)">[编辑]</el-button>
|
|
<el-button link type="primary" @click="handleEdit(row)">[编辑]</el-button>
|
|
@@ -85,4 +93,27 @@
|
|
|
const handleExport = () => {
|
|
const handleExport = () => {
|
|
|
pageRef.value?.exportData();
|
|
pageRef.value?.exportData();
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
|
|
+ const getPlatformStyle = (platform) => {
|
|
|
|
|
+ const styleMap = {
|
|
|
|
|
+ '拼多多': { backgroundColor: '#FF0000', color: '#FFFFFF' },
|
|
|
|
|
+ '淘宝': { backgroundColor: '#E6A23C', color: '#FFFFFF' },
|
|
|
|
|
+ '孔网': { backgroundColor: '#B22222', color: '#FFFFFF' },
|
|
|
|
|
+ '小程序': { backgroundColor: '#4CAF50', color: '#FFFFFF' }
|
|
|
|
|
+ };
|
|
|
|
|
+ return styleMap[platform] || { backgroundColor: '#909399', color: '#FFFFFF' };
|
|
|
|
|
+ };
|
|
|
</script>
|
|
</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.platform-tag {
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ padding: 2px 10px;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ line-height: 22px;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|