el-tree only adds icon in front of the parent node

How to add icons only in front of parent nodes in el-tree?

To add icons specifically to parent nodes in el-tree, you can utilize the node-key prop along with the scoped slot feature provided by Vue.js. Here's how you can achieve this:

<code class="javascript"><template>
  <el-tree :data="treeData">
    <span slot-scope="{ node, data }">
      <i v-if="data.isParent" class="el-icon-folder-opened"></i>
      {{ node.label }}
    </span>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: 'Parent Node 1',
          children: [
            { label: 'Child Node 1' },
            { label: 'Child Node 2' },
          ],
        },
        {
          label: 'Parent Node 2',
          children: [
            { label: 'Child Node 3' },
            { label: 'Child Node 4' },
          ],
        },
      ],
    };
  },
};
</script></code>

Is it possible to limit icon placement to parent nodes in el-tree?

Yes, it is possible to limit icon placement to parent nodes in el-tree by employing the isParent property. This property is available within the scoped slot provided by Vue.js for each node in the tree.isParent property. This property is available within the scoped slot provided by Vue.js for each node in the tree.

What is the correct syntax to add icons specifically to parent nodes in el-tree?

The correct syntax to add icons specifically to parent nodes in el-tree is as follows:

<code class="html"><span slot-scope="{ node, data }">
  <i v-if="data.isParent" class="el-icon"></i>
  {{ node.label }}
</span></code>

In this syntax, you use the data.isParent condition to check if the current node is a parent node. If it is, you can add an icon using the <i>

The above is the detailed content of el-tree only adds icon in front of the parent node. For more information, please follow other related articles on the PHP Chinese website!