<template><div><!--列表--><el-table :data="studentList"stripeborder@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="sid"label="编号"width="150"></el-table-column><el-table-columnprop="sname"label="姓名"width="150"></el-table-column><el-table-columnprop="gender"label="性别"width="150"></el-table-column><el-table-columnprop="age"label="年龄"width="150"></el-table-column><el-table-columnlabel="爱好"><templateslot-scope="scope"><el-tagtype="warning"v-for="(hobby,index) in scope.row.hobbies" :key="index">{{hobby}}</el-tag></template></el-table-column><el-table-columnlabel="操作"><templateslot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></div></template><script>exportdefault {
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>

<!--条件表单start--><el-form :inline="true" :model="studentVo"size="mini"class="demo-form-inline"><el-form-itemlabel="班级"><el-selectv-model="studentVo.cid"placeholder="请选择班级"><el-optionlabel="Java12班"value="c001"></el-option><el-optionlabel="Java34班"value="c002"></el-option></el-select></el-form-item><el-form-itemlabel="姓名"><el-inputv-model="studentVo.name"placeholder="请输入姓名"></el-input></el-form-item><el-form-itemlabel="年龄"><el-col :span="11"><el-inputv-model="studentVo.startAge"placeholder="请输入开始年龄"></el-input></el-col><el-colclass="line" :span="2">-</el-col><el-col :span="11"><el-inputv-model="studentVo.endAge"placeholder="请输入结束年龄"></el-input></el-col></el-form-item><el-form-item><el-buttontype="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-->

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

<template><el-cardclass="box-card"><el-form :model="user"label-width="80px"ref="loginFormRef"><el-form-itemlabel="用户名"><el-inputv-model="user.username"prefix-icon="el-icon-user"placeholder="请输入用户名"></el-input></el-form-item><el-form-itemlabel="密码"><el-inputv-model="user.password"prefix-icon="el-icon-lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-itemlabel="确认密码"><el-inputv-model="user.repassword"prefix-icon="el-icon-lock"type="password"placeholder="请再次输入密码"></el-input></el-form-item><el-form-itemlabel="生日"><el-date-pickerv-model="user.birthday"type="date"placeholder="选择日期"></el-date-picker></el-form-item><el-form-itemlabel="学历"><el-selectv-model="user.edu"placeholder="请选择你的学历"><el-optionlabel="小班"value="xb"></el-option><el-optionlabel="中班"value="zb"></el-option><el-optionlabel="大班"value="db"></el-option><el-optionlabel="学前班"value="xqb"></el-option></el-select></el-form-item><el-form-itemlabel="性别"><el-radio-groupv-model="user.gender"><el-radiolabel="男"></el-radio><el-radiolabel="女"></el-radio></el-radio-group></el-form-item><el-form-itemlabel="爱好"><el-checkbox-groupv-model="user.hobbies"><el-checkboxlabel="抽烟"name="type"></el-checkbox><el-checkboxlabel="喝酒"name="type"></el-checkbox><el-checkboxlabel="烫头"name="type"></el-checkbox><el-checkboxlabel="蹦迪"name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-itemlabel="婚否"><el-switchv-model="user.marry"></el-switch></el-form-item><el-form-itemlabel="省市县"><el-cascaderv-model="user.city"          :options="cityList"></el-cascader></el-form-item><el-form-item><el-buttontype="primary"@click="login">登录</el-button><el-buttontype="info"@click="$refs.loginFormRef.resetFields()">重置</el-button></el-form-item></el-form></el-card></template><script>exportdefault {
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, .... ]
}
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 5, message: `用户名长度必须3-5之间`, trigger: 'blur' }

<template><el-cardclass="box-card"><el-form :model="user" :rules="rules"label-width="80px"ref="loginFormRef"><el-form-itemlabel="用户名"prop="username"><el-inputv-model="user.username"prefix-icon="el-icon-user"placeholder="请输入用户名"></el-input></el-form-item><el-form-itemlabel="密码"prop="password"><el-inputv-model="user.password"prefix-icon="el-icon-lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="login">登录</el-button><el-buttontype="info"@click="$refs.loginFormRef.resetFields()">重置</el-button></el-form-item></el-form></el-card></template><script>exportdefault {
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>