el-tree超出宽度显示

804 阅读1分钟

image.png

 <el-col :span="5">
        <span class="treespan">仪器质控批次:</span>
        <el-tree
          :data="qctestsetList"
          show-checkbox
          node-key="id"
          ref="tree"
          highlight-current
          @check="getTreeData"
          class="show-tree"
        >
          <template slot-scope="{ node }">
            <el-tooltip
              effect="dark"
              :content="node.label"
              placement="right"
            >
              <span> {{ node.label  }}</span>
            </el-tooltip>
          </template>
        </el-tree>
      </el-col>

css样式

.show-tree .el-tooltip {
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  width: 200px;
  display: block;
}

数据结构

image.png