html文件引用.vue 文件的方式
1.html文件先引入vue.js再引入httpVueLoader.js注册httpVueLoader。在script中Vue.use(httpVueLoader);在components中注册组件，httpVueLoader的注册方式有好几种，具体引用方式看个人习惯，更多的可以去看httpVueLoader官网：https://www.npmjs.com/package/http-vue-loa
·
1.html文件
先引入vue.js
再引入httpVueLoader.js
注册httpVueLoader。
在script中Vue.use(httpVueLoader);
在components中注册组件，httpVueLoader的注册方式有好几种，具体引用方式看个人习惯，更多的可以去看httpVueLoader官网：http-vue-loader - npm；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>引用vue组件</title>
<script src="./js/vue.js"></script>
<script src="./js/httpVueLoader.js"></script>
</head>
<body>
<div id="app">
<infinite-split-table :tree_data="tree_data" :deep="0"></infinite-split-table>
</div>
<script>
Vue.use(httpVueLoader)
new Vue({
el: "#app",
data() {
return {
tree_data: {
type: "column",
id: 0,
data: [{
id: 1,
type: "label",
data: "入炉煤",
},
{
id: 2,
type: "row",
data: [{
id: 4,
type: "label",
data: "取样地点",
width: "10%",
},
{
id: 5,
type: "column",
data: [{
id: 1,
type: "row",
data: [{
id: 1,
type: "label",
data: "细度 (单位 %)",
}, ],
},
{
id: 1,
type: "row",
data: [{
id: 1,
type: "label",
data: "<3mm",
width: "50%",
},
{
id: 1,
type: "label",
data: "<0.5mm",
width: "50%",
},
],
},
],
width: "25%",
},
{
id: 5,
type: "column",
data: [{
id: 1,
type: "row",
data: [{
id: 1,
type: "label",
data: "工 业 分 析 (单位 %)",
}, ],
},
{
id: 1,
type: "row",
data: [{
id: 1,
type: "label",
data: "水分",
width: "25%",
},
{
id: 1,
type: "label",
data: "灰分",
width: "25%",
},
{
id: 1,
type: "label",
data: "挥发分",
width: "25%",
},
{
id: 1,
type: "label",
data: "硫",
width: "25%",
},
],
},
],
width: "30%",
},
{
id: 5,
type: "label",
data: "G值",
width: "8.75%",
},
{
id: 5,
type: "label",
data: "Y值mm",
width: "8.75%",
},
{
id: 5,
type: "label",
data: "X值mm",
width: "8.75%",
},
{
id: 5,
type: "label",
data: "备 注",
width: "8.75%",
},
],
},
],
},
}
},
components: {
"infinite-split-table": "url:./component/InfiniteSplitTable/InfiniteSplitTable.vue"
}
})
</script>
</body>
</html>2.创建.vue组件页面
这里面有一个需要注意的点要把export default 导出方式改变，变成module.exports = {};不然会报错。具体区别意思可以去看es6的官方文档，也可自行百度，至此完成。打开文件不能直接file形式打开文件,要本地启动一个服务进行访问打开文件，可以用vscode的go live启动本地服务。
<template>
<table
class="infinite-split-table"
cellpadding="0"
cellspacing="0"
:class="{ 'top-border': deep == 0, 'left-border': deep == 0 }"
>
<template>
<tr
v-for="line in for_data"
style="width: 100%"
:style="{
height:
typeof line[0].height != 'undefined' ? line[0].height : 'auto',
}"
>
<td
v-for="item in line"
:style="{
width: typeof item.width != 'undefined' ? item.width : 'auto',
}"
>
<div v-if="item.type != 'row' && item.type != 'column'" class="text">
<span v-if="item.type == 'label'">
{{ item.data }}
</span>
</div>
<infinite-split-table v-else :tree_data="item" :deep="deep + 1">
</infinite-split-table>
</td>
</tr>
</template>
</table>
</template>
<script>
module.exports = {
name: "InfiniteSplitTable",
props: ["tree_data", "deep"],
data() {
return {
msg: "引用好了吗",
};
},
computed: {
for_data() {
let type = this.tree_data.type;
let data = this.tree_data.data;
let result = [];
if (type === "row") {
result.push(data);
} else if (type === "column") {
for (let i = 0; i < data.length; i++) {
result.push([data[i]]);
}
}
return result;
},
},
};
</script>
<style scoped>
.infinite-split-table {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.left-border {
border-left: 1px solid black;
}
.top-border {
border-top: 1px solid black;
}
.text {
padding: 5px;
box-sizing: border-box;
border-right: 1px solid black;
border-bottom: 1px solid black;
height: 100%;
min-height: 30px;
word-wrap: break-word;
word-break: break-all;
display: flex;
align-items: center;
justify-content: center;
}
</style>
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)