el-tree 横向滚动条
<template>
<el-dialog :before-close="dialogHandleClose" :title="dialogData.title" :visible="dialogVisible" append-to-body center
width="70%" @opened="tableOptionalTreeOpened">
<el-row :gutter="20" class="mb8" type="flex">
<el-col :span="6" justify="center">
<el-input v-model="treeFilterText" placeholder="输入关键字搜索" style="margin-bottom: 5px"/>
<!-- 滚动条样式 left、filter-tree -->
<div class="left">
<el-tree class="filter-tree" ref="tree_child" :data="tableTreeData" :default-expand-all="false"
:expand-on-click-node="false" :filter-node-method="treeFilterNode" :load="loadNode"
:props="treeDefaultProps" lazy node-key="id" @node-click="handleNodeClick">
</el-tree>
</div>
</el-col>
<el-col :span="18" justify="center" >
<!-- 滚动条样式 style的width要设置100%,不然内容会被挤 -->
<el-input v-model="tableFilterText" :clearable="true" placeholder="输入物料名称按下回车进行搜索"
style="margin-bottom: 5px;width: 100%" @clear="clear"
@keyup.enter.native="search"/>
<el-table ref="table_child" :data="tableData" :reserve-selection="true" border height="320" row-key="id"
style="width: 100%" @select='onTableSelect' @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"/>
<el-table-column align="center" label="编码" prop="code" width="180"/>
<el-table-column align="center" label="名称" prop="name" width="180"/>
<el-table-column align="center" label="简称" prop="shortName" width="180"/>
<el-table-column align="center" label="版本号" prop="version"/>
</el-table>
<pagination v-show="total>=0" :limit.sync="pageSize" :page.sync="pageNum" :total="total" @pagination="getList"/>
<div class="select-view">
<div style="margin: 5px 0">当前已选:</div>
<div class="gys-names">
<el-tag v-for="item in selectDataAll" :key="item.id" style="margin-right:5px;">
{{ item.name }}
<i class="el-icon-delete" @click="delMaterial(item)" style="cursor: pointer;margin-left:5px"></i>
</el-tag>
</div>
</div>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel()">取 消</el-button>
<el-button type="primary" @click="confirm()">确 定</el-button>
</span>
</el-dialog>
</template>
<style lang="scss" scoped>
::v-deep .el-tree {
/*width: 100%;*/
overflow-y: auto;
}
::v-deep .el-dialog--center .el-dialog__body {
padding: 0 25px 0;
}
::v-deep .el-dialog__footer {
padding: 0 20px 20px;
}
.filter-tree {
//border: 1px solid #dcdfe6;
display: inline-block;
overflow: auto;
}
::v-deep .el-tree-node__label {
display: block;
overflow: hidden;
word-break: keep-all;
white-space: nowrap;
text-overflow: ellipsis;
}
.left {
height: 480px;
overflow: auto;
}
.select-view {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
.gys-names {
flex: 1;
border: 1px solid #e8e8e8;
border-radius: 5px;
min-height: 85px;
overflow-y: auto;
}
}
</style>
原文地址:https://blog.csdn.net/cimbala/article/details/142497031
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!