feat: add column settings dropdown and enhance table display

- Introduced a dropdown for column settings in list view, allowing users to customize visible columns and their order via drag-and-drop. - Updated table columns to dynamically render based on user-selected visibility, improving the overall user experience. - Enhanced the display of customer information, including merging customer name and ID, and added tooltips for better clarity. - Refactored existing table columns to utilize a more flexible structure for rendering based on visibility settings.

feat: add column settings dropdown and enhance table display
- Introduced a dropdown for column settings in list view, allowing users to customize visible columns and their order via drag-and-drop. - Updated table columns to dynamically render based on user-selected visibility, improving the overall user experience. - Enhanced the display of customer information, including merging customer name and ID, and added tooltips for better clarity. - Refactored existing table columns to utilize a more flexible structure for rendering based on visibility settings.
“wangming”
1 parent f84588f8
Showing 1 changed file with 254 additions and 78 deletions
antis-ncc-admin/src/views/lqKhxx/index.vue
@@ -148,6 +148,28 @@
 							</el-button-group>
 						</div>
 						<div class="toolbar-right">
+							<el-dropdown v-if="viewMode === 'list'" trigger="click" hide-on-click="false">
+								<el-button size="small" icon="el-icon-setting">
+									列设置<i class="el-icon-arrow-down el-icon--right"></i>
+								</el-button>
+								<el-dropdown-menu slot="dropdown" class="column-setting-dropdown">
+									<div class="column-setting-panel" @click.stop>
+										<div class="column-setting-title">显示列（拖拽排序）</div>
+										<draggable v-model="tableColumnsOrder"
+											:options="{ handle: '.drag-handle', animation: 150, forceFallback: true, ghostClass: 'column-drag-ghost' }"
+											class="column-draggable-list" @end="saveColumnConfig">
+											<div v-for="colId in tableColumnsOrder" :key="colId"
+												class="column-draggable-item">
+												<i class="el-icon-rank drag-handle"></i>
+												<el-checkbox v-model="tableColumnsVisible[colId]"
+													@change="saveColumnConfig">
+													{{ (tableColumnsMeta[colId] && tableColumnsMeta[colId].label) || colId }}
+												</el-checkbox>
+											</div>
+										</draggable>
+									</div>
+								</el-dropdown-menu>
+							</el-dropdown>
 							<el-radio-group v-model="viewMode" size="small" @change="switchView">
 								<el-radio-button label="list">
 									<i class="el-icon-s-grid"></i> 列表
@@ -288,27 +310,29 @@
 						</div>
 					</div>
 				</div>
-				<NCC-table v-if="viewMode === 'list'" v-loading="listLoading" :data="list"
-					@selection-change="handleSelectionChange"
+				<NCC-table v-if="viewMode === 'list'" v-loading="listLoading" :data="list" has-c
+					@selection-change="handleSelectionChange" @sort-change="handleSortChange"
 					:header-cell-style="{ background: '#fafafa', color: '#262626', fontWeight: '600' }">
-					<!-- 客户id -->
-					<el-table-column label="客户ID" align="left" width="150px" fixed="left">
+					<template v-for="colId in visibleColumns">
+					<!-- 客户名称+档案号（合并，不单独显示客户ID） -->
+					<el-table-column v-if="colId === 'khmc'" key="khmc" label="客户名称" align="left"
+						class-name="column-khmc-full"
+						:min-width="tableColumnsMeta.khmc.width" :sortable="tableColumnsMeta.khmc.sortable ? 'custom' : false"
+						:prop="tableColumnsMeta.khmc.sidx">
 						<template slot-scope="scope">
-							<span class="cell-text-plain muted">{{ scope.row.id || '无' }}</span>
+							<el-tooltip :content="(scope.row.khmc || '无') + (scope.row.dah ? ' (' + scope.row.dah + ')' : '')" placement="top">
+								<div class="table-cell-with-icon table-cell-name-full">
+									<i class="el-icon-user-solid cell-icon primary"></i>
+									<span class="cell-text cell-text-full">{{ scope.row.khmc || '无' }}</span>
+									<span v-if="scope.row.dah" class="cell-text-plain muted" style="margin-left:6px">({{ scope.row.dah }})</span>
+								</div>
+							</el-tooltip>
 						</template>
 					</el-table-column>
