【ElementUI -- 优化小技巧系列】 -- el-tree 节点内容过长优化 以及选中默认节点

<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    :highlight-current="true"
    :expand-on-click-node="false"
    :filter-node-method="filterNode"
    ref="tree"
    @node-click="handleNodeClick"
  >
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span :title="node.label">{{ node.label }}</span>
    </span>
  </el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      data: [...], // 树形结构的数据
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data, node) {
      this.$refs.tree.setCurrentKey(node.key);
      this.currentNode = node;
    }
  }
};
</script>
 
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>

这个代码实例展示了如何在Element UI的el-tree组件中使用自定义内容（slot-scope）来处理节点内容过长的问题，并且展示了如何通过过滤器方法来实现对树节点的搜索过滤，以及如何在节点被点击时设置当前选中节点。