1

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

4

1 回答 1

0

从文档：

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

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

setCurrentKey : 逐个设置高亮节点，仅在指定node-key时有效，参数（key）是要高亮的节点的键

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

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

像下面的例子：

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

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

<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>

于 2018-02-02T09:53:10.510 回答