Как я могу оформить v-slot: шаблоны ячеек? - PullRequest
Новая
       0

Как я могу оформить v-slot: шаблоны ячеек?

0 голосов
/ 28 апреля 2020

У меня есть следующий шаблон в таблице: 

    <template v-slot:cell(checkbox)="row" style="border-left='5px dotted blue'">                      
       <input type="checkbox" v-model="row.rowSelected" @input="toggleSelectRow(row)"/>             
    </template>

Я пытаюсь выполнить встроенное моделирование для шаблона, чтобы я мог в конечном итоге назначить границу затухания после отправки формы. Тем не менее, я изо всех сил пытаюсь добиться даже базового стиля.

Я использую bootstrap - vue, но, насколько я понимаю, я могу также вводить обычный CSS.

Как я могу получить простую рамку вокруг своей камеры?

1 Ответ

1 голос
/ 28 апреля 2020

К сожалению, вы не можете применять стили или классы к <template>.

У вас есть несколько вариантов решения этой проблемы.

Во-первых, используя поля собственность на b-table. Это можно использовать для удаления заполнения по умолчанию в столбце с помощью служебного класса p-0, который вы добавите в свойство tdClass объекта вашего поля. Затем вы можете обернуть ваш b-checkbox в div и применить отступ к этому элементу.

Это позволит вам стилизовать ваш div упаковщика-флажка так, как если бы он был ячейкой.

Еще один вариант использования опции tdClass в объекте fields для применения классов с вашими стилями. Самое замечательное в tdClass - это то, что вы можете привязать к нему метод, который передает информацию о значении этой ячейки. Это означает, что вы можете изменить применяемые классы в зависимости от содержимого ячейки.

Последний вариант - использовать b-table-simple и написать разметку самостоятельно. Это, конечно, дает вам полную свободу за столом, но вы теряете всю необычную функциональность b-table и должны будете добавить это обратно сами.

Вот фрагмент того, как вы могли бы реализовать вариант 1 и 2. 

new Vue({
  el: '#app',
  data() {
    return {
      fields: [
        'age',
        'first_name',
        'last_name',
        {
          key: 'active',
          tdClass: 'p-0'
        },
        {
          key: 'active2',
          tdClass: this.applyTdClass
        }
      ],
      items: [{
          age: 40,
          first_name: 'Dickerson',
          last_name: 'Macdonald',
          active: false,
          active2: false
        },
        {
          age: 21,
          first_name: 'Larsen',
          last_name: 'Shaw',
          active: false,
          active2: false
        },
        {
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson',
          active: true,
          active2: true
        },
        {
          age: 38,
          first_name: 'Jami',
          last_name: 'Carney',
          active: false,
          active2: false
        }
      ]
    }
  },
  methods: {
    applyTdClass(value, key, item) {
      const classes = [];

      classes.push('border');
      /* Example of dynamically changing classes */
      if (value) {
        classes.push('bg-success');
      } else {
        classes.push('bg-danger');
      }

      return classes;
    }
  }
})
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.13.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.13.0/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-table :items="items" :fields="fields">
    <template v-slot:cell(active)="{ item }">
      <div style="padding: 0.75rem" class="border-left border-primary">
    		<b-checkbox v-model="item.active"></b-checkbox>      
      </div>
    </template>
    <template v-slot:cell(active2)="{ item }">
      <b-checkbox v-model="item.active2"></b-checkbox>
    </template>
  </b-table>
</div>
...