Rumah > Artikel > hujung hadapan web > el-tree hanya menambah ikon di hadapan nod induk
Untuk menambah ikon secara khusus pada nod induk dalam el-tree, anda boleh menggunakan prop kekunci nod bersama-sama dengan ciri slot berskop yang disediakan oleh Vue.js. Begini cara anda boleh mencapai ini:
<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>
Ya, adalah mungkin untuk mengehadkan peletakan ikon kepada nod induk dalam el-tree dengan menggunakan isParent
harta. Sifat ini tersedia dalam slot berskop yang disediakan oleh Vue.js untuk setiap nod dalam pepohon.isParent
property. This property is available within the scoped slot provided by Vue.js for each node in the 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>
data.isParent
untuk menyemak sama ada nod semasa ialah nod induk. Jika ya, anda boleh menambah ikon menggunakan elemen <i>
dan tentukan kelas ikon yang dikehendaki.🎜Atas ialah kandungan terperinci el-tree hanya menambah ikon di hadapan nod induk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!