Начальная загрузка таблицы и стиля элемента td - PullRequest
Новая
       60

Начальная загрузка таблицы и стиля элемента td

0 голосов
/ 12 декабря 2018

У меня проблема с назначением стилей тегу <td> элемента b-таблицы.

Это шаблон: 

    <b-table
      :fields="fields"
      :items="items"
      class="mx-1 mt-2"
      v-if="items && items.length > 0"
    >
      <template
        slot="email"
        slot-scope="row"
      >
        <div :title="row.item.email">
          <p class="user-email">{{row.item.email}}</p>
        </div>
      </template>
    </b-table>

И это поля: 

    fields: [
      { key: "email", label: "Email"},
      { key: "user", label: "Name" },
      { key: "role", label: "Role" }
    ],

Я хочу задать максимальную ширину 300 пикселей для <td> этой таблицы.Пожалуйста, помогите!

Ответы [ 2 ]

0 голосов
/ 11 июня 2019

Здесь: https://bootstrap -vue.js.org / docs / components / table / вы можете прочитать: "class, thClass, tdClass и т. Д. Не будут работать с классами, определенными в CSS области применения».Так что это может быть тот случай, когда он не работает для вас.Если вы хотите стилизовать вашу thead, вы можете использовать свойство thStyle в вашем объекте поля, например: 

{
   key: 'test', label: 'Test', thStyle: { backgroundColor: '#3eef33'}
}

Надеюсь, это поможет.

0 голосов
/ 12 декабря 2018

Вы можете установить свойство tdClass внутри объекта вашего поля.Но tdClass просто принимает строку или массив, а не объект.Таким образом, вы можете ссылаться только на класс CSS. 

fields: [
      { key: "email", label: "Email", tdClass: 'nameOfTheClass'},
      { key: "user", label: "Name" , tdClass: 'nameOfTheClass'},
      { key: "role", label: "Role" , tdClass: 'nameOfTheClass'}
]

и в вашем CSS: 

.nameOfTheClass {
   max-width: 300px;
}
...