教材增加选中效果
This commit is contained in:
parent
51ade77d9b
commit
4eaca4c681
|
@ -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>
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue