Vuetables2 Как добавить динамический стиль к определенным данным в vue-client-table - PullRequest
Новая
       44

Vuetables2 Как добавить динамический стиль к определенным данным в vue-client-table

2 голосов
/ 20 сентября 2019

Я работаю над таблицей vue js и vue client.Я создал таблицу vue-client и заполнил некоторые фиктивные данные как статические.

Теперь есть имя столбца 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'
                    }

Ниже я прикрепил свое изображение:

Output of my vue table

1 Ответ

1 голос
/ 26 сентября 2019

Одним простым способом является использование слотов Scoped , чтобы добавить класс 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>

Вам необходимо создать класс css с именем «Неактивно», точно так же, как и со значением «STATUS».

...