-					<!-- 客户名称 -->
-					<el-table-column label="客户名称" align="left" width="100px" fixed="left">
-						<template slot-scope="scope">
-							<div class="table-cell-with-icon">
-								<i class="el-icon-user-solid cell-icon primary"></i>
-								<span class="cell-text">{{ scope.row.khmc || '无' }}</span>
-							</div>
-						</template>
-					</el-table-column>
-
 					<!-- 手机号 -->
-					<el-table-column label="手机号" align="left" width="130px" fixed="left">
+					<el-table-column v-else-if="colId === 'sjh'" key="sjh" label="手机号" align="left"
+						:min-width="tableColumnsMeta.sjh.width" :sortable="tableColumnsMeta.sjh.sortable ? 'custom' : false"
+						:prop="tableColumnsMeta.sjh.sidx">
 						<template slot-scope="scope">
 							<div class="table-cell-with-icon">
 								<i class="el-icon-mobile-phone cell-icon success"></i>
@@ -316,17 +340,21 @@
 							</div>
 						</template>
 					</el-table-column>
-
-					<!-- 档案号 -->
-					<el-table-column label="档案号" align="left" width="150px">
+					<!-- 归属门店 -->
+					<el-table-column v-else-if="colId === 'gsmd'" key="gsmd" label="归属门店" align="left"
+						:min-width="tableColumnsMeta.gsmd.width" :sortable="tableColumnsMeta.gsmd.sortable ? 'custom' : false"
+						:prop="tableColumnsMeta.gsmd.sidx">
 						<template slot-scope="scope">
-							<span class="cell-text-plain">{{ scope.row.dah || '无' }}</span>
+							<div class="table-cell-with-icon">
+								<i class="el-icon-office-building cell-icon info"></i>
+								<span class="cell-text">{{ scope.row.gsmdName || '无' }}</span>
+							</div>
 						</template>
 					</el-table-column>
-
-
 					<!-- 性别 -->
-					<el-table-column label="性别" align="center" width="70px">
+					<el-table-column v-else-if="colId === 'xb'" key="xb" label="性别" align="center"
+						:min-width="tableColumnsMeta.xb.width" :sortable="tableColumnsMeta.xb.sortable ? 'custom' : false"
+						:prop="tableColumnsMeta.xb.sidx">
 						<template slot-scope="scope">
 							<el-tag :type="scope.row.xb === '男' ? 'primary' : scope.row.xb === '女' ? 'danger' : 'info'"
 								size="small" effect="plain">
@@ -334,56 +362,46 @@
 							</el-tag>
 						</template>
 					</el-table-column>
-
-					<!-- 归属门店 -->
-					<el-table-column label="归属门店" align="left" width="120px">
-						<template slot-scope="scope">
-							<div class="table-cell-with-icon">
-								<i class="el-icon-office-building cell-icon info"></i>
-								<span class="cell-text">{{ scope.row.gsmdName || '无' }}</span>
-							</div>
-						</template>
-					</el-table-column>
-
 					<!-- 客户类型 -->
-					<el-table-column label="客户类型" align="center" width="100px">
+					<el-table-column v-else-if="colId === 'khlx'" key="khlx" label="客户类型" align="center"
+						:min-width="tableColumnsMeta.khlx.width" :sortable="tableColumnsMeta.khlx.sortable ? 'custom' : false"
+						:prop="tableColumnsMeta.khlx.sidx">
 						<template slot-scope="scope">
 							<span class="cell-text-plain">{{ scope.row.khlxName || '无' }}</span>
 						</template>
 					</el-table-column>
 					<!-- 健康师 -->
-					<el-table-column label="健康师" align="left" width="70px">
+					<el-table-column v-else-if="colId === 'mainHealthUser'" key="mainHealthUser" label="健康师" align="left" :min-width="tableColumnsMeta.mainHealthUser.width">
 						<template slot-scope="scope">
 							<span class="cell-text-plain">{{ scope.row.mainHealthUserName || '无' }}</span>
 						</template>
 					</el-table-column>
 					<!-- 负责顾问 -->
-					<el-table-column label="负责顾问" align="left" width="80px">
+					<el-table-column v-else-if="colId === 'subHealthUser'" key="subHealthUser" label="负责顾问" align="left" :min-width="tableColumnsMeta.subHealthUser.width">
 						<template slot-scope="scope">
 							<span class="cell-text-plain">{{ scope.row.subHealthUserName || '无' }}</span>
 						</template>
 					</el-table-column>
 					<!-- 进店渠道 -->
