5.表格：查询列表
测试页面
基本表格
<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>
表格修饰
<template> <div> <!-- 列表 --> <el-table :data="studentList" stripe border > <el-table-column prop="sid" label="编号" width="150"></el-table-column>
多选
<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>
自定义模板
<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>
- 练习：展示“爱好”信息
studentList: [ { sid: 's001', sname: '张三', gender: '男', age: 18, hobbies: ['抽烟','喝酒','烫头'] }, { sid: 's002', sname: '李思', gender: '女', age: 21, hobbies: ['抽烟','烫头'] } ]
<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 |
条件查询
<!-- 条件表单 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 -->
分页条
<!-- 分页条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
登录表单效果
<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>
复杂表单：注册
<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>
表单校验
设置校验规则、确定校验属性
编写校验规则
rules: { 校验属性: [ 规则1, 规则2, .... ] }
1. { required: true, message: '请输入用户名', trigger: 'blur' }, 2. { min: 3, max: 5, message: `用户名长度必须3-5之间`, trigger: 'blur' }
提交表单时，校验
<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>
