devbox
人工智能uu
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

elementui布局框架_element ui布局

作者：人工智能uu | 2024-08-23 02:36:59

赞

踩

element ui布局

1. elementui布局框架

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 。

换句话说:Element它是再vue2.0得基础上，提供了各种组件(比如表单 表格 菜单导航.....),使用这些组件可以更好得完成功能和布局。

这些组件我们使用谁我们就讲谁，你们要主要看看我是如何使用这些组件得，那么你再使用其他组件时也可以按照这种方式来用。

1.1 如何使用elementui组件

（1）需要再相应得网页中引入vue和elementui得文件

注意:==必须先引入vue在引入element==

  1.  <!--引入element得css样式-->
  2.     <link type="text/css" rel="stylesheet" href="css/index.css"/>
  3.     <!--引入vue得js文件 这个必须在element之前引入-->
  4.     <script type="text/javascript" src="js/vue.js"></script>
  5.     <!--element得js文件-->
  6.     <script type="text/javascript" src="js/index.js"></script>

(2)设置表格组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!--引入element得css样式-->
  7.     <link type="text/css" rel="stylesheet" href="css/index.css"/>
  8.     <!--引入vue得js文件 这个必须在element之前引入-->
  9.     <script type="text/javascript" src="js/vue.js"></script>
  10.     <!--element得js文件-->
  11.     <script type="text/javascript" src="js/index.js"></script>
  12. </head>
  13. <body>
  14.    <!--创建一个标签使vue挂载到该标签上-->
  15.    <div id="app">
  16.        <!--:data==绑定了vue中定义得数据tableData
  17.            border表示设置表格边框
  18.            el-table-column:表示列标签
  19.               prop:该属性得名称必须和tableData中对象得属性名一致。
  20.               label：表格得标题
  21.               width: 设置列得宽度
  22.        -->
  23.        <el-table
  24.                :data="tableData"
  25.                border
  26.                style="width: 100%">
  27.            <el-table-column
  28.                    prop="date"
  29.                    label="日期"
  30.                    >
  31.            </el-table-column>
  32.            <el-table-column
  33.                    prop="name"
  34.                    label="姓名"
  35.                    >
  36.            </el-table-column>
  37.            <el-table-column
  38.                    prop="address"
  39.                    label="地址">
  40.            </el-table-column>
  41.            <el-table-column
  42.                    fixed="right"
  43.                    label="操作"
  44.                    >
  45.                <template slot-scope="scope">
  46.                    <el-button type="text" size="small">查看</el-button>
  47.                    <el-button type="text" size="small">编辑</el-button>
  48.                </template>
  49.        </el-table>
  50.    </div>
  51. </body>
  52. <!--表示自定义得js文件-->
  53. <script>
  54.       var app=new Vue({
  55.            el:"#app",
  56.            data:{
  57.                 tableData:[
  58.                     {"date":"2020-05-11","name":"张三","address":"北京"},
  59.                     {"date":"2021-05-11","name":"李四","address":"郑州"},
  60.                     {"date":"2022-05-11","name":"五五","address":"杭州"},
  61.                     {"date":"2023-06-11","name":"六六","address":"上海"},
  62.                 ],
  63.            }
  64.       })
  65. </script>
  66. </html>

把上面得操作文字换成按钮形式:

  1.  <el-table-column
  2.                    fixed="right"
  3.                    label="操作"
  4.                    >
  5.      <template slot-scope="scope">
  6.          <el-button type="success" size="small" icon="el-icon-edit" plain>编辑</el-button>
  7.          <el-button type="danger"  size="small" icon="el-icon-delete" plain>删除</el-button>
  8.      </template>
  9. </el-table-column>

浏览器并没有显示图标得样式:我们需要引入下面三个文件到工程中

 

2. elementui+axios+后台代码

我们上面的表格数据都是死数据。而我们实际开发中表格数据应该从后台数据库中查询获取的。

  1. - 创建数据库
  2. create database vue01;
  3. -- 切换数据库到vue01
  4. use vue01;
  5. -- 创建表
  6. create table t_dept(
  7.      dept_id int primary key auto_increment COMMENT '部门号',
  8. 		 dept_name varchar(20) COMMENT '部门名称',
  9. 		 loc varchar(20) COMMENT '部门所在地'
  10. );
  11. create table t_emp(
  12.     emp_id int primary key auto_increment COMMENT '员工编号',
  13. 		emp_name varchar(20) COMMENT '员工姓名',
  14. 		emp_sex TINYINT COMMENT '性别 0表示男 1表示女',
  15. 		emp_age int  COMMENT '年龄',
  16. 		emp_salary DECIMAL(7,2) COMMENT '工资',
  17. 		dept_id int COMMENT '关联的部门号'
  18. );
  19. -- 添加数据
  20. insert into t_dept values
  21. (null,'研发部','郑州'),(null,'市场部','杭州'),(null,'人事部','北京')
  22.  
  23. insert into t_emp values 
  24. (null,'张三',0,25,1666.65,1),
  25. (null,'李四',1,26,2555.65,2),
  26. (null,'王五',0,32,6666.65,3),
  27. (null,'赵六',0,36,8888.65,1)

(2)创建员工实体类

  1. package com.wjk.entity;
  2.  
  3.  
  4. public class Emp {
  5.     //员工编号
  6.     private int empId;
  7.     //员工姓名
  8.     private String empName;
  9.     //性别
  10.     private int empSex;
  11.     //年龄
  12.     private int empAge;
  13.     //薪水
  14.     private Double empSalary;
  15.     //部门号
  16.     private int deptId;
  17.  
  18.     public int getEmpId() {
  19.         return empId;
  20.     }
  21.  
  22.     public void setEmpId(int empId) {
  23.         this.empId = empId;
  24.     }
  25.  
  26.     public String getEmpName() {
  27.         return empName;
  28.     }
  29.  
  30.     public void setEmpName(String empName) {
  31.         this.empName = empName;
  32.     }
  33.  
  34.     public int getEmpSex() {
  35.         return empSex;
  36.     }
  37.  
  38.     public void setEmpSex(int empSex) {
  39.         this.empSex = empSex;
  40.     }
  41.  
  42.     public int getEmpAge() {
  43.         return empAge;
  44.     }
  45.  
  46.     public void setEmpAge(int empAge) {
  47.         this.empAge = empAge;
  48.     }
  49.  
  50.     public Double getEmpSalary() {
  51.         return empSalary;
  52.     }
  53.  
  54.     public void setEmpSalary(Double empSalary) {
  55.         this.empSalary = empSal
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/1019077
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号