-					<el-table-column label="进店渠道" align="left" width="100px">
+					<el-table-column v-else-if="colId === 'jdqd'" key="jdqd" label="进店渠道" align="left" :min-width="tableColumnsMeta.jdqd.width">
 						<template slot-scope="scope">
 							<span class="cell-text-plain">{{ scope.row.jdqd || '无' }}</span>
 						</template>
 					</el-table-column>
 					<!-- 推荐人 -->
-					<el-table-column label="推荐人" align="left" width="80px">
+					<el-table-column v-else-if="colId === 'tjr'" key="tjr" label="推荐人" align="left" :min-width="tableColumnsMeta.tjr.width">
 						<template slot-scope="scope">
 							<span class="cell-text-plain">{{ scope.row.tjrName || '无' }}</span>
 						</template>
 					</el-table-column>
 					<!-- 拓客人员 -->
-					<el-table-column label="拓客人员" align="left" width="80px">
+					<el-table-column v-else-if="colId === 'expandUser'" key="expandUser" label="拓客人员" align="left" :min-width="tableColumnsMeta.expandUser.width">
 						<template slot-scope="scope">
 							<span class="cell-text-plain">{{ scope.row.expandUserName || '无' }}</span>
 						</template>
 					</el-table-column>
-
 					<!-- 会员类型 -->
-					<el-table-column label="会员类型" align="center" min-width="130">
+					<el-table-column v-else-if="colId === 'memberType'" key="memberType" label="会员类型" align="center" :min-width="tableColumnsMeta.memberType.width">
 						<template slot-scope="scope">
 							<div class="member-tags">
 								<el-tag v-if="scope.row.isBeautyMember === 1" type="success" size="mini"
@@ -402,7 +420,9 @@
 					</el-table-column>
 					<!-- 消费等级 -->
-					<el-table-column label="消费等级" align="center" width="90px">
+					<el-table-column v-else-if="colId === 'consumeLevel'" key="consumeLevel" label="消费等级" align="center"
+						:min-width="tableColumnsMeta.consumeLevel.width" :sortable="tableColumnsMeta.consumeLevel.sortable ? 'custom' : false"
+						:prop="tableColumnsMeta.consumeLevel.sidx">
 						<template slot-scope="scope">
 							<el-tag :type="getConsumeLevelType(scope.row.consumeLevel)" size="small" effect="dark">
 								{{ getConsumeLevelName(scope.row.consumeLevel) }}
@@ -411,42 +431,54 @@
 					</el-table-column>
 					<!-- 开卡总金额 -->
-					<el-table-column label="开卡总金额" align="right" width="120">
+					<el-table-column v-else-if="colId === 'totalBillingAmount'" key="totalBillingAmount" label="开卡总金额" align="right"
+						:min-width="tableColumnsMeta.totalBillingAmount.width" :sortable="tableColumnsMeta.totalBillingAmount.sortable ? 'custom' : false"
+						:prop="tableColumnsMeta.totalBillingAmount.sidx">
 						<template slot-scope="scope">
 							<span class="amount-text primary">{{ formatMoney(scope.row.totalBillingAmount) }}</span>
 						</template>
 					</el-table-column>
-					<!-- 剩余权益总金额 -->
-					<el-table-column label="剩余权益" align="right" width="120">
+					<!-- 剩余权益 -->
+					<el-table-column v-else-if="colId === 'remainingRightsAmount'" key="remainingRightsAmount" label="剩余权益" align="right"
+						:min-width="tableColumnsMeta.remainingRightsAmount.width" :sortable="tableColumnsMeta.remainingRightsAmount.sortable ? 'custom' : false"
+						:prop="tableColumnsMeta.remainingRightsAmount.sidx">
 						<template slot-scope="scope">
 							<span class="amount-text success">{{ formatMoney(scope.row.remainingRightsAmount) }}</span>
 						</template>
 					</el-table-column>
-					<!-- 首次到店时间 -->
-					<el-table-column label="首次到店" align="left" width="110">
+					<!-- 首次到店 -->
+					<el-table-column v-else-if="colId === 'firstVisitTime'" key="firstVisitTime" label="首次到店" align="left"
+						:min-width="tableColumnsMeta.firstVisitTime.width" :sortable="tableColumnsMeta.firstVisitTime.sortable ? 'custom' : false"
+						:prop="tableColumnsMeta.firstVisitTime.sidx">
 						<template slot-scope="scope">
 							<span class="cell-text-plain muted">{{ formatDate(scope.row.firstVisitTime) || '无' }}</span>
 						</template>
 					</el-table-column>
