<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="../css/font.css">
<link rel="stylesheet" href="../css/xadmin.css">
<script src="js/jquery.min.js"></script>
<script src="../lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/xadmin.js"></script>
<!-- 引入样式(elementui) -->
<link rel="stylesheet" href="../elementUi/index.css" />
<script src="../elementUi/vue.js" type="text/javascript"></script>
<!-- 引入组件库 -->
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
<script src="../elementUi/index.js"></script>
<script src="../js/axios.min.js"></script>
</head>
<body>
<div class="x-nav">
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">演示</a>
<a>
<cite>导航元素</cite></a>
</span>
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
</a>
</div>
<!-- 主体 -->
<div class="layui-fluid" id="container">
<el-table :data="AccountInfo"
height="580"
stripe
border>
<el-table-column
v-for="(items,indexs) in AccountInfo[0]"
:key="indexs"
:prop="indexs"
:label="indexs"
/>
</el-table>
</div>
<script>
var baseUrl = "http://localhost:8082/";
var vm = new Vue({
el:'#container',
data:{
test:"张三",
address:[],
zheshishuju:[],
population:[],
populationIn2020:[],
populationIn2010:[],
nums:1,
AccountInfo: []
},
created:function(){
var url = baseUrl+'/itcast/userproportion';
axios.get(url).then((res)=>{
var log = res.data;
console.log(log.data);
for(var i = 0;i<log.data.length;i++){
vm.address.push(log.data[i].address);
}
for(var i = 1;i<log.data.length;i++){
vm.AccountInfo.push(log.data[i]);
}
console.log(vm.AccountInfo);
})
},
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
}
});
</script>
效果展示