<el-dialog title="选择"
class="min-body edit-dialog qryGropBatch"
size="large"
:visible.sync="batchChooseVisible"
:close-on-click-modal="false"
:lock-scroll=false
:show-close="false"
width="50%"
top="5%">
<el-row :gutter="10">
<el-col :span="9">
<div class="left_block">
<el-input v-model="filterText"
placeholder="输入关键字进行过滤"></el-input>
<el-tree class="terminal_tree"
ref="staffTree"
:data="treeTableList"
:props="defaultProps"
show-checkbox
node-key="id"
:filter-node-method="filterNode"
@check-change="handleCheckChange"
v-loading="treeLoading"
:default-expand-all="false"
>
</el-tree>
</div>
</el-col>
<el-col :span="15">
<el-row :gutter="10">
<el-col :span="24">
<div class="result-title">已选</div>
</el-col>
</el-row>
<div style="height:400px;overflow:auto">
<span class="span-cut" v-for="(item,index) in selectedArray" :key="index">
{
{ item.name }}
<el-button icon="circle-cross" @click="delPerson(item)"
style="display: inline-block;background: #fff;color: #c4c4c4;margin: 0px 0px 0px 5px;padding: 0px 0px 0px 0px;border-radius: 50%;border: none">
</el-button>
</span>
</div>
</el-col>
</el-row>
<el-row style="text-align:center">
</el-row>
<div slot="footer"
class="dialog-footer"
align="center">
<el-button @click.native="closeCatalog">取消</el-button>
<el-button type="primary" @click.native="handleCommit" :loading="commiting">确定</el-button>
</div>
</el-dialog>
其他css
.span-cut {
color: #FFF;
background-color: #67C23A;
border: 1px solid #67C23A;
border-radius: 4px;
padding: 5px 20px;
margin: 5px 10px;
float: left;
}
.min-body.qryGropBatch .left_block {
border: 1px solid #d1dbe5;
}
css 横向滚动条 el-tree
.left_block {
height: 400px;
overflow: auto;
border: none;
margin-top: 10px;
.el-tree{
display: inline-block;
min-width:100% ;
}
}
css 纵向滚动条
.terminal_tree {
height: 250px;/*这里要比上面小一点,不然节点就几行就出现纵向滚动条*/
/* overflow: auto;这个貌似要去掉,不然会出现双滚动条*/
border: none;
margin-top: 10px;
}