Binding classes to a scoped slot for matfish2/vue-tables-2

Question

I'm using matfish2/vue-tables-2 for creating vue tables and I'm able to use a scoped slot to add data to columns.

Here is a quick snippet:

<v-server-table url="getData" :columns="columns" :options="options" ref="myTable">
    <template slot="qty" scope="props">
        {{ props.row.get_item.qty }}
    </template>
</v-server-table>

The outputted result table looks like this:

<table class="VueTables__table table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th class="VueTables__sortable created-at">
                <span title="" class="VueTables__heading">Date / Time</span>
                <span class="VueTables__sort-icon pull-right glyphicon glyphicon-chevron-down"></span>
            </th>
            <th class="VueTables__sortable sku">
                <span title="" class="VueTables__heading">Sku</span>
                <span class="VueTables__sort-icon pull-right glyphicon glyphicon-sort "></span>
            </th>
            <th class="VueTables__sortable qty">
                <span title="" class="VueTables__heading">Qty</span>
                <span class="VueTables__sort-icon pull-right glyphicon glyphicon-sort "></span>
            </th>
            <th class="customers">
                <span title="" class="VueTables__heading">Customers</span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td class="created-at">2017-11-27 12:28:10</td>
            <td class="sku">BC-SL</td>
            <td class="qty">
                392
            </td>
            <td class="customers"></td>
        </tr>
    </tbody>
</table>

That package allows me to set column classes via options but that doesn't help because I'm not sure how to manipulate that class or toggle it without using javascript to select and manipulate the dom directly which I assume is not best practice when using Vue.

I tried v-bind:class but doesn't seem to have an affect on that template slot.

My goal is to add a condition if that props.row.get_item.qty > 0 then change background color of that TD column via a class.

Update Temporary Workaround:

After a few search for now I was able to achieve my goal by setting the TD height to 1px and then wrap it in a DIV like so:

<template slot="qty" scope="props">
    <div v-if="props.row.get_item.qty > 0" class="bis">
        {{ props.row.get_item.qty }}
    </div>
    <div v-else class="oos">
        {{ props.row.get_item.qty }}
    </div>
</template>

And then a class to color it:

.bis {
    display:block;
    background-color: green;
    height: 100%;
    padding: 8px;
    vertical-align: middle;
}

And here's the TD css:

td.qty {
    height: 1px;
    padding: 0px;
    text-align: center;
}

Seems to achieve what I want but not sure if correct way or whether there's a more correct way of doing this because this relies on wrapping it with a DIV then set a 1px height on that TD trick to then finally do an display: block and 100% height. Feels a bit of a hack to me.

Simplified version derived from lamelemon's suggestion

<div :class="isGreaterThanZero(props.row.get_item.qty)">
    {{ props.row.get_item.qty }}
</div>

And method:

methods: {
    isGreaterThanZero (qty) {
        return qty ? 'bis' : 'oos';
    },
}

Instead of doing a `v-if` I would use a method on a bound class such as `
` — Steven B., Dec 01 '17 at 21:24
@lamelemon Loved how that simplified it even more, currently using that way. — dmotors, Dec 01 '17 at 21:39

score 4 · Answer 1 · answered Dec 06 '17 at 21:55

4

Another, perhaps more simple approach would be to use the rowClassCallback option, E.g:

options:{
  rowClassCallback(row) {
    return row.qty?"bis":"oos";
  }
}

CSS:

tr.bis td:nth-child(3) {
  background: green;
}

tr.oos td:nth-child(3) {
  background: red;
}

Or if you don't want to use a pseudo-selector apply a class to the column using columnsClasses

answered Dec 06 '17 at 21:55

Matanya

6,233
9
47
80

I used a combination of the rowClassCallback with columnClasses and then a CSS of tr.bis td.qty div and looks a bit more cleaner. The part that would make this whole thing complete is the div wrapper I had to do in order to allow styling on this scoped slot in the first place. It's currently top aligned and using vertical-align middle won't work unless I do more tricks or workaround. – dmotors Dec 07 '17 at 20:00

Binding classes to a scoped slot for matfish2/vue-tables-2

1 Answers1