教材增加选中效果

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>
</div>
<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 }">
<span :title="node.label" class="tree-label">{{ node.label }}</span>
</template>
@ -13,7 +13,7 @@
</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;">
<template #header>
<div class="choose-book-header flex">
@ -161,6 +161,7 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.book-wrap {
width: 300px;
height: 100%;
@ -179,6 +180,7 @@ onMounted(() => {
cursor: pointer;
border-bottom: solid #f4f5f7 1px;
font-size: 15px;
font-weight: 600;
}
.book-list {
@ -252,7 +254,9 @@ onMounted(() => {
text-overflow: ellipsis;
}
:deep(.el-dialog__header) {
padding-bottom: 10px;
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
background-color: #d9e8fe !important;
color: #409EFF
}
</style>

View File

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