<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
</head>
<body>
<div id="app">
<mytable :cols="list"></mytable>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let {list}=Mock.mock({
"list|10":[{
"id|+1":1001,
nickname:"@cname",
email:"@email",
desc:"@cword(30)",
birthday:"@date",
city:"@city"
}]
})
Vue.config.productionTip = false//不去提示
Vue.component("mytable", {
props:["cols"],
template:`<table>
<tr >
<th>工号</th>
<th>姓名</th>
<th>描述</th>
<th>生日</th>
</tr>
<tr v-for="(item,i) in cols">
<td>{{item.id}}</td>
<td>{{item.nickname}}</td>
<td>{{item.desc}}</td>
<td>{{item.birthday}}</td>
</tr>
</table>`
})
new Vue({
el: "#app",
data() {
return {
cols:[
{key:'id',label:"编号"},
{key:'id',label:"编号"},
{key:'id',label:"编号"}
],
list
}
},
methods:{
}
})
</script>
</body>
</html>
这里实现的效果如下