提示框和标签el-tree

1.绑定属性:render-content="renderContent"

          <div v-for="(item, index) in baseSizeTypeData" :key="index">
            <el-tree
              @node-click="handleNodeClick"
              :data="item.configMatterClasses"
              default-expand-all
              highlight-current
              :expand-on-click-node="false"
              :props="{ children: 'children', label: 'name' }"
              :render-content="renderContent"
            >
            </el-tree>
          </div>

2.方法

  methods: {
      //提示框
      renderContent(h, { node, data, store }) {
              return (
                  <div class="custom-tree-node">
                      <el-tooltip class="item" effect="dark" placement="top">
                           //提示框
                          <div slot="content">{node.label}</div>
                            //标签
                          <p class="tooltip">{node.label}</p>
                      </el-tooltip>
                  </div>
              );
      },
}

3.通过css宽度设置溢出隐藏

.tooltip{
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容