vue.js中的组件缺失部分css样式是怎么回事?

图片描述

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="css/manager.css">
        <link rel="stylesheet" type="text/css" href="assets/css/amazeui.css">
        <script type="text/javascript" src="assets/js/jquery-3.1.1.js"></script>
        <script type="text/javascript" src="assets/js/amazeui.js"></script>
        <script type="text/javascript" src="js/vue.js"></script>
        <script type="text/javascript" src="js/vue-resource.js"></script>
        <style type="text/css">
            body {
                background-color: gray;
            }
            
            .warp {
                margin-top: 100px;
            }
        </style>

        <script type="text/x-template" id="files-list-template">
            <table class="am-table am-table-hover am-table-bordered am-table-striped am-text-nowrap">
                <tr>
                    <th><input type="checkbox"></th>
                    <th>文件名</th>
                    <th>大小</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>文件名</td>
                    <td>大小</td>
                    <td>时间</td>
                    <td>
                        <div class="am-btn-group">
                            <button type="button" class="am-btn am-btn-sm am-btn-default am-round">分享</button>
                            <button type="button" class="am-btn am-btn-sm am-btn-default am-round">下载</button>
                            <button type="button" class="am-btn am-btn-sm am-btn-default am-round" disabled>移动</button>
                            <button type="button" class="am-btn am-btn-sm am-btn-default am-round">删除</button>
                            <button type="button" class="am-btn am-btn-sm am-btn-default am-round">加密</button>
                        </div>
                    </td>
                </tr>
            </table>
        </script>
    </head>

    <body>
        <div id="netdisk" class="am-container main">
            <div class="am-g">
                <div class="am-u-8-centered warp">
                    <div class="am-panel am-panel-warning">
                        <div class="am-panel-hd">115网盘</div>
                        <div class="am-panel-bd">
                            <div class="am-btn-group">
                                <button type="button" class="am-btn am-btn-primary am-round">分享</button>
                                <button type="button" class="am-btn am-btn-primary am-round">下载</button>
                                <button type="button" class="am-btn am-btn-primary am-round" disabled>移动</button>
                                <button type="button" class="am-btn am-btn-primary am-round">删除</button>
                                <button type="button" class="am-btn am-btn-primary am-round">加密</button>
                            </div>
                        </div>
                        <div class="am-scrollable-horizontal">
                            <files-list v-bind:file_list='file_list'></files-list>
                        </div>
                        <div class="am-panel-footer">
                            共选中了{$count}个文件
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            Vue.component('files-list', {
                // 选项
                template: '#files-list-template',
                props: ['file_list'],
                /*data: function() {
                    return {
                        file_list: null,
                        test: ''
                    }
                },*/
                methods: {
                    delete: function() {
                        Vue.http.get('/Delete').then(function() {
                            //                        Vue.http.$set('file_list', JSON.parse(response.json()));
                        }, function() {
                            alert('删除失败');
                        })
                    },
                    rename: function() {
                        Vue.http.get('/Rename').then(function() {
                            //                        Vue.http.$set('file_list', JSON.parse(response.json()));
                        }, function() {
                            alert('重命名失败');
                        })
                    }
                }
            });
            new Vue({
                el: '#netdisk',
                // 选项
                data: {
                    file_list: null
                },
                ready: function() {
                    Vue.http.get('/List').then(function() {
                        Vue.http.$set('file_list', JSON.parse(response.json()));
                    }, function() {
                        alert('无法获取到文件列表');
                    })
                }
            })
        </script>

    </body>

</html>

代码都在上面,我用的是text/x-template方式给组件赋予模版,但是运行之后发现有部分css样式缺失,如果我把这段模版单独放在html的body标签下是正常显示,请问这是神马情况?

阅读 6.7k
2 个回答

试了下,直接写在body里面的话,浏览器(chrome 55)会自动在table的内容放进tbody里面。好像是tbody 元素会为全部表格自动定义,就算表格没有显式定义 tbody元素。 你看下是否是这个原因导致的

改成<template id="files-list-template">试试

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题