1. elementui布局框架
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 。
换句话说:Element它是再vue2.0得基础上，提供了各种组件(比如表单 表格 菜单导航.....),使用这些组件可以更好得完成功能和布局。
这些组件我们使用谁我们就讲谁，你们要主要看看我是如何使用这些组件得，那么你再使用其他组件时也可以按照这种方式来用。
1.1 如何使用elementui组件
（1）需要再相应得网页中引入vue和elementui得文件
注意:==必须先引入vue在引入element==
<!--引入element得css样式-->
<link type="text/css" rel="stylesheet" href="css/index.css"/>
<!--引入vue得js文件 这个必须在element之前引入-->
<script type="text/javascript" src="js/vue.js"></script>
<!--element得js文件-->
<script type="text/javascript" src="js/index.js"></script>(2)设置表格组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入element得css样式-->
<link type="text/css" rel="stylesheet" href="css/index.css"/>
<!--引入vue得js文件 这个必须在element之前引入-->
<script type="text/javascript" src="js/vue.js"></script>
<!--element得js文件-->
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<!--创建一个标签使vue挂载到该标签上-->
<div id="app">
<!--:data==绑定了vue中定义得数据tableData
border表示设置表格边框
el-table-column:表示列标签
prop:该属性得名称必须和tableData中对象得属性名一致。
label：表格得标题
width: 设置列得宽度
-->
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
>
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
>
<template slot-scope="scope">
<el-button type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table>
</div>
</body>
<!--表示自定义得js文件-->
<script>
var app=new Vue({
el:"#app",
data:{
tableData:[
{"date":"2020-05-11","name":"张三","address":"北京"},
{"date":"2021-05-11","name":"李四","address":"郑州"},
{"date":"2022-05-11","name":"五五","address":"杭州"},
{"date":"2023-06-11","name":"六六","address":"上海"},
],
}
})
</script>
</html>
把上面得操作文字换成按钮形式:
<el-table-column
fixed="right"
label="操作"
>
<template slot-scope="scope">
<el-button type="success" size="small" icon="el-icon-edit" plain>编辑</el-button>
<el-button type="danger" size="small" icon="el-icon-delete" plain>删除</el-button>
</template>
</el-table-column>浏览器并没有显示图标得样式:我们需要引入下面三个文件到工程中
2. elementui+axios+后台代码
我们上面的表格数据都是死数据。而我们实际开发中表格数据应该从后台数据库中查询获取的。
- 创建数据库
create database vue01;
-- 切换数据库到vue01
use vue01;
-- 创建表
create table t_dept(
dept_id int primary key auto_increment COMMENT '部门号',
dept_name varchar(20) COMMENT '部门名称',
loc varchar(20) COMMENT '部门所在地'
);
create table t_emp(
emp_id int primary key auto_increment COMMENT '员工编号',
emp_name varchar(20) COMMENT '员工姓名',
emp_sex TINYINT COMMENT '性别 0表示男 1表示女',
emp_age int COMMENT '年龄',
emp_salary DECIMAL(7,2) COMMENT '工资',
dept_id int COMMENT '关联的部门号'
);
-- 添加数据
insert into t_dept values
(null,'研发部','郑州'),(null,'市场部','杭州'),(null,'人事部','北京')
insert into t_emp values
(null,'张三',0,25,1666.65,1),
(null,'李四',1,26,2555.65,2),
(null,'王五',0,32,6666.65,3),
(null,'赵六',0,36,8888.65,1)
(2)创建员工实体类
package com.wjk.entity;
public class Emp {
//员工编号
private int empId;
//员工姓名
private String empName;
//性别
private int empSex;
//年龄
private int empAge;
//薪水
private Double empSalary;
//部门号
private int deptId;
public int getEmpId() {
return empId;
}
public void setEmpId(int empId) {
this.empId = empId;
}
public String getEmpName() {
return empName;
}
public void setEmpName(String empName) {
this.empName = empName;
}
public int getEmpSex() {
return empSex;
}
public void setEmpSex(int empSex) {
this.empSex = empSex;
}
public int getEmpAge() {
return empAge;
}
public void setEmpAge(int empAge) {
this.empAge = empAge;
}
public Double getEmpSalary() {
return empSalary;
}
public void setEmpSalary(Double empSalary) {
this.empSalary = empSal
最低0.47元/天 解锁文章
6620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
