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

Question

我正在使用 matfish2/vue-tables-2用于创建 Vue 表，我能够使用作用域槽将数据添加到列。

这是一个简短的片段:

<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 高度，然后最终进行显示: block 和 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

将类应用于列