zdy1988 / vue-jstree

A Tree Plugin For Vue2.0+

Home Page:http://zdy1988.github.io/vue-jstree

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hide/Show icons

andrey943 opened this issue · comments

Is there some way to hide icons when checkboxes are shown?
I know I could set icon class using "icon" key in JSON data.
Even if I use empty icon class value {.."icon": false,..} or {"icon": ""} there still displayed default icon (yellow folder). I tried to use something like {"icon":"-1"}. In this case icon not shown , but it take empty place on layout

Same issue here.

老哥解决了吗,我也遇到同样的问题

commented

I had this issue, it was pretty easy to fix, just use the slot to create a custom item and change from:
<i :class="_.vm.themeIconClasses" role="presentation" v-if="!_.model.loading"></i>
to:
<i :class="_.vm.themeIconClasses" role="presentation" v-if="!_.model.loading && !!_.model.icon"></i>

Notice the difference?

&& !!_model.icon

The way this works is that _.model.icon refers to the icon class for the item, and by doing !_.model.icon you check if it's false (not set), but by doing !!_.model.icon you check that the value is true, which means it will be set. Thus, it will only show the icon element if icon has been set. You can now omit the icon anywhere you don't want it, or just set:
"icon" : false

Both of those options will now work.

Full example below:

<v-jstree show-checkbox multiple allow-batch :data="tree">
    <template slot-scope="_">
        <div style="display: inherit; width: 200px" @click.ctrl="customItemClickWithCtrl">
            <i :class="_.vm.themeIconClasses" role="presentation" v-if="!_.model.loading && !!_.model.icon"></i>
            {{_.model.text}}
            <button style="border: 0px; background-color: transparent; cursor: pointer;" @click="customItemClick(_.vm, _.model, $event)"><i class="fa fa-remove"></i></button>
        </div>
    </template>
</v-jstree>