引导表 css 不适用于 Vue.JS 组件答案

【问题标题】：Bootstrap table css not working with Vue.JS component引导表 css 不适用于 Vue.JS 组件
【发布时间】：2017-04-02 05:26:03
【问题描述】：

我将引导程序和 Vue.js 用于 web 应用程序。但我不能在 Vue 组件中使用引导表 css。当我写作时

<table>
  <tr class='active'>
    <td>place</td>
    <td>holder</td>
  </tr>
</table>

在 Vue 组件之外，css 工作正常，表格格式正确。但是当我在Vue组件的<template>...</tenplate>标签中使用相同的代码时，bottstrap table css的active样式并没有应用于表格行。

我将 Vue 组件保存在 .vue 文件中并使用 webpack 进行编译。

怎么了？

【问题讨论】：

你可以为它创建一个 JSFiddle 吗？
我会，但我不确定如何让 *.vue 文件在 jsfiddle 中编译。

标签： twitter-bootstrap-3 vue-component

【解决方案1】：

在表格中添加tbody 元素解决了这个问题。代码现在读取

<table>
  <tbody>
    <tr class='active'>
      <td>place</td>
      <td>holder</td>
    </tr>
  </tbody>
</table>

CSS 现在可以正常工作了。

【讨论】：

很棒的发现！谢谢。
谢谢！我到处找这个。

【解决方案2】：

我可以看到表格在 Vue 组件中正常工作。以下是我正在使用的表的代码：

 <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

这里正在工作fiddle。

【讨论】：