el-tree横向、纵向滚动条

  <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;
    }

猜你喜欢

转载自blog.csdn.net/x18094/article/details/120319728