快捷導(dǎo)航

vue中el-tree?橫向滾動(dòng)條的實(shí)現(xiàn)

更新時(shí)間：2024年09月25日 11:18:44 作者：Cimbala

本文詳細(xì)介紹了在Vue框架中使用el-tree組件創(chuàng)建橫向滾動(dòng)條的方法,通過(guò)代碼示例和步驟說(shuō)明,幫助開(kāi)發(fā)者理解和實(shí)現(xiàn)橫向滾動(dòng)功能,感興趣的可以了解一下

本文主要介紹了vue中el-tree 橫向滾動(dòng)條的實(shí)現(xiàn)，具體如下

在這里插入圖片描述

<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="輸入關(guān)鍵字搜索" style="margin-bottom: 5px"/>
        <!-- 滾動(dòng)條樣式 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" >
       <!-- 滾動(dòng)條樣式 style的width要設(shè)置100%,不然內(nèi)容會(huì)被擠 -->
        <el-input v-model="tableFilterText" :clearable="true" placeholder="輸入物料名稱(chēng)按下回車(chē)進(jìn)行搜索"
                  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="名稱(chēng)" prop="name" width="180"/>
          <el-table-column align="center" label="簡(jiǎn)稱(chēng)" prop="shortName" width="180"/>
          <el-table-column align="center" label="版本號(hào)" 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">當(dāng)前已選：</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>

到此這篇關(guān)于vue中el-tree 橫向滾動(dòng)條的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)el-tree 橫向滾動(dòng)條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: