如何在 element-ui 中单击按钮时突出显示树节点

Question

我有 el-tree> 元素和 1 个按钮 showNode。 所以单击此按钮时，我想突出显示具有给定索引的节点。 如何在点击按钮时调用highlight-current？

Answer 1

来自documentation：

highlight-current：当前节点是否高亮

highlight-current只是一个只读属性，为了突出显示特定节点，你必须调用方法setCurrentKey

setCurrentKey：按key设置节点高亮，仅在指定node-key时有效，param(key)为节点要高亮的key

因此，您首先需要为每个节点添加一个键，使用属性键：

node-key：节点的唯一标识键名，其值在整个树中应该是唯一的

如下例：

<el-tree
  :data="myData"
  node-key="id">
</el-tree>

然后，在附加到按钮的click 事件上调用方法setCurrentKey：

<el-button @click="setCurrentKey(myData[index].id)">Highlight the n-index node</el-button>

希望对你有帮助，再见。

更新：以上代码仅适用于 2.x 版本，这里是突出显示 1.4.13 版本节点的示例（但我无法展开节点，所以我必须展开所有的树）：

var Main = {
    data() {
      return {
        data: [{
          label: 'Level one 1',
          id: 1,
          children: [{
            label: 'Level two 1-1',
            id: 11
          }]
        }, {
          label: 'Level one 2',
          id: 2,
          children: [{
            label: 'Level two 2-1',
            id: 21,
            children: [{
              label: 'Level three 2-1-1',
              id: 211
            }]
          }, {
            label: 'Level two 2-2',
            id: 22,
            children: [{
              label: 'Level three 2-2-1',
              id: 221
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      },
      renderContent(h, { node, data, store }) {
        let btn = h('span', {
          props: {type: 'success'},
          domProps: {
            innerHTML: data.label,
            id: "node-id-" + data.id
          }
        })
        return btn
      },
      handleBtnClick(){
        //Highlite the 211
      	document.getElementById("node-id-211").style.backgroundColor="yellow";
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@1.4.13/lib/theme-default/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.13/lib/index.js"></script>
<div id="app">
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :render-content="renderContent" :default-expand-all="true"></el-tree>
<el-button @click="handleBtnClick">Highlight the 211 node</el-button>
</div>