style: 更新ManageListRemote.vue以动态计算授课教师列的最小宽度,优化输入框的最大长度限制,增强用户体验;调整index.scss以修正列表项文本对齐方式。

This commit is contained in:
huweihang
2025-12-12 18:13:57 +08:00
parent ef926e6418
commit f680e1c394
2 changed files with 39 additions and 9 deletions

View File

@@ -445,6 +445,7 @@ li{
display: flex;
align-items: baseline;
justify-content: center;
text-align: left;
.el-icon-warning-outline{
margin-right: 6px;
font-size: 18px;

View File

@@ -102,6 +102,7 @@
:props="resOwnerCascaderProps"
:show-all-levels="false"
@change="handleResOwnerChange"
@input.native="limitResOwnerInput"
filterable
></el-cascader>
</div>
@@ -181,7 +182,7 @@
<span class="common-cell single-line-ellipsis">{{ formatSysTypeChain(scope.row) }}</span>
</template>
</el-table-column>
<el-table-column label="授课教师" prop="teacherName" min-width="260" align="center" show-overflow-tooltip>
<el-table-column label="授课教师" prop="teacherName" :min-width="teacherColumnWidth" align="center" >
<template slot-scope="scope">
<span class="common-cell">{{ scope.row.teacherName }}</span>
</template>
@@ -471,6 +472,10 @@ export default {
checkStrictly: true // 允许选择任意一级选项
};
},
// 动态计算“授课教师”列的最小宽度,避免固定 260px
teacherColumnWidth() {
return this.calcColumnWidth('授课教师', 'teacherName');
}
},
data() {
return {
@@ -629,6 +634,26 @@ export default {
toggleAdvancedFilter() {
this.showAdvancedFilter = !this.showAdvancedFilter;
},
// 计算文本宽度(通过隐藏 span 获取实际宽度)
getTextWidth(text = '') {
if (typeof document === 'undefined') return 0;
const span = document.createElement('span');
span.innerText = text;
span.style.cssText = 'position:absolute;visibility:hidden;font-size:14px;font-family:inherit;white-space:nowrap;';
document.body.appendChild(span);
const { width } = span.getBoundingClientRect();
document.body.removeChild(span);
return Math.ceil(width);
},
// 计算列宽(头+内容取最大值,加 padding并控制最小值
calcColumnWidth(label, prop, padding = 24, min = 260, max = Infinity) {
const contents = (this.pageData || []).map(row => this.getTextWidth((row && row[prop]) || ''));
const maxContentWidth = contents.length ? Math.max(...contents) : 0;
const labelWidth = this.getTextWidth(label || '');
const baseWidth = Math.max(maxContentWidth, labelWidth) + padding;
const clamped = Math.max(min, Math.min(baseWidth, max));
return `${clamped}px`;
},
applyAppScrollbarStyle() {
if (this.scrollbarStyleApplied || typeof document === 'undefined') return;
if (document.getElementById('app-scrollbar-style')) {
@@ -787,6 +812,15 @@ export default {
this.$refs.creatorSelect.query = limited;
}
},
limitResOwnerInput(event) {
const limited = (event && event.target && event.target.value ? event.target.value : '').slice(0, 200);
if (event && event.target && event.target.value !== limited) {
event.target.value = limited;
}
if (this.$refs.resOwnerCascader) {
this.$refs.resOwnerCascader.inputValue = limited;
}
},
handleTopSort() {
if (this.$refs.topSorter) {
this.$refs.topSorter.open();
@@ -1582,7 +1616,7 @@ export default {
if (row.isPermission && row.status != 2) {
actions.push({ key: 'edit', label: '编辑', className: 'action-link--primary' });
}
if (this.showSetTopFeature && row.published) {
if (row.published) {
actions.push({ key: 'qrcode', label: '二维码', className: 'action-link--primary' });
}
if (row.isPermission && !this.forChoose && row.published) {
@@ -1597,9 +1631,9 @@ export default {
// 更多里的动作
if (row.isPermission && row.published) {
actions.push({ key: 'copy', label: '复制', className: 'action-link--primary' });
actions.push({ key: 'toggleEnable', label: row.enabled ? '停用' : '启用', className: 'action-link--bold' });
actions.push({ key: 'toggleEnable', label: row.enabled ? '停用' : '启用', className: 'action-link--primary' });
if (this.showSetTopFeature) {
actions.push({ key: 'toggleTop', label: row.isTop ? '取消置顶' : '置顶', className: '' });
actions.push({ key: 'toggleTop', label: row.isTop ? '取消置顶' : '置顶', className: 'action-link--primary' });
}
}
return actions;
@@ -1762,11 +1796,6 @@ export default {
background-image: url('~@/assets/images/svg/search_active.svg');
}
.icon-btn--search:hover,
.icon-btn--search:active {
// background-image: url('~@/assets/images/svg/search_active.svg');
}
.icon-btn--reset {
background-image: url('~@/assets/images/svg/reset.svg');
background-size: 15px 15px;