-					<!-- 最后到店时间 -->
-					<el-table-column label="最后到店" align="left" width="110">
+					<!-- 最后到店 -->
+					<el-table-column v-else-if="colId === 'lastVisitTime'" key="lastVisitTime" label="最后到店" align="left"
+						:min-width="tableColumnsMeta.lastVisitTime.width" :sortable="tableColumnsMeta.lastVisitTime.sortable ? 'custom' : false"
+						:prop="tableColumnsMeta.lastVisitTime.sidx">
 						<template slot-scope="scope">
 							<span class="cell-text-plain muted">{{ formatDate(scope.row.lastVisitTime) || '无' }}</span>
 						</template>
 					</el-table-column>
-					<!-- 到店天数 -->
-					<el-table-column label="到店次数" align="center" width="90px">
+					<!-- 到店次数 -->
+					<el-table-column v-else-if="colId === 'visitDays'" key="visitDays" label="到店次数" align="center"
+						:min-width="tableColumnsMeta.visitDays.width" :sortable="tableColumnsMeta.visitDays.sortable ? 'custom' : false"
+						:prop="tableColumnsMeta.visitDays.sidx">
 						<template slot-scope="scope">
 							<el-tag size="small" type="info" effect="plain">{{ scope.row.visitDays || 0 }}次</el-tag>
 						</template>
 					</el-table-column>
 					<!-- 沉睡天数 -->
-					<el-table-column label="沉睡天数" align="center" width="90px">
+					<el-table-column v-else-if="colId === 'sleepDays'" key="sleepDays" label="沉睡天数" align="center"
+						:min-width="tableColumnsMeta.sleepDays.width" :sortable="tableColumnsMeta.sleepDays.sortable ? 'custom' : false"
+						:prop="tableColumnsMeta.sleepDays.sidx">
 						<template slot-scope="scope">
 							<el-tag size="small" :type="scope.row.sleepDays > 30 ? 'warning' : 'success'"
 								effect="plain">
@@ -454,27 +486,23 @@
 							</el-tag>
 						</template>
 					</el-table-column>
+					</template>
-					<!-- 操作 -->
-					<el-table-column label="操作" width="320" align="left" fixed="right">
+					<!-- 操作（下拉，减少宽度） -->
+					<el-table-column label="操作" width="80" align="center" fixed="right">
 						<template slot-scope="scope">
-							<div class="action-buttons">
-								<el-button type="text" class="detail-btn" icon="el-icon-view"
-									@click="openMemberPortrait(scope.row.id)">
-									详情
+							<el-dropdown trigger="click" @command="handleOpCommand($event, scope.row)">
+								<el-button type="text" size="small">
+									操作<i class="el-icon-arrow-down el-icon--right"></i>
 								</el-button>
-								<el-button type="text" class="edit-btn" @click="showMemberRights(scope.row.id)">
-									会员权益
-								</el-button>
-								<el-button v-has="'btn_edit'" type="text" icon="el-icon-edit"
-									@click="addOrUpdateHandle(scope.row.id)" class="edit-btn">
-									编辑
-								</el-button>
-								<el-button v-has="'btn_remove'" type="text" icon="el-icon-delete"
-									@click="handleDel(scope.row.id)" class="delete-btn">
-									删除
-								</el-button>
-							</div>
+								<el-dropdown-menu slot="dropdown">
+									<el-dropdown-item command="detail" icon="el-icon-view">详情</el-dropdown-item>
+									<el-dropdown-item command="rights" icon="el-icon-folder-opened">会员权益</el-dropdown-item>
+									<el-dropdown-item v-has="'btn_edit'" command="edit" icon="el-icon-edit">编辑</el-dropdown-item>
+									<el-dropdown-item v-has="'btn_remove'" command="delete" icon="el-icon-delete"
+										style="color: #F56C6C;">删除</el-dropdown-item>
+								</el-dropdown-menu>
+							</el-dropdown>
 						</template>
 					</el-table-column>
 				</NCC-table>
