时间戳

首页 > 解决方案 > Vuetables2 如何为 vue-client-table 中的特定数据添加动态样式

vuejs2 - Vuetables2 如何为 vue-client-table 中的特定数据添加动态样式

问题描述

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

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

我想将“非活动”的字体颜色更改为红色。（这表示链接已关闭）

我需要帮助来理解它。

下面我附上了我的代码：

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

下面我附上了我的图片：

我的 vue 表的输出

标签： vuejs2vue-componentvue-tables-2

解决方案

一种简单的方法是使用Scoped slots，以添加 css 类和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>

您需要创建一个名称为“Inactive”的 css 类，与“STATUS”值完全相同。

推荐阅读