1

vue テーブルの作成にmatfish2 /vue-tables-2を使用しており、スコープ スロットを使用して列にデータを追加できます。

ここに簡単なスニペットがあります：

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

出力結果テーブルは次のようになります。

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

そのパッケージを使用すると、オプションを介して列クラスを設定できますが、JavaScript を使用せずにそのクラスを操作したり切り替えたりする方法がわからないため、助けにはなりません。これは、Vue を使用する場合のベストプラクティスではないと想定しています。 .

v-bind:class を試しましたが、そのテンプレート スロットに影響を与えていないようです。

私の目標は、その props.row.get_item.qty > 0 の場合に条件を追加し、クラスを介してその TD 列の背景色を変更することです。

一時的な回避策を更新します。

今のところ数回検索した後、TDの高さを1pxに設定し、次のようにDIVでラップすることで目標を達成できました。

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

そして、それを色付けするクラス:

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

TD CSS は次のとおりです。

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

私が望むものを達成しているようですが、これはDIVでラップし、そのTDトリックに1pxの高さを設定してから最終的に表示を行うことに依存しているため、正しい方法か、これを行うためのより正しい方法があるかどうかはわかりません:ブロックと100 ％ 身長。私には少しハックのように感じます。

lamelemon の提案から派生した簡略化されたバージョン

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

そして方法：

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

1 に答える 1