el-tree节点名称太长省略，且鼠标移入显示全部内容，Vue2实现

el-tree节点名称太长省略，且鼠标移入显示全部内容，Vue2实现

代码结构

<el-tree
        :data="cskData"
        :props="cskbxProps"
        @node-contextmenu="rightClick"
        show-checkbox
        :default-expanded-keys="cskExpandedKeys"
        :default-checked-keys="checkBoxKeyList"
        ref="tree"
        highlight-current
        @node-click="getNodeCskData"
        @check-change="handleCheckChange"
        @check="handleCheck"
        node-key="tableColumnCodeAlias"
      >
          <span slot-scope="{ node, data }" class="custom-tree-node showname text-hide"  :title="node.label">
            <el-tooltip :content='data.label' placement="top"    
              effect="light">
              <div>{{data.label | ellipsis}}</div>
            </el-tooltip>
          </span>
      </el-tree>

js

filters:{
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 7) {
        return value.slice(0, 7) + "...";
      }
      return value;
    }
  },

使用vue2的filters（过滤器）。https://v2.cn.vuejs.org/v2/guide/filters.html

如果要将过滤器内的字数变为参数传入，则可以,

//这里以10为例
{{data.label | ellipsis(10)}}

filters:{
    ellipsis(value, k) {
      if (!value) return "";
      if (value.length > k) {
        return value.slice(0, k) + "...";
      }
      return value;
    }
  },