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＆gt; 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

将类应用于列

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

1 个答案: