|
|
@@ -17,7 +17,7 @@
|
|
|
</header>
|
|
|
|
|
|
<div class="main-container">
|
|
|
- <div v-loading="loading" class="template-list">
|
|
|
+ <div v-loading="loading" class="template-list" :style="computedTemplateStyles()">
|
|
|
<div class="search">
|
|
|
<el-input v-model="name" placeholder="请输入模板名称" @keyup.enter.native="searchTemplateList">
|
|
|
<el-select slot="prepend" v-model="storage_type" style="width: 100px" @change="searchTemplateList">
|
|
|
@@ -28,7 +28,7 @@
|
|
|
<el-table
|
|
|
ref="templateList"
|
|
|
:data="template_list"
|
|
|
- height="540"
|
|
|
+ height="525"
|
|
|
highlight-current-row
|
|
|
@current-change="selectCourseware"
|
|
|
>
|
|
|
@@ -40,7 +40,7 @@
|
|
|
<el-table-column prop="id" label="编号" />
|
|
|
<el-table-column prop="name" label="名称" />
|
|
|
</el-table>
|
|
|
- <PaginationPage ref="pagination" :total="total" @getList="getTemplateList" />
|
|
|
+ <PaginationPage ref="pagination" :total="total" :pager-count="5" @getList="getTemplateList" />
|
|
|
</div>
|
|
|
|
|
|
<div class="courseware-preview">
|
|
|
@@ -407,6 +407,17 @@ export default {
|
|
|
if (this.curSelectId === nodeId) return;
|
|
|
this.curSelectId = nodeId;
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 计算模板列表样式,根据分页器的页码数量动态调整宽度
|
|
|
+ * 380px 是基础宽度,40px 是每个页码占用的宽度
|
|
|
+ */
|
|
|
+ computedTemplateStyles() {
|
|
|
+ let count = document.querySelectorAll('.template-list .el-pagination ul.el-pager li')?.length || 0;
|
|
|
+
|
|
|
+ return {
|
|
|
+ width: `${380 + count * 40}px`,
|
|
|
+ };
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -438,7 +449,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.template-list {
|
|
|
- width: 460px;
|
|
|
+ width: 500px;
|
|
|
}
|
|
|
|
|
|
.courseware-preview {
|
|
|
@@ -450,6 +461,7 @@ export default {
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
z-index: 9;
|
|
|
+ background-color: #fff;
|
|
|
|
|
|
.courseware-name {
|
|
|
margin: 2px 0 0 4px;
|