将类绑定到 matfish2/vue-tables-2 的作用域插槽

Question

我正在使用matfish2/vue-tables-2 创建 vue 表，并且我可以使用作用域插槽向列添加数据。

这是一个快速的 sn-p：

<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 直接选择和操作 dom 的情况下操作该类或切换它，我认为这不是最佳实践使用 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';
    },
}

Answer 1

另一种可能更简单的方法是使用rowClassCallback 选项，例如：

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

或者，如果您不想使用伪选择器，请使用 columnsClasses 将类应用于列