一、介绍

ElementUI是一个基于Vue的UI框架。（bootstrap是基于jQuery的UI框架）

二、安装

1、下载依赖：

npm i element-ui -S

2、在main.js中引入element-ui：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.config.productionTip = false
Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App),
}).$mount('#app')

三、使用ElementUI组件（参考文档，不做介绍）

1、按钮

<template><div id="app"><h1>hello elementUI</h1><el-button type="primary">主要按钮</el-button></div>
</template>

2、表单

3、表格

四、学生信息管理系统

查询、添加、删除。

1、后台使用Koa实现数据接口；

2、添加功能使用对话框（Dialog）弹出表单；

3、删除需要有确认提示（MessageBox）。

1、后台数据（example02项目）

（1）下载并引入模块：

const Koa = require("koa");
//post请求模块
const parser = require("koa-parser");
//设置路由
const router = require("koa-router")();
///允许跨域
const cors = require('koa2-cors');
//静态目录
const static = require("koa-static");const app = new Koa();app.use(cors());
app.use(parser());
app.use(static(__dirname + "/public"))
app.use(router.routes());

（2）serve.js：

const Koa = require("koa");
//post请求模块
const parser = require("koa-parser");
//设置路由
const router = require("koa-router")();
///允许跨域
const cors = require('koa2-cors');
//静态目录
const static = require("koa-static");const app = new Koa();app.use(cors());
app.use(parser());
app.use(static(__dirname + "/public"))
app.use(router.routes());//模拟数据库
const studentList = [{id: 1,name: "小明",age: 2},{id: 2,name: "小红",age: 4},{id: 3,name: "小亮",age: 6},
]//get方法：获取学生列表
router.get("/student", async ctx => {ctx.body = studentList;
})//post方法：添加学生
router.post("/student", async ctx => {let student = ctx.request.body.student;fruitList.push(student);ctx.body = true;
})//delete方法：删除学生
router.delete("/student/:id", async ctx => {let id = ctx.params.id;studentList.map((item, index) => {if (item.id == id) {studentList.splice(index, 1);}})ctx.body = true;
})app.listen(3000, () => {console.log("server is running")
})

2、前端项目（example01）

（1）App.vue：

<template><div id="app"><el-button type="text" @click="dialogVisible = true">添加学生</el-button><el-table :data="studentList" border style="width: 100%"><el-table-column prop="id" label="ID" width="150"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="age" label="年龄" width="120"></el-table-column><el-table-column label="操作" width="100"><template slot-scope="scope"><!-- scrop.row:是当前行的对象 --><el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button></template></el-table-column></el-table><el-dialog title="添加学生信息" :visible.sync="dialogVisible" width="30%"><el-form><el-form-item label="id"><el-input v-model="form.id"></el-input></el-form-item><el-form-item label="姓名"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="年龄"><el-input v-model="form.age"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="onSubmit">确 定</el-button></span></el-dialog></div></template><script>
import axios from "axios";
export default {methods: {handleClick(row) {this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {axios.delete(`http://127.0.0.1:3000/student/${row.id}`).then(() => {this.$message({type: "success",message: "删除成功!",});this.getStudentList();});}).catch(() => {this.$message({type: "info",message: "已取消删除",});});},getStudentList() {axios.get("http://127.0.0.1:3000/student").then((res) => {this.studentList = res.data;});},onSubmit() {axios.post("http://127.0.0.1:3000/student", {student: this.form,}).then(() => {this.getStudentList();//添加后，关闭添加框this.dialogVisible = false;});},},data() {return {studentList: [],dialogVisible: false,form: {id: "",name: "",age: "",},};},created() {this.getStudentList();},
};
</script>

3、效果：

Vue基础（九）——ElementUI相关推荐

vue基础：ElementUI的表单
文章目录 ElementUI表单一个简单的案例表单的主要组件表单组件的使用行内的表单对齐方式表单验证自定义的验证规则表单内组件尺寸控制总结form模块的属性 form模块的方法 Fo ...
vue如何使用element-ui实现循环嵌套的表单
1.前提基础熟悉vue.js以及element-ui. 已经创建好的vue项目. 2.功能描述页面效果如下: 功能点介绍:这是一个描述产品信息的页面,整体是一个form表单,需要验证产品名称和描述 ...
vue项目搭配elementui需要下载的东西
前言: node.js: javascript运行时的环境,node.js之于js,等同于jvm至于Java的地位 npm(node package manager): node.js的包管理器,用于 ...
Vue基础-vue指令
一.vue基础-插值表达式 1.思考 1.以前改变标签内容,如何做? 2.用 Vue 有没有更简单的方式? 2.目的在dom标签中, 直接插入内容 3.语法又叫: 声明式渲染/文本插值语法: { ...
2022前端知识整理：十、vue基础
十.vue基础 2022前端知识整理:第十部分.vue基础,仅包含vue2.0相关知识,建议先完成html5.css3和JavaScript ES6之后再学习.部分图片未上传成功,稍后完善,请见谅. ...
vue基础，加少量的webpack，以及脚手架搭建vue项目
这是我学习vue基础时候的笔记,在b站上跟着敲的,一开始是有道云笔记的形式,为了上传到博客整理了两个小时改成了markdown的形式,喜欢的点个赞,谢谢. 文章目录一. vue基本使用 1. 实例参 ...
SSM8==纯注解SSM项目：实现单表CRUD、事务、自定义异常和统一异常处理、RESTFUL风格接口、统一返回值格式（状态码、内容、消息）、JSON传参、axios、vue.js、elementUI
环境:IDEA2021+JDK8+MAVEN3.8+TOMCAT7插件前端:axios.vue.js.elementUI 后端:见POM.XML相关依赖,主要有数据库MySQL5.7 ,数据源Dru ...
前后端分离(SpringBoot+Vue)-基础的权限管理系统
前后端分离(SpringBoot+Vue)-基础的权限管理系统简介前端项目代码地址:前端代码后端项目代码地址:后端代码最后的附录记录了自己在开发过程遇到问题及实现.部分文件的介绍采用前后端分 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：组件详解+项目说明...
缘起新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
Vue基础6天实施笔记
Vue 基础课程课程介绍 Vue基础语法指令.过滤器.按键修饰符.生命周期.自定义指令.computed计算属性.watch监听器 axios.ES6模块化.组件.vue单文件组件.WebStor ...

Vue基础（九）——ElementUI

一、介绍

二、安装

1、下载依赖：

2、在main.js中引入element-ui：

三、使用ElementUI组件（参考文档，不做介绍）

1、按钮

2、表单

3、表格

四、学生信息管理系统

1、后台数据（example02项目）

（1）下载并引入模块：

（2）serve.js：

2、前端项目（example01）

（1）App.vue：

3、效果：

Vue基础（九）——ElementUI相关推荐

最新文章

热门文章