element-ui中使用el-tree横向滚动条不显示

1.element-ui中使用el-tree横向滚动条不显示

<div style="width:100%;height:500px;overflow-y:auto;margin:0 auto;">
            <el-tree ref="tree" class="filter-tree" :data="setUserstreeData" :props="defaultProps" :filter-node-method="filterNode" :highlight-current="true" @node-click="setReviewerNodeClick" default-expand-all node-key="id" :default-expanded-keys="[expandedKeys]">
</div>
::v-deep .el-tree-node :nth-child(2) {
    padding: 1px;
    overflow: visible;
  }

或者

::v-deep .el-tree-node__label {
  overflow-x: auto;
}

或者

//亲测有效
.el-tree>.el-tree-node{
        min-width:100%;
        display: inline-block;
    }

2.给树el-tree名称后面添加备注

element-ui中使用el-tree横向滚动条不显示_第1张图片

 setUserstreeData: {
          id: "10363048910990",
          name: "dcsfzfvsdzf有限公司",
          progress: "1",
          child: [
            {
              id: "13539157974",
              name: "sdavgzsdfgvdsfv有限公司",
              child: null,
              progress: "0",
            },
            {
              id: "1353981813010",
              name: "dsavfgdsfdzsz术研究院",
              progress: "0",
              child: [
                {
                  id: "13688129090",
                  name: "dfhsgfdgsdfgdf有限公司",
                  progress: null,
                  child: [
                    {
                      id: "1369024725506",
                      name: "sfgdfgdfg单位",
                      child: null,
                      progress: null,
                    },
                    {
                      id: "13694267522",
                      name: "gggggg单位",
                      child: null,
                      progress: null,
                    },
                  ],
                },
                {
                  id: "136882545",
                  name: "ggngjjjjgfghfdg分公司",
                  child: null,
                  progress: null,
                },
              ],
            },
            {
              id: "135399959042",
              name: "aaaaaa有限公司",
              progress: "0",
              child: [
                {
                  id: "135398311516161",
                  name: "aaaddsssssss公司",
                  child: null,
                  progress: null,
                },
              ],
            },
          ],
        },
this.getTreeName(this.setUserstreeData);
 // 找到项目单位选中得id对应得二级单位
    getTreeName(list) {
      let _this = this;
      list.forEach((item, index) => {
        let a = item;
        if (index < list.length) {
          let mark = "";
          if (a.progress == "2") {
            mark = "(已完成)";
          } else if (a.progress == "0" || a.progress == "1") {
            mark = "(未完成)";
          }
          a.name = a.name + mark + "";
        }
        if (a.child && a.child.length > 0) {
          console.log("a.child", a.child);
          if (a.child && a.child.length > 0) {
            _this.getTreeName(a.child);
          }
        }
      });
      return;
    },

你可能感兴趣的:(vue,前端开发,elementui,vue.js)