Vue动态挂载的组件不渲染bootsrtap的class样式

Question

-被挂载的组件

var addType = {
    template: '<div id="app-main" class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">'+
                '<h2 class="sub-header">添加新闻分类</h2>'+
                '<div class="table-responsive">'+
                  '<table class="table">'+
                    '<tr><td>分类名称</td><td><input type="text" name="tname" id="tname"></td></tr>'+
                    '<tr>'+
                      '<td>父分类名称</td>'+
                      '<td>'+
                        '<select class="form-control" style="width:150px">'+
                        '<option value="0">顶级</option>'+
                        '<option v-for="option in options">{{ option.tname }}</option>'+
                        '</select>'+
                      '</td>'+
                    '</tr>'+
                  '</table>'+
                  '<input type="button" class="btn btn-primary" value="提交" id="addTypeBtn">'+
                '</div>'+
              '</div>',
    mounted: function(){
      var that = this;
      $.get("mook/addTypeC.php","",function(response){
        that.options = JSON.parse(response);
      });
    },

    data: function(){
      return {
        options: [{'tname':'国际新闻'},{'tname':'体育新闻'}]
      };
    },


  }

-挂载组件:

  var appMain = new Vue({
    el: "#app",
    data: {
      currentView: 'defaultView'
    },
    components: {
      'defaultView': defaultView,
      'typeList': typeList,
      'addType': addType
    }
  });

-点击挂载的代码

var appMenu = {
template: {/*  */},
methods: {
    //处理分类列表的函数
    typeList: function(){
      appMain.currentView = typeList;
    },

    //处理添加分类的函数
    addType: function(){
      appMain.currentView = addType;
    }
  }
}

• 显示效果如图: 点击左侧按键触发typeList函数,table样式没有渲染出来
  

• 但是为什么在chrome控制台编辑html文档,在该div前面加了一个空格就可以渲染出来table样式了
  

Answer 1

这个情况我也遇到过，建议你在<table>里面添加<thead></thead>和<tbody></tbody>层，代码类似

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th></th>
                ...
            </tr>
            ...
        </thead>
        <tbody>
            <tr>
                <td></td>
                ...
            </tr>
            ...
        </tbody>
    <table>
</div>

由于Bootstrap CSS的表格样式是指定了thead和tbody的，所以必须要加上这两个标签，才可以使浏览器匹配上对应的元素。尽管大部分浏览器会在解析HTML的时候自动补充上thead和tbody，但是CSS解析时候这两个元素还不存在，因此浏览器无法根据Bootstrap CSS查找到对应的元素并进行渲染。

另外，你直接在控制台里修改了代码以后，浏览器会刷新HTML并重新渲染CSS，此时由于之前浏览器给HTML初次渲染时加上了thead和tbody标签，所以重新渲染CSS时，表头和表内容部分的渲染就会生效。