mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-15 05:46:43 +08:00
style: 更新ManageListRemote.vue以动态计算授课教师列的最小宽度,优化输入框的最大长度限制,增强用户体验;调整index.scss以修正列表项文本对齐方式。
This commit is contained in:
@@ -445,6 +445,7 @@ li{
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
text-align: left;
|
||||||
.el-icon-warning-outline{
|
.el-icon-warning-outline{
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
|||||||
@@ -102,6 +102,7 @@
|
|||||||
:props="resOwnerCascaderProps"
|
:props="resOwnerCascaderProps"
|
||||||
:show-all-levels="false"
|
:show-all-levels="false"
|
||||||
@change="handleResOwnerChange"
|
@change="handleResOwnerChange"
|
||||||
|
@input.native="limitResOwnerInput"
|
||||||
filterable
|
filterable
|
||||||
></el-cascader>
|
></el-cascader>
|
||||||
</div>
|
</div>
|
||||||
@@ -181,7 +182,7 @@
|
|||||||
<span class="common-cell single-line-ellipsis">{{ formatSysTypeChain(scope.row) }}</span>
|
<span class="common-cell single-line-ellipsis">{{ formatSysTypeChain(scope.row) }}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</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">
|
<template slot-scope="scope">
|
||||||
<span class="common-cell">{{ scope.row.teacherName }}</span>
|
<span class="common-cell">{{ scope.row.teacherName }}</span>
|
||||||
</template>
|
</template>
|
||||||
@@ -471,6 +472,10 @@ export default {
|
|||||||
checkStrictly: true // 允许选择任意一级选项
|
checkStrictly: true // 允许选择任意一级选项
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
// 动态计算“授课教师”列的最小宽度,避免固定 260px
|
||||||
|
teacherColumnWidth() {
|
||||||
|
return this.calcColumnWidth('授课教师', 'teacherName');
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -629,6 +634,26 @@ export default {
|
|||||||
toggleAdvancedFilter() {
|
toggleAdvancedFilter() {
|
||||||
this.showAdvancedFilter = !this.showAdvancedFilter;
|
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() {
|
applyAppScrollbarStyle() {
|
||||||
if (this.scrollbarStyleApplied || typeof document === 'undefined') return;
|
if (this.scrollbarStyleApplied || typeof document === 'undefined') return;
|
||||||
if (document.getElementById('app-scrollbar-style')) {
|
if (document.getElementById('app-scrollbar-style')) {
|
||||||
@@ -787,6 +812,15 @@ export default {
|
|||||||
this.$refs.creatorSelect.query = limited;
|
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() {
|
handleTopSort() {
|
||||||
if (this.$refs.topSorter) {
|
if (this.$refs.topSorter) {
|
||||||
this.$refs.topSorter.open();
|
this.$refs.topSorter.open();
|
||||||
@@ -1582,7 +1616,7 @@ export default {
|
|||||||
if (row.isPermission && row.status != 2) {
|
if (row.isPermission && row.status != 2) {
|
||||||
actions.push({ key: 'edit', label: '编辑', className: 'action-link--primary' });
|
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' });
|
actions.push({ key: 'qrcode', label: '二维码', className: 'action-link--primary' });
|
||||||
}
|
}
|
||||||
if (row.isPermission && !this.forChoose && row.published) {
|
if (row.isPermission && !this.forChoose && row.published) {
|
||||||
@@ -1597,9 +1631,9 @@ export default {
|
|||||||
// 更多里的动作
|
// 更多里的动作
|
||||||
if (row.isPermission && row.published) {
|
if (row.isPermission && row.published) {
|
||||||
actions.push({ key: 'copy', label: '复制', className: 'action-link--primary' });
|
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) {
|
if (this.showSetTopFeature) {
|
||||||
actions.push({ key: 'toggleTop', label: row.isTop ? '取消置顶' : '置顶', className: '' });
|
actions.push({ key: 'toggleTop', label: row.isTop ? '取消置顶' : '置顶', className: 'action-link--primary' });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return actions;
|
return actions;
|
||||||
@@ -1762,11 +1796,6 @@ export default {
|
|||||||
background-image: url('~@/assets/images/svg/search_active.svg');
|
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 {
|
.icon-btn--reset {
|
||||||
background-image: url('~@/assets/images/svg/reset.svg');
|
background-image: url('~@/assets/images/svg/reset.svg');
|
||||||
background-size: 15px 15px;
|
background-size: 15px 15px;
|
||||||
|
|||||||
Reference in New Issue
Block a user