1. 全栈程序员必看首页

elementui快速入门_vue element ui

全栈程序员-站长 • • 未分类 • 阅读 4

elementui快速入门_vue element ui什么是ElementUI这篇文章会告诉你带你快速入门学会ElementUI

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

什么是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>

elementui快速入门_vue element ui

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/196336.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • webservice技术介绍

    webservice技术介绍

    一、WebService到底是什么？   一言以蔽之：WebService是一种跨编程语言和跨操作系统平台的远程调用技术。   所谓跨编程语言和跨操作平台，就是说服务端程序采用java编写，客户端程序则可以采用其他编程语言编写，反之亦然！跨操作系统平台则是指服务端程序和客户端程序可以在不同的操作系统上运行。    所谓远程调用，就是一台计算机a上的一个程序可以调用到另外一台

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月5日
    110
  • CAS实现单点登录（SSO）经典完整教程

    CAS实现单点登录（SSO）经典完整教程

    CAS实现单点登录（SSO）经典完整教程一、简介1、cas是有耶鲁大学研发的单点登录服务器2、本教材所用环境Tomcat7.2JDK6CASService版本cas-server-3.4.8-rele

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月7日
    101
  • 有什么优质的计算机专业书籍？操作系统、计算机网络、计算机组成、数据结构、数据库…..「建议收藏」

    有什么优质的计算机专业书籍？操作系统、计算机网络、计算机组成、数据结构、数据库…..「建议收藏」

    有什么优质的计算机专业书籍？操作系统、计算机网络、计算机组成、数据结构、数据库…..「建议收藏」大家好，我是小林哥。平日里，大家都喊程序员加班多很辛苦，动不动就掉头发，但干的还是很香的，毕竟大多数公司钱还是给的很到位的，今年毕业应届生的我见到好多动不动就月薪20K~30K的，真让人两眼泪酸酸，当然这离不开他们大学期间的努力。讲真，没什么家庭背景的人，选择当程序员确实是比较好的选择了，原因有二：首先，当今互联网、AI人工智能、大数据等都是高速发展的行业，自然人才需求很多，薪资也相对其他传统行业高；第二，纯粹看你技术能力，只要自己愿意付出努力，技术能力肯定会慢慢提高上来，而且现在比起几十年

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月2日
    50
  • navicat生产激活码失败【中文破解版】 idea

    navicat生产激活码失败【中文破解版】

    (navicat生产激活码失败)JetBrains旗下有多款编译器工具（如：IntelliJ、WebStorm、PyCharm等）在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上，过去15年以来，JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月1日
    204
  • 美国100部推理小说排行榜第一_好看的悬疑小说排行榜前十名

    美国100部推理小说排行榜第一_好看的悬疑小说排行榜前十名

    美国100部推理小说排行榜第一_好看的悬疑小说排行榜前十名这份书单是美国推理作家协会（TheMysteryWritersofAmerica，简称MWA）票选出来的史上最经典的一百部推理小说排行榜。评选过程极为复杂，首先由推理协会选出本格派、硬汉派、惊悚派、间谍小说等推理小说十个主要流派的十个代表作家，再由这十个作家选出各流派的十部代表作品，然后由协会会员投票排出名次。所以这份书单不仅仅有总的一百强排行榜，还有各个不同流派的十大杰作排名，其中本格和…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月28日
    6
  • matlab axis坐标轴相关设置详解

    matlab axis坐标轴相关设置详解

    matlab axis坐标轴相关设置详解

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月9日
    35

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号