@@ -499,8 +527,9 @@ import MemberRightsDialog from &#39;./member-rights-dialog.vue&#39;
 import DetailDialog from './detail-dialog.vue'
 import MemberPortraitDialog from '@/components/member-portrait-dialog.vue'
 import { previewDataInterface } from '@/api/systemData/dataInterface'
+import draggable from 'vuedraggable'
 export default {
-	components: { NCCForm, ExportBox, MemberRightsDialog, DetailDialog, MemberPortraitDialog },
+	components: { NCCForm, ExportBox, MemberRightsDialog, DetailDialog, MemberPortraitDialog, draggable },
 	data() {
 		return {
 			viewMode: 'list', // list or card
@@ -553,7 +582,30 @@ export default {
 				currentPage: 1,
 				pageSize: 20,
 				sort: "desc",
-				sidx: "",
+				sidx: "id",
+			},
+			// 列配置：顺序与显示（持久化到 localStorage）
+			tableColumnsOrder: ['khmc', 'sjh', 'gsmd', 'xb', 'khlx', 'mainHealthUser', 'subHealthUser', 'jdqd', 'tjr', 'expandUser', 'memberType', 'consumeLevel', 'totalBillingAmount', 'remainingRightsAmount', 'firstVisitTime', 'lastVisitTime', 'visitDays', 'sleepDays'],
+			tableColumnsVisible: {},
+			tableColumnsMeta: {
+				khmc: { label: '客户名称', width: '250', sortable: true, sidx: 'khmc' },
+				sjh: { label: '手机号', width: '130px', sortable: true, sidx: 'sjh' },
+				gsmd: { label: '归属门店', width: '120px', sortable: true, sidx: 'gsmdName' },
+				xb: { label: '性别', width: '85px', sortable: true, sidx: 'xb' },
+				khlx: { label: '客户类型', width: '100px', sortable: true, sidx: 'khlx' },
+				mainHealthUser: { label: '健康师', width: '85px', sortable: false },
+				subHealthUser: { label: '负责顾问', width: '95px', sortable: false },
+				jdqd: { label: '进店渠道', width: '100px', sortable: false },
+				tjr: { label: '推荐人', width: '85px', sortable: false },
+				expandUser: { label: '拓客人员', width: '95px', sortable: false },
+				memberType: { label: '会员类型', width: '180', sortable: false },
+				consumeLevel: { label: '消费等级', width: '100px', sortable: true, sidx: 'consumeLevel' },
+				totalBillingAmount: { label: '开卡总金额', width: '130', sortable: true, sidx: 'totalBillingAmount' },
+				remainingRightsAmount: { label: '剩余权益', width: '130', sortable: true, sidx: 'remainingRightsAmount' },
+				firstVisitTime: { label: '首次到店', width: '120', sortable: true, sidx: 'firstVisitTime' },
+				lastVisitTime: { label: '最后到店', width: '120', sortable: true, sidx: 'lastVisitTime' },
+				visitDays: { label: '到店次数', width: '100px', sortable: true, sidx: 'visitDays' },
+				sleepDays: { label: '沉睡天数', width: '100px', sortable: true, sidx: 'sleepDays' },
 			},
 			formVisible: false,
 			exportBoxVisible: false,
@@ -630,10 +682,15 @@ export default {
 			kdhyOptions: [],
 		}
 	},
-	computed: {},
+	computed: {
+		visibleColumns() {
+			return this.tableColumnsOrder.filter(id => this.tableColumnsVisible[id] !== false)
+		}
+	},
 	created() {
 		// 默认使用列表视图，不恢复本地存储的视图模式
 		this.viewMode = 'list';
+		this.loadColumnConfig();
 		this.initData();
 		this.getgsmdOptions();
 		this.getkhlxOptions();
@@ -1095,6 +1152,41 @@ export default {
 			} else if (command === 'delete') {
 				this.handleDel(item.id);
 			}
+		},
+		handleOpCommand(cmd, row) {
+			if (cmd === 'detail') this.openMemberPortrait(row.id)
+			else if (cmd === 'rights') this.showMemberRights(row.id)
+			else if (cmd === 'edit') this.addOrUpdateHandle(row.id)
+			else if (cmd === 'delete') this.handleDel(row.id)
+		},
+		handleColumnCommand() {},
+		loadColumnConfig() {
+			try {
+				const saved = localStorage.getItem('lqKhxx_columnConfig')
+				if (saved) {
+					const { order, visible } = JSON.parse(saved)
+					if (Array.isArray(order)) this.tableColumnsOrder = order
+					if (visible && typeof visible === 'object') this.tableColumnsVisible = { ...this.tableColumnsVisible, ...visible }
+				}
+			} catch (e) { console.warn('loadColumnConfig error:', e) }
+			// 确保所有列都有 visible 默认值
+			this.tableColumnsOrder.forEach(id => {
+				if (this.tableColumnsVisible[id] === undefined) this.$set(this.tableColumnsVisible, id, true)
+			})
+		},
+		saveColumnConfig() {
+			try {
+				localStorage.setItem('lqKhxx_columnConfig', JSON.stringify({
+					order: this.tableColumnsOrder,
+					visible: this.tableColumnsVisible
+				}))
+			} catch (e) { console.warn('saveColumnConfig error:', e) }
+		},
+		handleSortChange({ prop, order }) {
+			if (!prop || !order) return
+			this.listQuery.sidx = prop
+			this.listQuery.sort = order === 'ascending' ? 'asc' : 'desc'
+			this.initData()
 		}
 	}
 }
