极客观点
项目管理
HarmonyOS
<!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标签下是正常显示，请问这是神马情况？
html5
试了下，直接写在body里面的话，浏览器（chrome 55）会自动在table的内容放进tbody里面。好像是tbody 元素会为全部表格自动定义，就算表格没有显式定义 tbody元素。 你看下是否是这个原因导致的