精华内容
下载资源
问答
  • element ui使用教程
    2022-05-14 10:21:58

    第一步用nps安装npm i element-ui -S

    第二步选择你的导入方式

    全局导入的话就是在入口main中导入

    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)

    按需导入的话也是在入口main中导入,然后在大括号内填入你使用到的功能名字
    import { Button, Form, FormItem, Input } from 'element-ui'
    // 引入element样式表
    import 'element-ui/lib/theme-chalk/index.css'
    // 使用组件
    Vue.use(Button)
    Vue.use(Form)
    Vue.use(FormItem)
    Vue.use(Input)
    还有一种使用功能的方法,把他注册到全局的原型上面去,然后在其他地方直接使用$加上自定义的名字就可以调用了
    Vue.prototype.$这里随便起名字= MessageBox  -----》这是控件名字

    分页器使用方法
       <!--  :current-page="page"绑定事件给这个事件,用于data调用数据的 -->
    @current-change="自定义名字"是绑定方法的,后面名字自己起
      :pager-count='4' 是长度
    :page-size="10"  是每一页你想要显示多少个数据
    点击的时候会返回一个数据,这是方法
     // 分页
        handleCurrentChange(num) {
          console.log(`当前页:${num}`);
          // 保存页码
          (this.page = num),
            // 然后刷新重新获取数据
            this.listData();
        }
     

    这是分页标签写法
      <el-pagination
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="page"
            :page-size="5"
            :limit="limit"
            pager-count='4'
          >

    更多相关内容
  • element-ui实战教程

    2021-06-21 19:11:55
    本课程从零搭建element-ui开发环境,使用json-server虚拟化后端接口,并于前端联调,完成了企业日常开发中的增删改查操作,并提供课程代码供学员参考
  • element-ui 时,本人是没有安装其它环境,而是直接用链接引入,这个带来的问题是,每次打开网页都很慢,于是想本地化,但是发现只是下载两个引入的 js 和 css 是不够的,很多功能会无法使用,打开 DevTools 发现...
  • 在vue项目中使用Element-ui基本教程

    千次阅读 2021-10-05 22:43:52
    element-ui是饿了么推出的一个开源ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。 官网:https://element.eleme.cn/#/zh-CN 今天分享一下这个插件的基本使用, 1.创建一个项目,并...

    element-ui是饿了么推出的一个开源ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。

    官网:Element - The world's most popular Vue UI framework

    今天分享一下这个插件的基本使用,

    1.创建一个项目,并安装element-ui插件

    创建项目参考使用vue脚手架搭建项目详细解说_Im_xiaopei的博客-CSDN博客

    安装element-ui

    打开终端,输入npm install element-ui -S命令,等待安装完成,

    2.在main.js入口文件使用element-ui插件

    import Vue from 'vue'
    import ElementUI from 'element-ui';                      // 引入element-ui
    import 'element-ui/lib/theme-chalk/index.css';           // element-ui的css样式要单独引入
    import App from './App.vue'
    
    Vue.use(ElementUI);   // 这种方式引入了ElementUI中所有的组件
    
    new Vue({
      el: '#app',
      render: h => h(App)
    })
    

    3.在APP.vue组件中使用element-ui组件,,这里我选择的是按钮组件,日期组件和上传图片组件,在官网中选择想要的样式复制代码到vue组件中即可

    <template>
      <div id="app">
        {{msg}}
    
        <!--图标-->
        <div>
          <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </el-row>
        </div>
    
        <!-- 日期选择器 -->
        <DatePicker></DatePicker>
        <!-- 文件上传 -->
        <Upload></Upload>
      </div>
    </template>
    
    <script>
      // 导入组件
      import DatePicker from './components/DatePicker.vue'
      import Upload from './components/Upload.vue'
    
    export default {
      name: 'app',
      data () {
        return {
          msg: '测试msg'
        }
      },
      components:{
        DatePicker,
        Upload
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    
    h1, h2 {
      font-weight: normal;
    }
    
    ul {
      list-style-type: none;
      padding: 0;
    }
    
    li {
      display: inline-block;
      margin: 0 10px;
    }
    
    a {
      color: #42b983;
    }
    </style>
    

    4.然后创建日期组件和上传文件组件,在src中创建 components/DatePicker.vue 和 components/Upload.vue 两个组件

    DatePicker.vue:(日期组件)

    <template>
        <el-date-picker
          v-model="value"
          type="date"
          placeholder="选择日期"
          size="small"
          :picker-options="options">
        </el-date-picker>    
    </template>
    
    <script>
        export default {
            data(){
                return {
                    value:'',
                    options:{
                        disabledDate(time) {
                            return time.getTime() < Date.now() - 8.64e7;
                        },
                        firstDayOfWeek:1
                    }
                }
            }
        }
    </script>
    

    Upload.vue:(上传文件组件)

    <template>
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
        </el-upload>
    </template>
    
    <script>
        export default {
            data(){
                return {
                    fileList: [
                            {
                                name: 'food.jpeg', 
                                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                            }, 
                            {
                                name: 'food2.jpeg', 
                                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                            }
                    ]
                }
            },
             methods: {
              handleRemove(file, fileList) {
                console.log(file, fileList);
              },
              handlePreview(file) {
                console.log(file);
              }
            }
        }
    
    </script>
    

    启动项目,展示效果图

    然后根据自己想要的样式,来自己修改

    总之,虽然有了第三方插件提高了我们的编码速度,但是,打铁还需自身硬,一定要多多练习,多多学习呀,祝生活安好。。。。。 

    展开全文
  • 使用多个卡片显示的时候,并且要求当列数到一定数目的时候,要自动换行,el-container 布局就满足了需求了,就要用到el-row 布局做分栏处理, 代码如下 <div slot=header
  • Saber 是 SpringBlade前端UI项目,基于vue、vuex、avue、element-ui,用于快速构建系统中后台业务。 官网 官网地址:https://service.trinx.cn 在线演示 Sword演示地址:https://sword.bladex.vip Saber演示...
  • Element UI极简教程(1):Element UI的安装

    千次阅读 2021-12-11 00:55:22
    Java大联盟 致力于最高效的Java学习关注B 站搜索:楠哥教你学Java获取更多优质视频教程Element UI简介Element UI 是一套基于 Vue 的桌面端组件库,封...

    7f351e963ccaa635c4e3f115cca98e74.png

      Java大联盟

      致力于最高效的Java学习

    关注

    3701178270910a9e59b6784dd8296c2b.gif

    B 站搜索:楠哥教你学Java

    获取更多优质视频教程

    Element UI 简介

    Element UI 是一套基于 Vue 的桌面端组件库,封装好了很多常用的 UI 组件,开发者可以使用 ElementUI 快速搭建一个网站。

    官网:https://element.eleme.cn/

    官网中有各个组件使用的详细教程,非常全面,楠哥写这篇教程的目的是帮助大家快速上手 Element UI 的使用,大家在实际开发中可以结合官网文档来完成具体业务代码的开发。

    Element UI 安装

    要使用 Element UI,首先确保你的电脑上已经成功安装了 Vue,这里不再介绍 Vue 的安装步骤,没有安装 Vue 的小伙伴可以自行查找教程进行安装。

    1、创建 Vue 工程,命令如下。

    vue ui

    2、选择“创建”,设置工程存放路径,点击下方的“在此创建新项目”按钮。

    1f861c61c9b5f4b456d2afd127b0e861.png

    3、输入工程名,点击下方的“下一步”按钮。

    30223ff3ece2c83292b58cced1c4a4b2.png

    4、选择“手动配置项目”,点击“下一步”按钮。

    4f907e338b5dd00566a2c88ed3a4e883.png

    5、打开 Router、Vuex 选项,关闭 Linter / Formatter 选项,点击“下一步”按钮。

    93b141de9776fb6e07b67c4544b37f8c.png

    6、打开 Use history mode for router 选项,点击“下一步”按钮。

    d0e3a3dc8eb5cfe77debe901b213e67b.png

    7、点击“创建项目,不保存预设”,然后耐心等待,创建完成之后会跳转到主页面。

    f34fb17f7ae4fa37e0ba87c9526135d5.png

    8、点击“添加插件”按钮。

    7f1a621c39b7908d57f9f1f3211835e0.png

    9、在搜索框输入“element”。

    ecd54ad35f17782102f28f4ce639dd14.png

    10、选中第一个,点击“安装 vue-cli-plugin-element”,耐心等待即可。

    71ec2fb0b3dd304638d12a7083e72dd9.png

    11、打开项目,在 App.vue 中添加如下代码。

    <el-button>默认按钮</el-button

    运行项目,如果能看到如下效果图,则说明 Element UI 已安装成功。

    f6082793bb2a50ec8ee3e0521587cc90.png

    以上就是 Element UI 安装的全部步骤,下一篇教程楠哥将带领大家正式开始学习 Element UI 具体组件的使用,如果你觉得这篇教程对你有帮助,就帮楠哥点个赞吧,我们下期教程再见。

    推荐阅读

    1、Spring Boot+Vue项目实战

    2、B站:4小时上手MyBatis Plus

    3、一文搞懂前后端分离

    4、快速上手Spring Boot+Vue前后端分离

    楠哥简介

    资深 Java 工程师,微信号 southwindss

    《Java零基础实战》一书作者

    腾讯课程官方 Java 面试官,今日头条认证大V

    GitChat认证作者,B站认证UP主(楠哥教你学Java)

    致力于帮助万千 Java 学习者持续成长。

    6f81757a44afb0395f527efe6274a1fd.png

    29a8cd6f7415a4a172817d6bd9f1dfd0.png

    有收获,就在看 0eebe899de2ec4a3060379e551789611.png

    展开全文
  • Element-UI快速入门

    万次阅读 多人点赞 2022-03-02 09:22:25
    什么是Element UI 这篇文章会告诉你 带你快速入门 学会Element UI

    什么是Element UI

    1. Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
      1. Element UI是基于Vue 2.0的
      2. Element UI 提供一组组件
      3. Element UI 提供组件的参考实例, 直接复制
    2. 官方网站:

    https://element.eleme.cn/#/zh-CN/component/installation

    搭建环境

    创建项目

    步骤一: 通过 vue-cli创建项目

    vue create eui01

    步骤二:运行项目

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_17,color_FFFFFF,t_70,g_se,x_16

    整合1:插件

    安装好vue项目后,进入到项目目录,执行命令

    vue add element

    整合步骤1:确定引入方式(全部引入、按需引入)

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    整合

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    整合2:安装element-ui插件

    npm i element-ui --save

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    整合:element-ui引入

    1. 官方提供了2种引入方式:完整引入、按需引入
      1. 完整引入:引入了eui所有的组件,学习时/开发时常用
      2. 按需引入:引入需要的组件,生产环境下使用。

    1. 完整引入
      1. 1. 导入 element ui 组件库
      2. 2. 导入 element ui css样式
      3. 3. 并将element ui 注册给vue

     watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_17,color_FFFFFF,t_70,g_se,x_16

    /* 导入element-ui样式
    */
    import 'element-ui/lib/theme-chalk/index.css'
    
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    /* element-ui所有组件
    */
    import ElementUI from 'element-ui'
    Vue.use(ElementUI)
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

    3.布局容器

    布局容器

    1. 使用element-ui的布局容器(Container) 进行页面布局。对页面进行划分(上、下、左、中)
    2. 官方文档 : https://element.eleme.cn/#/zh-CN/component/container

    用于布局的容器组件,方便快速搭建页面的基本结构:

    <el-container>:外层容器。当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。

    <el-header>:顶栏容器。

    <el-aside>:侧边栏容器。

    <el-main>:主要区域容器。

    <el-footer>:底栏容器。

    以上组件采用了 flex 布局,使用前请确定目标浏览器是否兼容。此外,<el-container> 的子元素只能是后四者,后四者的父元素也只能是 <el-container>

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    步骤一: 修改src/main.js 导入 element-ui 样式和组件

    /* 导入element-ui样式
    */
    import 'element-ui/lib/theme-chalk/index.css'
    
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    /* element-ui所有组件
    */
    import ElementUI from 'element-ui'
    Vue.use(ElementUI)
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

    步骤二: 删除 src/App.vue所有内容, 拷贝布局模板和样式

    <template>
      <div id="app">
        <el-container>
          <el-header>Header</el-header>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </div>
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
      /* 稍后删除 */
      .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
      }
    </style>

    reset.css

    布局页面完成后, 整个body会存在一圈空白, 开发中一般选择重新设置页面样式

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    步骤一: 百度搜索”reset.css” , 并创建 assets/app.css ,拷贝样式 (复制下面样式即可)

     1f8fb641cbde435c860f62c4d3827279.png

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td {
        margin: 0;
        padding: 0;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    fieldset,img {
        border: 0;
    }
    
    address,caption,cite,code,dfn,em,strong,th,var {
        font-style: normal;
        font-weight: normal;
    }
    
    ol,ul {
        list-style: none;
    }
    
    caption,th {
        text-align: left;
    }
    
    h1,h2,h3,h4,h5,h6 {
        font-size: 100%;
        font-weight: normal;
    
    }

    满屏填充

    在App.vue中,添加样式

      html, body, .el-container {
        height: 100%;
      }

    4.导航条

    需求

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    导航条

    使用导航菜单(NavMenu) 完成导航条效果

    官方文档 : https://element.eleme.cn/#/zh-CN/component/menu

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    <template>
      <div id="app">
        <el-container>
          <el-header>
            <!-- 导航条 -->
            <el-menu
              :default-active="$route.path"
              class="el-menu-demo"
              mode="horizontal"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <el-menu-item index="/">首页</el-menu-item>
              <el-submenu index="2">
                <template slot="title">学生管理</template>
                <el-menu-item index="/studentList">学生列表</el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">个人中心</template>
                <el-menu-item index="/login">登录</el-menu-item>
                <el-menu-item index="/register">注册</el-menu-item>
              </el-submenu>
              <el-menu-item index="/cart">
               购物车
              </el-menu-item>
            </el-menu>
          </el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
          <el-footer>
             版权所有 2006 - 2022 传智专修学院
          </el-footer>
        </el-container>
      </div>
    </template>
    
    <script>
    export default {
    }
    </script>
    
    <style>
      .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
        padding: 0;
      }
    </style>

    路由

    点击”首页” 和 “购物车” 可以调整页面

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    步骤一: 修改 src/App.vue 设置路由视图

     watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_19,color_FFFFFF,t_70,g_se,x_16

    <template>
      <div id="app">
        <el-container>
          <el-header>
            <!-- 导航条 -->
            <el-menu
              class="el-menu-demo"
              mode="horizontal"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              :router="true"
            >
              <el-menu-item index="/">首页</el-menu-item>
              <el-submenu index="2">
                <template slot="title">学生管理</template>
                <el-menu-item index="/studentList">学生列表</el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">个人中心</template>
                <el-menu-item index="/login">登录</el-menu-item>
                <el-menu-item index="/register">注册</el-menu-item>
              </el-submenu>
              <el-menu-item index="/cart">
               购物车
              </el-menu-item>
            </el-menu>
          </el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
          <el-footer>
             版权所有 2006 - 2020 传智专修学院
          </el-footer>
        </el-container>
      </div>
    </template>
    
    <script>
    export default {
    }
    </script>
    
    <style>
      .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
        padding: 0;
      }
    </style>

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    步骤二: 编写测试组件(Home.vue和Cart.vue)

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_16,color_FFFFFF,t_70,g_se,x_16

    页面刷新导航选择问题

    默认情况:点击后的默认效果

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    刷新页面, 导航条的选中状态消失

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

     修复: 修改 App.vue页面

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_19,color_FFFFFF,t_70,g_se,x_16

    <template>
      <div id="app">
        <el-container>
          <el-header>
            <!-- 导航条 -->
            <el-menu
              :default-active="$route.path"
              class="el-menu-demo"
              mode="horizontal"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              :router="true"
            >

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    页眉

    <el-footer>
            版权所有 2006 - 2022 传智专修学院
    </el-footer>

    5.表格:查询列表

    测试页面

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_19,color_FFFFFF,t_70,g_se,x_16

    基本表格

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    <template>
      <div>
        <!-- 列表 -->
        <el-table :data="studentList" >
          <el-table-column prop="sid" label="编号" width="150"></el-table-column>
          <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
          <el-table-column prop="gender" label="性别" width="150"></el-table-column>
          <el-table-column prop="age" label="年龄" width="150"></el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          studentList: [
            {
              sid: 's001',
              sname: '张三',
              gender: '男',
              age: 18
            },
            {
              sid: 's002',
              sname: '李思',
              gender: '女',
              age: 21
            }
          ]
        }
      }
    }
    </script>
    
    <style>
    
    </style>
    

    表格修饰

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    <template>
      <div>
        <!-- 列表 -->
        <el-table :data="studentList" stripe border >
          <el-table-column prop="sid" label="编号" width="150"></el-table-column>

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16多选

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    <template>
      <div>
        <!-- 列表 -->
        <el-table :data="studentList" stripe border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="sid" label="编号" width="150"></el-table-column>
          <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
          <el-table-column prop="gender" label="性别" width="150"></el-table-column>
          <el-table-column prop="age" label="年龄" width="150"></el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        handleSelectionChange(val) {
          this.multipleSelection = val;  //保存选中的数据
        }
      },
      data () {
        return {
          multipleSelection: [],  //多选,选中的数据
          studentList: [
            {
              sid: 's001',
              sname: '张三',
              gender: '男',
              age: 18
            },
            {
              sid: 's002',
              sname: '李思',
              gender: '女',
              age: 21
            }
          ]
        }
      }
    }
    </script>
    
    <style>
    
    </style>

    自定义模板

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

     watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    <template>
      <div>
        <!-- 列表 -->
        <el-table :data="studentList" stripe border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="sid" label="编号" width="150"></el-table-column>
          <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
          <el-table-column prop="gender" label="性别" width="150"></el-table-column>
          <el-table-column prop="age" label="年龄" width="150"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        handleSelectionChange(val) {
          this.multipleSelection = val;  //保存选中的数据
        },
        handleEdit(index, row) {
          console.log(index, row);
        },
        handleDelete(index, row) {
          console.log(index, row);
        }
      },
      data () {
        return {
          multipleSelection: [],  //多选,选中的数据
          studentList: [
            {
              sid: 's001',
              sname: '张三',
              gender: '男',
              age: 18
            },
            {
              sid: 's002',
              sname: '李思',
              gender: '女',
              age: 21
            }
          ]
        }
      }
    }
    </script>
    
    <style>
    
    </style>
    1. 练习:展示“爱好”信息
          studentList: [
            {
              sid: 's001',
              sname: '张三',
              gender: '男',
              age: 18,
              hobbies: ['抽烟','喝酒','烫头']
            },
            {
              sid: 's002',
              sname: '李思',
              gender: '女',
              age: 21,
              hobbies: ['抽烟','烫头']
            }
          ]

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    <template>
      <div>
        <!-- 列表 -->
        <el-table :data="studentList" stripe border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="sid" label="编号" width="150"></el-table-column>
          <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
          <el-table-column prop="gender" label="性别" width="150"></el-table-column>
          <el-table-column prop="age" label="年龄" width="150"></el-table-column>
          <el-table-column label="爱好" >
            <template slot-scope="scope">
              <el-tag type="warning" v-for="(hobby,index) in scope.row.hobbies" :key="index">{{hobby}}</el-tag>
            </template>
    
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        handleSelectionChange(val) {
          this.multipleSelection = val;  //保存选中的数据
        },
        handleEdit(index, row) {
          console.log(index, row);
        },
        handleDelete(index, row) {
          console.log(index, row);
        }
      },
      data () {
        return {
          multipleSelection: [],  //多选,选中的数据
          studentList: [
            {
              sid: 's001',
              sname: '张三',
              gender: '男',
              age: 18,
              hobbies: ['抽烟','喝酒','烫头']
            },
            {
              sid: 's002',
              sname: '李思',
              gender: '女',
              age: 21,
              hobbies: ['抽烟','烫头']
            }
          ]
        }
      }
    }
    </script>
    
    <style>
      .el-tag + .el-tag {
        margin-left: 10px;
      }
    </style>
    

    总结

    标签

    描述

    属性

    描述

    <el-table>

    用于绘制表格

    data

    需要显示的数据

    stripe

    创建带斑马纹的表格

    border

    带边框表格

    <el-table-column>

    用于设置表格的列

    label

    列名

    prop

    对应对象中的键名

    width

    列宽

    type

    selection 多选框

    <template slot-scope="scope">

    内容嵌入,scope

    条件查询

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    <!-- 条件表单 start -->
        <el-form :inline="true" :model="studentVo" size="mini" class="demo-form-inline">
          <el-form-item label="班级">
            <el-select v-model="studentVo.cid" placeholder="请选择班级">
              <el-option label="Java12班" value="c001"></el-option>
              <el-option label="Java34班" value="c002"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="studentVo.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-col :span="11">
              <el-input v-model="studentVo.startAge" placeholder="请输入开始年龄"></el-input>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-input v-model="studentVo.endAge" placeholder="请输入结束年龄"></el-input>
            </el-col>
          </el-form-item>
    
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- 条件表单 end -->

    分页条

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

        <!-- 分页条start -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNum"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total">
        </el-pagination>
        <!-- 分页条end -->

     6.表单

    简单表单:登录

    显示登录页面:Login.vue

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_18,color_FFFFFF,t_70,g_se,x_16

    登录表单效果

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_18,color_FFFFFF,t_70,g_se,x_16

    <template>
      <el-card class="box-card">
        <el-form :model="user" label-width="80px" ref="loginFormRef">
          <el-form-item label="用户名">
            <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="user.password" prefix-icon="el-icon-lock" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="info" @click="$refs.loginFormRef.resetFields()" >重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </template>
    
    <script>
    export default {
      data() {
        return {
          user: {
            username: '',
            password: ''
          }
        }
      },
    }
    </script>
    
    <style>
      .box-card {
        width: 480px;
      }
    </style>

    复杂表单:注册

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_18,color_FFFFFF,t_70,g_se,x_16

     watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_13,color_FFFFFF,t_70,g_se,x_16

    <template>
      <el-card class="box-card">
        <el-form :model="user" label-width="80px" ref="loginFormRef">
          <el-form-item label="用户名">
            <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="user.password" prefix-icon="el-icon-lock" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="user.repassword" prefix-icon="el-icon-lock" type="password" placeholder="请再次输入密码"></el-input>
          </el-form-item>
          <el-form-item label="生日">
            <el-date-picker v-model="user.birthday" type="date" placeholder="选择日期">
        </el-date-picker>
          </el-form-item>
          <el-form-item label="学历">
            <el-select v-model="user.edu" placeholder="请选择你的学历">
              <el-option label="小班" value="xb"></el-option>
              <el-option label="中班" value="zb"></el-option>
              <el-option label="大班" value="db"></el-option>
              <el-option label="学前班" value="xqb"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="user.gender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="爱好">
            <el-checkbox-group v-model="user.hobbies">
              <el-checkbox label="抽烟" name="type"></el-checkbox>
              <el-checkbox label="喝酒" name="type"></el-checkbox>
              <el-checkbox label="烫头" name="type"></el-checkbox>
              <el-checkbox label="蹦迪" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="婚否">
            <el-switch v-model="user.marry"></el-switch>
          </el-form-item>
          <el-form-item label="省市县">
            <el-cascader
              v-model="user.city"
              :options="cityList"
              ></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="info" @click="$refs.loginFormRef.resetFields()" >重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </template>
    
    <script>
    export default {
      data() {
        return {
          user: {
            username: 'jack',
            password: '1234',
            repassword: '1234',
            birthday: '2020-10-07',
            edu: 'db',
            gender: '女',
            hobbies: ['抽烟','烫头'],
            marry: true,
            city: ['jiangsu', 'suqian', 'shuyang'],
          },
          cityList: [
            {
              value: 'jiangsu',
              label: '江苏',
              children: [
                {
                  value: 'suqian',
                  label: '宿迁',
                  children: [
                    {
                      value: 'shuyang',
                      label: '沭阳',
                    },
                    {
                      value: 'siyang',
                      label: '泗阳',
                    }
                  ]
                },
                {
                  value: 'lianyungang',
                  label: '连云港',
                }
              ]
            }
          ]
    
        }
      },
      methods: {
        login() {
          alert('登录中...')
        }
      },
    }
    </script>
    
    <style>
      .box-card {
        width: 480px;
      }
    </style>

    表单校验

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_16,color_FFFFFF,t_70,g_se,x_16

     watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_17,color_FFFFFF,t_70,g_se,x_16

    设置校验规则、确定校验属性

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    编写校验规则

    rules: {
       校验属性: [  规则1,  规则2, .... ]
    }
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 5, message: `用户名长度必须3-5之间`, trigger: 'blur' }

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    提交表单时,校验

     watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    <template>
      <el-card class="box-card">
        <el-form :model="user" :rules="rules" label-width="80px" ref="loginFormRef">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="user.password" prefix-icon="el-icon-lock" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="info" @click="$refs.loginFormRef.resetFields()" >重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </template>
    
    <script>
    export default {
      data() {
        return {
          user: {
            username: '',
            password: ''
          },
          rules: {
            username: [
              { required: true, message: '请输入用户名', trigger: 'blur' },
              { min: 3, max: 5, message: `用户名长度必须3-5之间`, trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 3, max: 5, message: `密码长度必须3-5之间`, trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        login() {
          this.$refs.loginFormRef.validate(valid => {
            if(valid) {
              // 校验通过
              console.info('通过')
            } else {
              // 校验未通过
               console.info('未通过')
            }
          })
        }
      },
    }
    </script>
    
    <style>
      .box-card {
        width: 480px;
      }
    </style>

    自定义校验

    <template>
      <div>
        <h3>登录校验</h3>
        <el-card class="login-card">
          <!-- 登录表单start -->
          <el-form ref="loginForm" :model="user" :rules="rules" label-width="80px">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名" clearable></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="user.password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password clearable></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="repassword">
              <el-input v-model="user.repassword" prefix-icon="el-icon-lock" placeholder="请再次输入密码" show-password clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login()">登录</el-button>
              <el-button type="info">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- 登录表单end -->
        </el-card>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        //校验: 密码和确认密码一致
        var validatePass2 = (rule, value, callback) => {
          if (value !== this.user.password) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
        return {
          user: {
            username: '',
            password: '',
            repassword: ''
          },
          rules: {
            username: [
              { required: true, message: '请输入用户名', trigger: 'blur' },
              { min: 3, max: 5, message: '用户名长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 3, max: 5, message: '密码长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            repassword: [
              { required: true, message: '请再次输入密码', trigger: 'blur' },
              { validator: validatePass2, trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        login() {
          // js 对象调用有2种方式:this.user.username  或 this.user['username']
          this.$refs.loginForm.validate((valid) => {
            if (valid) {
              // 校验通过
              alert('submit!');
            } else {
              // 校验失败
              console.log('error submit!!');
              return false;
            }
          });
        }
      },
    }
    </script>
    
    <style>
      .login-card{
        width: 480px;
      }
    </style>

    7.常见组件

    按钮 Button

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    <template>
      <div>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </div>
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
    
    </style>

    消息提示 Message

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    this.$message.success('这是一条成功消息')
    this.$message.error('这是一条错误消息')

    <template>
      <div>
        <el-button type="info" @click="open1">消息</el-button>
        <el-button type="success" @click="open2">成功</el-button>
        <el-button type="warning" @click="open3">警告</el-button>
        <el-button type="danger" @click="open4">错误</el-button>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        open1() {
          this.$message.info('这是一条提示信息')
        },
        open2() {
          this.$message.success('这是一条成功消息')
        },
        open3() {
          this.$message.warning('这是一条警告消息')
        },
        open4() {
          this.$message.error('这是一条错误消息')
        },
      },
    }
    </script>
    
    <style>
    
    </style>

    弹出框 MessageBox 确认消息

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

     this.$confirm('这是提示信息','这是标题',{confirmButtonText: '确定按钮',cancelButtonText: '取消按钮',type: 'warning'})
          .then(()=>{
            // 确定按钮回调
            this.$message.success('删除了')
            // ajax操作
          })
          .catch(()=>{
            // 取消按钮回调
            this.$message.error('取消了')
          })

    弹出框

    编写弹出层

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    <template>
      <div>
        <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
        <!-- 弹出层 -->
        <el-dialog title="这是标题" :visible.sync="dialogVisible" >
          我是一段正文信息
          <!-- 操作按钮 -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          dialogVisible: false,  //是否显示弹出层
        }
      },
    }
    </script>
    
    <style>
    
    </style>

    抽屉

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    <template>
      <div>
        <el-button type="primary" @click="drawerFormVisible = true">修改学生</el-button>
    
        <!-- 抽屉start -->
        <el-drawer
          title="我是标题"
          :visible.sync="drawerFormVisible"
          direction="rtl"
          :before-close="handleClose">
          <el-form :model="student" label-width="80px">
            <el-form-item label="姓名" >
              <el-input v-model="student.sname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="班级" >
              <el-select v-model="student.cid" placeholder="请选择班级">
                <el-option label="Java12班" value="c001"></el-option>
                <el-option label="Java34班" value="c002"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="drawerFormVisible=false">确定</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-drawer>
        <!-- 抽屉end -->
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          drawerFormVisible: false,
          student: {
    
          }
        }
      },
      methods: {
        handleClose(done) {
          this.$confirm('确认关闭?')
            .then(_ => {
              //确定按钮
              done();   //结束回调
            })
            .catch(_ => {
              //取消
            });
        }
      },
    }
    </script>
    
    <style>
    </style>

    标签页

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    <template>
      <div>
        <el-tabs v-model="activeName" >
          <el-tab-pane label="用户管理" name="first">
            用户管理
            <el-button type="primary" @click="activeName = 'second'">下一步</el-button>
          </el-tab-pane>
          <el-tab-pane label="配置管理" name="second">
            配置管理
            <el-button type="primary" @click="activeName = 'third'">下一步</el-button>
          </el-tab-pane>
          <el-tab-pane label="角色管理" name="third">
            角色管理
            <el-button type="primary" @click="activeName = 'fourth'">下一步</el-button>
          </el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth">
            定时任务补偿
            <el-button type="primary" @click="$message.success('成功了')">完成</el-button>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          activeName: 'first'
        };
      }
    }
    </script>
    
    <style>
    
    </style>

     8.Tree组件

    表结构

    # 分类表
    CREATE TABLE t_category(
      tid VARCHAR(32) PRIMARY KEY COMMENT '分类ID',
      tname VARCHAR(50) COMMENT '分类名称',
      `status` INT DEFAULT '1' COMMENT '分类状态:0 禁用、1 启用',
      parent_id VARCHAR(32) COMMENT '父分类ID',
      priority INT COMMENT '优先级,越小,同级显示的时候越靠前',
      depth INT COMMENT '深度,从1递增'
    );
    
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1000','男装/运动户外', NULL ,1,1);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2000','手机/数码', NULL ,2,1);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3000','零食/生鲜', NULL ,3,1);
    
    #'t1000','男装/运动户外'
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1100','上装', 't1000' ,1,2);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1200','裤子', 't1000' ,2,2);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1300','流行趋势', 't1000' ,3,2);
    
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1110','羽绒服', 't1100' ,1,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1120','棉衣', 't1100' ,2,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1130','卫衣', 't1100' ,3,3);
    
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1210','休闲长裤', 't1200' ,1,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1220','牛仔长裤', 't1200' ,2,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1230','卫裤', 't1200' ,3,3);
    
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1310','伞兵裤', 't1300' ,1,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1320','夜跑裤', 't1300' ,2,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1330','冰感T恤', 't1300' ,3,3);
    
    # 't2000','手机/数码'
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2100','手机', 't2000' ,1,2);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2200','手机配件', 't2000' ,2,2);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2300','数码配件', 't2000' ,3,2);
    
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2110','华为手机', 't2100' ,1,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2120','苹果手机', 't2100' ,2,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2130','vivo手机', 't2100' ,3,3);
    
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2210','手机壳', 't2200' ,1,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2220','手机耳机', 't2200' ,2,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2230','手机支架', 't2200' ,3,3);
    
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2310','U盘', 't2300' ,1,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2320','硬盘', 't2300' ,2,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2330','电池', 't2300' ,3,3);
    
    # t2000','零食/生鲜
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3100','方便速食', 't3000' ,1,2);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3200','零食', 't3000' ,2,2);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3300','名酒', 't3000' ,3,2);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3400','乳饮冰', 't3000' ,4,2);
    
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3110','方便面', 't3100' ,1,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3120','火腿肠', 't3100' ,2,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3130','甜品罐头', 't3100' ,3,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3140','煎饼冷面', 't3100' ,4,3);
    
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3210','薯片', 't3200' ,1,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3220','饼干', 't3200' ,2,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3230','网红IP', 't3200' ,3,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3240','海味', 't3200' ,4,3);
    
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3310','清爽啤酒', 't3300' ,1,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3320','微醺红酒', 't3300' ,2,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3330','养生黄酒', 't3300' ,3,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3340','名优白酒', 't3300' ,4,3);
    
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3410','酸奶', 't3400' ,1,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3420','纯牛奶', 't3400' ,2,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3430','奶粉', 't3400' ,3,3);
    INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3440','奶酪', 't3400' ,4,3);

    后端实现

    JavaBean

    package com.czxy.entity;
    
    import com.baomidou.mybatisplus.annotation.TableField;
    import com.baomidou.mybatisplus.annotation.TableId;
    import com.baomidou.mybatisplus.annotation.TableName;
    import com.baomidou.mybatisplus.extension.activerecord.Model;
    import lombok.Data;
    
    import java.io.Serializable;
    import java.util.ArrayList;
    import java.util.List;
    
    
    @SuppressWarnings("serial")
    @TableName("t_category")
    @Data
    public class TCategory extends Model<TCategory> {
        //分类ID
        @TableId
        private String tid;
        //分类名称
        private String tname;
        //分类状态:0 禁用、1 启用
        private Integer status;
        //父分类ID
        private String parentId;
        //优先级,越小,同级显示的时候越靠前
        private Integer priority;
        //深度,从1递增
        private Integer depth;
    
        @TableField(exist = false)
        private List<TCategory> children = new ArrayList<>();
    
    }

    Controller

    package com.czxy.controller;
    
    
    import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    import com.baomidou.mybatisplus.extension.api.ApiController;
    import com.baomidou.mybatisplus.extension.api.R;
    import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    import com.czxy.entity.TCategory;
    import com.czxy.service.TCategoryService;
    import com.czxy.vo.BaseResult;
    import org.springframework.web.bind.annotation.*;
    
    import javax.annotation.Resource;
    import java.io.Serializable;
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    
    @RestController
    @RequestMapping("tCategory")
    public class TCategoryController extends ApiController {
        /**
         * 服务对象
         */
        @Resource
        private TCategoryService tCategoryService;
    
        @GetMapping
        public BaseResult<List<TCategory>> findAll() {
            // 1 查询所有,并按照parent_id排序
            QueryWrapper<TCategory> queryWrapper = new QueryWrapper<>();
            queryWrapper.orderByAsc("parent_id");
            List<TCategory> list = tCategoryService.list(queryWrapper);
    
            // 2 处理数据 父子关系
            List<TCategory> resultList = new ArrayList<>();
            Map<String,TCategory> cacheMap = new HashMap<>();
    
            list.forEach( tCategory -> {
                // 3.1 获得父分类
                TCategory parentCategory = cacheMap.get(tCategory.getParentId());
                // 3.2 如果没有父添加到resultList中,如果有父追加父内部
                if(parentCategory == null) {
                    resultList.add(tCategory);
                } else {
                    parentCategory.getChildren().add(tCategory);
                }
    
                // 3.3 缓存自己
                cacheMap.put(tCategory.getTid() , tCategory);
    
            });
    
            return BaseResult.ok("查询成功",resultList);
        }
    
    
    }

    前端基本实现

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    <template>
      <div>
        <el-tree
          :data="categoryList"
          :props="defaultProps"
          show-checkbox
          @check-change="handleCheckChange">
        </el-tree>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          categoryList: [],
          defaultProps: {
            children: 'children',
            label: 'tname',
            disabled: (data,node) => {
              return data.status == 0
            }
          }
        }
      },
      methods: {
        async findAllCategory() {
          let { data } = await this.$http.get('http://localhost:7777/tCategory')
          this.categoryList = data.data
        },
        handleCheckChange( data, checked, indeterminate ) {
          console.log(data, checked, indeterminate);
        }
      },
      mounted() {
        this.findAllCategory()
      },
    }
    </script>
    
    <style>
    
    </style>
    

    修改状态

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    后端实现

    @PutMapping("/change")
    public BaseResult changeStatue(@RequestBody TCategory tCategory) {
        try {
            //1 查询
            TCategory findCategory = tCategoryService.getById(tCategory.getTid());
            Integer currentStatus = findCategory.getStatus();
            //2 需要修改成的状态
            Integer status = currentStatus == 1 ? 0 : 1;
    
            //3.1 修改当前
            Queue<TCategory> queue = new LinkedList<>();
            queue.add(findCategory);
    
            //3.2 遍历队列
            while(!queue.isEmpty()) {
                // 1) 获得队首
                TCategory currentCategory = queue.poll();
                // 2) 修改状态
                currentCategory.setStatus(status);
                tCategoryService.updateById(currentCategory);
    
                // 3) 获得所有的子节点
                QueryWrapper<TCategory> queryWrapper = new QueryWrapper<>();
                queryWrapper.eq("parent_id", currentCategory.getTid());
                List<TCategory> list = tCategoryService.list(queryWrapper);
                queue.addAll(list);
            }
    
            //4 成功
            return BaseResult.ok("修改成功");
        } catch (Exception e) {
            e.printStackTrace();
            return BaseResult.error(e.getMessage());
        }
    }

    前端实现

    <template>
      <div>
        <el-tree
          :data="categoryList"
          :props="defaultProps"
          show-checkbox
          :expand-on-click-node="false"
          node-key="tid"
          :default-expanded-keys="expandedArr"
          @check-change="handleCheckChange">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="info" circle v-if="data.status == 1" size="mini" @click="() => changeCategoryStatus(data)">禁用</el-button>
              <el-button type="success" circle v-if="data.status == 0" size="mini" @click="() => changeCategoryStatus(data)">启用</el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          categoryList: [],
          defaultProps: {
            id: 'tid',
            children: 'children',
            label: 'tname',
            disabled: (data,node) => {
              return data.status == 0
            }
          },
          expandedArr: []
        }
      },
      methods: {
        async findAllCategory() {
          let { data } = await this.$http.get('http://localhost:7777/tCategory')
          this.categoryList = data.data
        },
        handleCheckChange( data, checked, indeterminate ) {
          console.log(data, checked, indeterminate);
        },
        async changeCategoryStatus( nodeData ) {
          let { data } = await this.$http.put(`http://localhost:7777/tCategory/change`, nodeData)
          if(data.code == 1){
            this.$message.success(data.message)
            this.findAllCategory()
            //设置展开内容
            this.expandedArr = []
            this.expandedArr.push(nodeData.tid)
          } else {
            this.$message.error(data.message)
          }
        }
      },
      mounted() {
        this.findAllCategory()
      },
    }
    </script>
    
    <style>
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
      }
    </style>
    

    9.综合案例

    弹出层回显学生信息

    综合案例:点击学生“修改”按钮,显示弹出层

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    弹出层中编写表单

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    编写修改函数

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_15,color_FFFFFF,t_70,g_se,x_16

    <template>
      <div>
        <!-- 列表 -->
        <el-table :data="studentList" stripe border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="sid" label="编号" width="150"></el-table-column>
          <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
          <el-table-column prop="gender" label="性别" width="150"></el-table-column>
          <el-table-column prop="age" label="年龄" width="150"></el-table-column>
          <el-table-column label="爱好" >
            <template slot-scope="scope">
              <el-tag type="warning" v-for="(hobby,index) in scope.row.hobbies" :key="index">{{hobby}}</el-tag>
            </template>
    
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
    
        <!-- 弹出层 -->
        <el-dialog title="修改学生" :visible.sync="dialogFormVisible">
          <el-form :model="student">
            <el-form-item label="姓名" label-width="80px">
              <el-input v-model="student.sname" ></el-input>
            </el-form-item>
            <el-form-item label="性别" label-width="80px">
              <el-radio-group v-model="student.gender">
                <el-radio label="男">男生</el-radio>
                <el-radio label="女">女生</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄" label-width="80px">
              <el-input v-model="student.age" ></el-input>
            </el-form-item>
            <el-form-item label="爱好" label-width="80px">
              <el-checkbox-group v-model="student.hobbies">
                <el-checkbox label="抽烟" name="type"></el-checkbox>
                <el-checkbox label="喝酒" name="type"></el-checkbox>
                <el-checkbox label="烫头" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        handleSelectionChange(val) {
          this.multipleSelection = val;  //保存选中的数据
        },
        handleEdit(index, row) {
          // 回显表单
          this.student = row
          // 显示弹出层
          this.dialogFormVisible = true
        },
        handleDelete(index, row) {
          console.log(index, row);
        }
      },
      data () {
        return {
          dialogFormVisible: false, // 表单弹出层是否显示
          multipleSelection: [],  //多选,选中的数据
          studentList: [
            {
              sid: 's001',
              sname: '张三',
              gender: '男',
              age: 18,
              hobbies: ['抽烟','喝酒','烫头']
            },
            {
              sid: 's002',
              sname: '李思',
              gender: '女',
              age: 21,
              hobbies: ['抽烟','烫头']
            }
          ],
          student: {
    
          }
        }
      }
    }
    </script>
    
    <style>
      .el-tag + .el-tag {
        margin-left: 10px;
      }
    </style>

     10.轮播图

    轮播图

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    <template>
      <div>
        <el-carousel :interval="4000" type="card" height="300px">
          <el-carousel-item v-for="item in 6" :key="item">
            <img src="@/assets/logo.png" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
      .el-carousel__item img {
        width: 100%;
        height: 100%;
      }
    
      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }
    
      .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
      }
    </style>

     切换多张图片

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_7,color_FFFFFF,t_70,g_se,x_16

    <template>
      <div>
        <el-carousel :interval="1000" type="card" height="400px">
          <el-carousel-item v-for="item in 3" :key="item">
            <!-- <img src="@/assets/logo.png" alt="我是提示信息"> -->
            <!-- <img src="@/assets/img/1.jpg" alt="我是提示信息"> -->
            <img :src="require(`@/assets/img/${item}.jpg`)" alt="我是提示信息">
          </el-carousel-item>
        </el-carousel>
      </div>
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
      .el-carousel__item img {
        width: 100%;
        height: 100%;
      }
    
      /* 偶数的背景颜色 */
      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }
    
      /* 奇数的背景颜色 */
      .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
      }
    </style>

    复杂下拉列表

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16 完整代码

    <template>
      <div>
        <el-form ref="form" :model="classes" label-width="80px">
          <el-form-item label="选择老师">
            <el-select v-model="classes.teacherIds" @change="changeTeacher" multiple placeholder="请选择老师">
              <el-option
                v-for="(teacher,index) in teacherList" :key="index"
                :label="teacher.tname"
                :value="teacher.id"
                :disabled="teacher.disabled"
                
                >
                <span style="float: left">{{ teacher.tname }}</span>
                <span style="float: right;">{{ teacher.typeText }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
    
        {{classes}}
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          classes: {
            teacherIds: []
          },
          teacherList: [
            {
              id: 't001',
              tname: '梁桐老师',
              type: '1',
              typeText: '授课老师',
              disabled: false
            },
            {
              id: 't002',
              tname: '马坤老师',
              type: '2',
              typeText: '助理老师',
              disabled: false
            },
            {
              id: 't003',
              tname: '仲燕老师',
              type: '3',
              typeText: '辅导员老师',
              disabled: false
            },
            {
              id: 't004',
              tname: '韩小娇老师',
              type: '1',
              typeText: '授课老师',
              disabled: false
            },
            {
              id: 't005',
              tname: '董洪超老师',
              type: '2',
              typeText: '助理老师',
              disabled: false
            },
            {
              id: 't006',
              tname: '韩新园老师',
              type: '3',
              typeText: '辅导员老师',
              disabled: false
            },
            
          ]
        }
      },
      methods: {
        changeTeacher(selectIds) { // 选中的老师id
          // 1 获得选中老师对应的类型
          let selectType = this.teacherList.map(teacher => {
            if(selectIds.includes(teacher.id)) {
              return teacher.type
            }
          });
    
          // 2 处理数据:相同类型,不是选中老师,的其他老师禁用
          this.teacherList.forEach(teacher => {
            if(selectType.includes(teacher.type) && !selectIds.includes(teacher.id)) {
              // 禁用
              teacher.disabled = true
            } else {
              // 启用
              teacher.disabled = false
            }
          })
        }
      },
    }
    </script>
    
    <style>
    
    </style>

    展开全文
  • Element-UI安装使用教程

    2021-12-27 12:08:12
    Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是Mint UI 官方介绍:Element-Ul是一个网站快速成型工具,一套为开发者,设计师和产品经理准备的基于Vue 2.0的桌面端组件库 ...
  • element-ui使用教程

    千次阅读 2021-02-09 23:40:27
    element-ui 经常与 vue 结合使用 那么就需要引入三个组件库 -- css 样式: 用来对标签元素进行渲染美化 -- js 样式: 用来将数据进行动态展示 -- element-ui 组件: 大佬写好的功能组件 -- vue 组件: 用来...
  • Element-UI使用

    2022-07-04 18:45:48
    element-ui的上手使用还是挺容易的,在理想情况下,只需要以下步骤: 找想要的样式组件 复制代码到对应的.vue组件 修改对应的数据 1.1 Element-ui介绍及文档 非组件样式 官方提供的样式中有一部分并非是组件样式,...
  • Element UI 极简教程(1)

    2022-02-12 22:59:52
    Element UI 极简教程Layout 布局Container 布局容器Icon 图标Button 按钮Link 文字链接 本节主要介绍 Element UI 中的布局方式以及常用的 icon、Button、Link 组件 Layout 布局 通过基础的 24 栏划分,可以非常迅速...
  • Element-UI使用指南

    万次阅读 多人点赞 2016-11-03 17:48:53
    Element-UI使用指南 Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI 。 开发环境1.安装webpacknpm install -g webpack2.安装vue-clivue-cli是什么?vue-cli 是...
  • element ui 使用 iconfont

    2021-02-04 18:01:01
    所以今天写一个elementui如何使用阿里的iconfont的教程。 首先你需要注册一个iconfont账号 iconfont地址 注册之后点击我的项目 点击添加新增一个项目 随便选择一个图标,点击加入购物车 点击购物车按钮 点击...
  • element-ui最新版,2.15.7

    2022-04-06 23:41:31
    公司需要内网开发,因此休息的时候找了一下element离线版,可是网上基本都是各种限制下载的资源,所以决定自己尝试做了一份。在网上找了大神的教程,按部就班的做了一份,动手党可以一起尝试,链接在此:...
  • element-ui@2.15.9 cdn资源

    2022-08-09 18:53:35
    element-ui 本地资源包, 下载自unpkg.com, HTML引入vue.js后即可使用 具体使用方法参考element官网 cdn引入教程
  • Java大联盟 致力于最高效的Java学习关注B 站搜索:楠哥教你学Java获取更多优质视频教程Radio 单选框Element UI 的 Radio 使用起来非常简单,直接使用 e...
  • vue中使用element-ui组件库的详细步骤 1.安装 npm install element-ui -S //安装到本地开发者环境中 安装成功后:package.json文件中会有以下信息 2.导入 import ElementUI from 'element-ui'; //导入组件 ...
  • 一,什么是element-uielement-ui是由饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于Vue.js 2.0的桌面组件...二,element-ui使用1. 安装,推荐使用npm安装方式命令:npm install element-ui -save2...
  • Java大联盟 致力于最高效的Java学习关注B 站搜索:楠哥教你学Java获取更多优质视频教程Select下拉框Element UI 的 Select 直接使用 el-selec...
  • ElementUI--入门教程

    千次阅读 2021-08-27 19:07:12
    ElementUI--使用教程ElementUI介绍4.2 常用组件4.2.1 Container 布局容器4.2.2 Dropdown 下拉菜单4.2.3 NavMenu 导航菜单4.2.4 Table 表格4.2.5 Pagination 分页4.2.6 Message 消息提示4.2.7 Tabs 标签页4.2.8 Form ...
  • Java大联盟 致力于最高效的Java学习关注B 站搜索:楠哥教你学Java获取更多优质视频教程Icon 图标Element UI 的 Icon 组件提供了一套常用的图标集合,直接使...
  • 从头开始搭建vue admin页面框架,各个页面布局组件的开发,以及核心功能:登录认证、动态生成菜单、路由,菜单管理,为企业级菜单权限管理平台提供定制化解决思路。
  • ElementUI的简单使用方法讲解

    千次阅读 2021-10-11 14:57:32
    首先 yarn add element-ui -S 让我们来安装这个包 main.js 全局注册 element-ui这个组件 // 完整引入,main.js写入以下代码 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' ...
  • element UI 走马灯使用

    千次阅读 2022-02-17 22:07:35
    先贴一个官方的 贴一个我写的 在原有的基础上,删了官方的左右箭头,自己换了个,然后底部的切换从条形换成点状 1.如何更换官网原来的切换箭头: 先给el-carousel增加一个ref,然后自定义按钮图片和内容,给...
  • element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下 对于我们来说,首选的当然是阿里icon库 教程: 1.打开阿里icon,注册 >登录>图标管理...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,468
精华内容 5,387
关键字:

element ui使用教程