@@ -2672,6 +2764,59 @@ export default {
 /* 滑动展开筛选面板 - 流畅的向下展开动画 */
+/* 列设置下拉面板 */
+.column-setting-dropdown {
+	padding: 0 !important;
+	min-width: 220px;
+}
+.column-setting-panel {
+	padding: 12px 16px;
+	max-height: 400px;
+	overflow-y: auto;
+}
+.column-setting-title {
+	font-size: 13px;
+	color: #606266;
+	margin-bottom: 12px;
+	font-weight: 500;
+}
+.column-draggable-list {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+.column-drag-ghost {
+	opacity: 0.5;
+	background: #e6f7ff;
+}
+.column-draggable-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 6px 8px;
+	border-radius: 6px;
+	transition: background 0.2s;
+	&:hover {
+		background: #f5f7fa;
+	}
+	.drag-handle {
+		color: #909399;
+		font-size: 14px;
+		cursor: grab;
+		user-select: none;
+		flex-shrink: 0;
+		padding: 2px;
+		&:active {
+			cursor: grabbing;
+		}
+	}
+	.el-checkbox {
+		flex: 1;
+		margin-right: 0;
+		min-width: 0;
+	}
+}
+
 .toolbar-card {
 	margin-bottom: 16px;
 	border-radius: 12px;
@@ -2743,6 +2888,11 @@ export default {
 		font-size: 14px;
 		border-bottom: 2px solid #e8e8e8;
 		padding: 14px 0;
+		white-space: nowrap;
+
+		.cell {
+			white-space: nowrap !important;
+		}
 	}
 	td {
@@ -2755,6 +2905,17 @@ export default {
 		backface-visibility: hidden;
 	}
+	td.column-khmc-full {
+		overflow: visible !important;
+		text-overflow: unset;
+
+		.cell {
+			overflow: visible !important;
+			text-overflow: unset;
+			min-width: max-content;
+		}
+	}
+
 	tr {
 		transition: background-color 0.15s ease;
 		will-change: background-color;
@@ -2835,6 +2996,17 @@ export default {
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
+
+	&.table-cell-name-full {
+		overflow: visible;
+		min-width: max-content;
+
+		.cell-text-full {
+			overflow: visible;
+			text-overflow: unset;
+			white-space: nowrap;
+		}
+	}
 }
 .cell-text-plain {
@@ -2872,15 +3044,17 @@ export default {
 	}
 }
-// 会员标签组
+// 会员标签组（列表内不换行）
 .member-tags {
 	display: flex;
 	gap: 4px;
-	flex-wrap: wrap;
+	flex-wrap: nowrap;
 	justify-content: center;
+	white-space: nowrap;
 	.el-tag {
 		margin: 0;
+		flex-shrink: 0;
 	}
 }
@@ -3108,16 +3282,18 @@ export default {
 	}
 }
-/* 标签组样式 */
+/* 标签组样式（表格内会员类型不换行） */
 .member-tags {
 	display: flex;
 	gap: 6px;
-	flex-wrap: wrap;
+	flex-wrap: nowrap;
 	justify-content: center;
 	align-items: center;
+	white-space: nowrap;
 	.el-tag {
 		margin: 0;
+		flex-shrink: 0;
 	}
 }