mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-13 04:46:44 +08:00
style: 更新ManageListRemote.vue以动态计算授课教师列的最小宽度,优化输入框的最大长度限制,增强用户体验;调整index.scss以修正列表项文本对齐方式。
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user