el-tree ajoute uniquement une icône devant le nœud parent

Comment ajouter des icônes uniquement devant les nœuds parents dans el-tree ?

Pour ajouter des icônes spécifiquement aux nœuds parents dans el-tree, vous pouvez utiliser l'accessoire node-key ainsi que la fonctionnalité de slot étendue fournie par Vue.js. Voici comment y parvenir :

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

Est-il possible de limiter le placement des icônes aux nœuds parents dans el-tree ?

Oui, il est possible de limiter le placement des icônes aux nœuds parents dans el-tree en utilisant isParent Propriété . Cette propriété est disponible dans l'emplacement de portée fourni par Vue.js pour chaque nœud de l'arborescence.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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!