使用ElementUI制作的前端数据展示【CRUD】

最新推荐文章于 2024-05-22 18:11:53 发布

缘字诀啊

最新推荐文章于 2024-05-22 18:11:53 发布

阅读量3.4k

点赞数 5

分类专栏： JAVA

本文链接：https://blog.csdn.net/weixin_44635778/article/details/95807439

版权

首先需要准备ElementUI的主键，提供一个地址给大家=》ElementUI

然后先来一段数据展示，看看效果
在这里插入图片描述
代码展示，我运用的是Vue技术，所以就一张HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		  .el-table .warning-row {
		    background: #E1F3D8;
		  }
		
		  .el-table .success-row {
		    background: #f0f9eb;
		  }
		  .el-carousel__item h3 {
		    color: #475669;
		    font-size: 14px;
		    opacity: 0.75;
		    line-height: 200px;
		    margin: 0;
		  }
		  
		  .el-carousel__item:nth-child(2n) {
		  	background-image: url(img/storm-clouds-426271_960_720.jpg);
		   background-image: url(img/人物1.jpg);
		  }
		  
		  .el-carousel__item:nth-child(2n+1) {
		    background-image: url(img/1.jpg);
		  }
		</style>
		
		<div id="app">
			<!--走马灯-->
			<template>
			  <el-carousel :interval="4000" type="card" height="200px" loop>
			    <el-carousel-item v-for="item in 6" :key="item">
			      <h3 class="medium">{
  { item }}</h3>
			    </el-carousel-item>
			  </el-carousel>
			</template>

			<el-row style="margin-top: auto;">
				<el-col :span="20" :offset="2">
					 <el-button type="success"  @click="opendialogVisible()" icon="el-icon-star-off" >添加啦</el-button>
				</el-col>
			</el-row>	
			
			<el-row style="margin-top: auto;">
				<el-col :span="20" :offset="2">
					<template >
					  <el-table
					    :data="students"
					    style="width: 100%"
					    >
					    <el-table-column type="selection" width="55">  </el-table-column>
					    <el-table-column type="index"  label="#" w

最低0.47元/天解锁文章

缘字诀啊

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用ElementUI制作的前端数据展示【CRUD】

首先需要准备ElementUI的主键，提供一个地址给大家=》ElementUI然后先来一段数据展示，看看效果代码展示，我运用的是Vue技术，所以就一张HTML<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <s...
复制链接

扫一扫