Question

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

Answer 1

来自documentation：

highlight-current ：当前节点是否突出显示

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

setCurrentKey ：按键设置突出显示的节点，仅在分配了node-key时有效，param（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>

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

1 个答案: