调整搜索框不跟随滚动

This commit is contained in:
xyf-mac 2021-11-12 22:30:08 +08:00
parent 6a3f3d7592
commit 5e66833905

View File

@ -16,17 +16,17 @@
<div class="flex1"></div> <div class="flex1"></div>
<el-button type="success" class="el-icon-refresh" @click="onBtnClickUpdateTree"></el-button> <el-button type="success" class="el-icon-refresh" @click="onBtnClickUpdateTree"></el-button>
</div> </div>
<div class="treeList"> <el-input placeholder="输入关键字进行过滤" v-model="filterText">
<el-input placeholder="输入关键字进行过滤" v-model="filterText"> <template slot="append">
<template slot="append"> <div class="matchCase ">
<div class="matchCase "> <div class="iconfont el-icon-third-font-size" @click.stop="onChangeCase"
<div class="iconfont el-icon-third-font-size" @click.stop="onChangeCase" title="匹配大小写"
title="匹配大小写" :style="{'color':matchCase?'red':''}">
:style="{'color':matchCase?'red':''}">
</div>
</div> </div>
</template> </div>
</el-input> </template>
</el-input>
<div class="treeList">
<el-tree :data="treeData" <el-tree :data="treeData"
ref="tree" ref="tree"
style="display: inline-block;" style="display: inline-block;"
@ -407,7 +407,8 @@ export default class Index extends Vue {
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: row; flex-direction: row;
overflow: hidden; overflow-x: hidden;
overflow-y: auto;
.left { .left {
display: flex; display: flex;
@ -420,6 +421,14 @@ export default class Index extends Vue {
justify-content: center; justify-content: center;
} }
.matchCase {
width: 30px;
height: 26px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.treeList { .treeList {
margin-top: 3px; margin-top: 3px;
height: 100%; height: 100%;
@ -441,16 +450,6 @@ export default class Index extends Vue {
text-decoration: line-through; text-decoration: line-through;
} }
.matchCase {
width: 30px;
height: 26px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 6px; width: 6px;
height: 6px; height: 6px;