vuetables2 如何在vue-client-table中为特定数据添加动态样式

Question

我正在研究 vue js 和 vue 客户端 table。我创建了一个 vue-client-table 并将一些虚拟数据填充为静态数据。

现在有一个名为 STATUS 的列，它将有两个值，即 Active 或 Inactive。

我想把'Inactive'的字体颜色改成红色。（这表示 link 已关闭）

我需要帮助才能理解。

下面附上我的代码：

Headings : [ 'APPLICATION NAME', 'URL','LAST ACCESSED','STATUS'],
tableData: [
            {
             "APPLICATION NAME": "Pannier",
                    "URL": "http://boston.com/urna/ut/tellus/nulla/ut/erat/id.js?magna=blandit&ac=ultrices&consequat=enim&metus=lorem",
                    "LAST ACCESSED": "5:07 PM",
                    "STATUS": 'Inactive'
                    },{
                    "APPLICATION NAME": "Kanlam",
                    "URL": "http://archive.org/rutrum/nulla/nunc/purus.jpg?ac=ametttis&sit=nibh&amet=ligula",
                    "LAST ACCESSED": "7:02 AM",
                    "STATUS": 'active'
                    }

下面附上我的图片：

Answer 1

一种简单的方法是使用 Scoped slots，以添加 css class 和 href 属性。看看官方文档。
这是一个例子。

Vue.use(VueTables.ClientTable);

new Vue({
  el: "#app",
  data: {
    columns: ['APPLICATION NAME', 'URL', 'STATUS'],
    tableData: [
      {
        "APPLICATION NAME": "Pannier",
        "URL": "http://boston.com/urna/ut/tellus/nulla/ut/erat/id.js?magna=blandit&ac=ultrices&consequat=enim&metus=lorem",
        "LAST ACCESSED": "5:07 PM",
        "STATUS": 'Inactive'
      },{
        "APPLICATION NAME": "Kanlam",
        "URL": "http://archive.org/rutrum/nulla/nunc/purus.jpg?ac=ametttis&sit=nibh&amet=ligula",
        "LAST ACCESSED": "7:02 AM",
        "STATUS": 'active'
      }],
  }
});

.Inactive {
  color: red
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<script src="https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js"></script>

<h3>Vue Tables 2</h3>

<div id="app">
  <v-client-table :columns="columns" :data="tableData">
      <a :class="props.row.STATUS" :href="props.row.URL" slot="STATUS" slot-scope="props">{{props.row.STATUS}}</a>
  </v-client-table>
</div>

您需要创建一个 css class 名称 "Inactive"，与 "STATUS" 值完全相同。

vuetables2 如何在vue-client-table中为特定数据添加动态样式

Vuetables2 How to add dynamic style to specific data in vue-client-table

vue-component

vuejs2

vue-tables-2