教材增加选中效果

This commit is contained in:
lyc 2024-07-14 16:49:17 +08:00
parent 51ade77d9b
commit 4eaca4c681
2 changed files with 15 additions and 21 deletions

View File

@ -5,7 +5,7 @@
<i class="iconfont icon-xiangyou"></i> <i class="iconfont icon-xiangyou"></i>
</div> </div>
<div class="book-list"> <div class="book-list">
<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"> <el-tree :data="treeData" :props="defaultProps" highlight-current @node-click="handleNodeClick">
<template #default="{ node }"> <template #default="{ node }">
<span :title="node.label" class="tree-label">{{ node.label }}</span> <span :title="node.label" class="tree-label">{{ node.label }}</span>
</template> </template>
@ -13,7 +13,7 @@
</div> </div>
</div> </div>
<!--弹窗 选择教材--> <!--弹窗 选择教材-->
<el-dialog v-model="dialogVisible" class="choose-dialog" :show-close="false" width="550" <el-dialog v-model="dialogVisible" append-to-body :show-close="false" width="550"
style="border-radius: 10px; padding: 10px 15px;"> style="border-radius: 10px; padding: 10px 15px;">
<template #header> <template #header>
<div class="choose-book-header flex"> <div class="choose-book-header flex">
@ -161,6 +161,7 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.book-wrap { .book-wrap {
width: 300px; width: 300px;
height: 100%; height: 100%;
@ -179,6 +180,7 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
border-bottom: solid #f4f5f7 1px; border-bottom: solid #f4f5f7 1px;
font-size: 15px; font-size: 15px;
font-weight: 600;
} }
.book-list { .book-list {
@ -252,7 +254,9 @@ onMounted(() => {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
:deep(.el-dialog__header) { :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
padding-bottom: 10px; background-color: #d9e8fe !important;
color: #409EFF
} }
</style> </style>

View File

@ -19,21 +19,10 @@
</div> </div>
<div class="flex-type flex"> <div class="flex-type flex">
<span class="name">类别</span> <span class="name">类别</span>
<el-dropdown> <el-select v-model="fileType" placeholder="Select" style="width: 100px">
<span class="el-dropdown-link"> <el-option v-for="item in resourceType" :key="item.alue" :label="item.label" :value="item.value" />
Dropdown List </el-select>
<!-- <el-icon class="el-icon--right">
</el-icon> -->
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item in resourceType" :key="item in value">Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div> </div>
<el-button type="primary" link @click="delFile(index)">删除</el-button> <el-button type="primary" link @click="delFile(index)">删除</el-button>
</div> </div>
@ -67,6 +56,8 @@ const dialogValue = ref(false)
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
// //
const fileList = ref([]) const fileList = ref([])
const fileType = ref(1)
// //
const resourceType = ref([ const resourceType = ref([
{ {
@ -109,8 +100,6 @@ const hanleFileBefore = (rawFile) => {
ElMessage.error('文件大小错误! 请上传小于100M的文件!') ElMessage.error('文件大小错误! 请上传小于100M的文件!')
return false return false
} }
console.log(rawFile)
fileList.value.push(rawFile) fileList.value.push(rawFile)
return false return false
@ -162,6 +151,7 @@ const closeDialog = () => {
.file-list-item { .file-list-item {
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
.file-name { .file-name {
margin-right: 20px; margin-right: 20px;
display: flex; display: flex;