将数据给予element-ui的表格中

最新推荐文章于 2023-12-25 16:26:16 发布

仲夏月二十八

最新推荐文章于 2023-12-25 16:26:16 发布

阅读量525

点赞数 1

分类专栏：笔记文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_49652369/article/details/124635567

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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>

效果展示 在这里插入图片描述

仲夏月二十八

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
将数据给予element-ui的表格中

<!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="..
复制链接

扫一扫