element-ui簡單筆記(中)
element-ui的簡單筆記
關注一下公衆號：內有相關文章！！
html
8、Form相關組件
##### 8.1 Radio單選按鈕vue
1.建立Radio按鈕git
<!--組件建立-->
<el-radio v-model="label" label="男">男</el-radio>
<el-radio v-model="label" label="女">女</el-radio>
<script>
export default {
name: "Radio",
data(){
return{
label:'男'
}
}
}
</script>
注意:在使用radio單選按鈕是至少加入v-model和label兩個屬性github
2.Radio按鈕屬性的使用web
<el-radio v-model="label" name="sex" disabled label="男">男</el-radio> <el-radio v-model="label" name="sex" border size="small" label="女">女</el-radio> <el-radio v-model="label" border size="mini" label="女">女</el-radio> <el-radio v-model="label" border size="medium" label="女">女</el-radio>
總結:屬性使用仍是直接卸載對應的組件標籤上以 屬性名=屬性值 方式使用spring
3.Radio事件的使用element-ui
<el-radio v-model="label" @change="aa" name="sex" label="男">男</el-radio>
<el-radio v-model="label" @change="aa" name="sex" border size="small" label="女">女</el-radio>
<script>
export default {
name: "Radio",
data(){
return{
label:'男'
}
},
methods:{
aa(){ //定義的事件處理函數
console.log(this.label);
}
}
}
</script>
總結:json
- 事件的使用也是和屬性使用是一致都是直接寫在對應的組件標籤上
- 事件在使用時必須使用Vue中綁定時間方式進行使用如 @事件名=事件處理函數(綁在在vue組件中對應函數)
4.radio按鈕組springboot
<el-radio-group v-model="radio">
<el-radio :label="3">備選項3</el-radio>
<el-radio :label="6">備選項6</el-radio>
<el-radio :label="9">備選項9</el-radio>
</el-radio-group>
<script>
export default {
name: "Radio",
data() {
return {
radio: 6
}
}
}
</script>
8.2 checkbox組件
1.建立checkbox組件markdown
<el-checkbox v-model="checked">北京</el-checkbox> <el-checkbox v-model="checked">上海</el-checkbox> <el-checkbox v-model="checked">天津</el-checkbox>
2.屬性使用
<el-checkbox v-model="checked" disabled true-label="北京">北京</el-checkbox> <el-checkbox checked border true-label="上海">上海</el-checkbox> <el-checkbox v-model="checked" true-label="天津">天津</el-checkbox>
3.事件使用
<el-checkbox @change="aa"v-model="checked" true-label="上海">上海</el-checkbox>
<el-checkbox v-model="checked" @change="aa" true-label="天津">天津</el-checkbox>
<script>
export default {
name: "Checkbox",
data(){
return{
checked:true
}
},
methods:{
aa(){
console.log(this.checked);
}
}
}
</script>
4.複選框組的使用
<el-checkbox-group @change="bb" :min="1" v-model="checkList">
<el-checkbox label="複選框 A"></el-checkbox>
<el-checkbox label="複選框 B"></el-checkbox>
<el-checkbox label="複選框 C"></el-checkbox>
<el-checkbox label="禁用" disabled></el-checkbox>
<el-checkbox label="選中且禁用" disabled></el-checkbox>
</el-checkbox-group>
<script>
export default {
name: "Checkbox",
data(){
return{
checked:true,
checkList:[],
}
},
methods:{
aa(){
console.log(this.checked);
},
bb(){
console.log(this.checkList);
}
}
}
</script>
8.3 Input 輸入框組件
1.建立Input組件
<el-input v-model="name"></el-input>
<script>
export default {
name: "Input",
data(){
return {
name:'xiaochen'
}
}
}
</script>
2.經常使用屬性
<el-input v-model="name" disabled type="textarea"></el-input>
<el-input v-model="price" :maxlength="10" show-word-limit :minlength="5"></el-input>
<el-input prefix-icon="el-icon-user-solid" placeholder="請輸入用戶名" clearable v-model="username"></el-input>
<el-input suffix-icon="el-icon-star-off" placeholder="請輸入密碼" show-password type="password" clearable v-model="password"></el-input>
<script>
export default {
name: "Input",
data() {
return {
restaurants: [],
state1: '',
state2: '',
name:'xiaochen',
price:0.0,
username:"",
password:"",
};
},
}
</script>
3.事件使用
<el-input v-model="username" @blur="aaa" @focus="bbb" @clear="clears" clearable @input="ccc"></el-input>
<script>
export default {
name: "Input",
data() {
return {
restaurants: [],
state1: '',
state2: '',
name:'xiaochen',
price:0.0,
username:"",
password:"",
};
},
methods:{
aaa(){
console.log('失去焦點');
;
},
bbb(){
console.log("獲取焦點");
},
ccc(value){
console.log("改變:"+value);
},
clears(){
console.log("清楚");
}
}
}
</script>
4.方法的使用
<h1>方法的使用</h1>
<el-input v-model="username" ref="inputs"></el-input>
<el-button @click="focusInputs">focus方法</el-button>
<el-button @click="blurInputs">blur方法</el-button>
<script>
export default {
name: "Input",
data() {
return{}
},
methods:{
//調用focus方法
focusInputs(){
this.$refs.inputs.focus();
},
//調用失去焦點方法
blurInputs(){
this.$refs.inputs.blur();
}
}
}
</script>
總結
- 在使用組件的方法時須要在對應的組件中加入
ref="組件別名" - 在調用方法時直接使用
this.$refs.組件別名.方法名()
注意:在elementui中全部組件 都存在 屬性 事件 和方法
屬性:直接寫在對應的組件標籤上 使用方式:屬性名=屬性值方式
事件: 直接使用vue綁定事件方式寫在對應的組件標籤上 使用方式:@事件名=vue中事件處理函數
方法: 1.在對應組件標籤上使用ref=組件別名2.經過使用this.$refs.組件別名.方法名()進行調用
8.4 Select選擇器組件的使用
1.組件建立
# 1.數據寫死在頁面上
<el-select v-model="cityName">
<el-option value="北京">北京</el-option>
<el-option value="天津">天津</el-option>
</el-select>
注意:1.要求下拉列表中必須存在option的value屬性值 2.要求select中必須使用v-model進行數據綁定
# 2.如何動態獲取數據
<el-select>
<el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id">
</el-option>
</el-select>
<script>
export default {
name: "Select",
data(){
return{
options:[
{id:'1',name:"研發部"},
{id:'2',name:"小賣部"},
{id:'3',name:"小米部"},
]
}
},
}
</script>
# 3.獲取下拉列表選中數據
<el-select v-model="cityId" multiple clearable>
<el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"></el-option>
</el-select>
<script>
export default {
name: "Select",
data(){
return{
options:[
{id:'1',name:"研發部"},
{id:'2',name:"小賣部"},
{id:'3',name:"小米部"},
],
cityId:''
}
},
}
</script>
2.屬性使用
<el-select v-model="cityId" multiple clearable> ...... </el-select>
3.事件的使用
<el-select v-model="cityId" @change="aaa" multiple clearable>
<el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id">
</el-option>
</el-select>
<script>
export default {
name: "Select",
data(){
return{
options:[
{id:'1',name:"研發部"},
{id:'2',name:"小賣部"},
{id:'3',name:"小米部"},
],
cityId:'',
cityName:''
}
},
methods:{
aaa(value){
console.log(value);
}
}
}
</script>
4.方法的使用
1.給組件經過ref起別名並綁定到vue實例中
<el-select ref="selects" v-model="cityId" @change="aaa" multiple clearable>
....
</el-select>
2.調用方法
this.$refs.selects.focus();//方法調用
8.5 Switch 開關組件
1.Switch組件的建立
<el-switch v-model="value"></el-switch>
<script>
export default {
name: "Switchs",
data(){
return{
value:true
}
}
}
</script>
2.屬性使用
<el-switch v-model="value" active-text="打開" active-color="#13ce66" inactive-color="#ff4949" :active-
value="true" :inactive-value="false" inactive-text="關閉" :width="200">
</el-switch>
3.事件使用
<el-switch v-model="value" @change="aaa"></el-switch>
<script>
export default {
name: "Switchs",
data(){
return{
value:true
}
},
methods:{
aaa(value){
console.log(value);
}
}
}
</script>
4.方法使用
<el-switch ref="sw" v-model="value" @change="aaa" active-text="打開" active-color="#13ce66" inactive-color="#ff4949" :active-value="true" :inactive-value="false" inactive-text="關閉" :width="200"></el-switch>
<el-button @click="bbb">調用方法</el-button>
<script>
export default {
name: "Switchs",
data(){
return{
value:true
}
}
,
methods:{
aaa(value){
console.log(value);
},
bbb(){
alert();
this.$refs.sw.focus();//方法調用
}
}
}
</script>
8.6 DatePicker組件
1.建立
<el-date-picker v-model="createDate" ></el-date-picker>
2.屬性的使用
<el-date-picker
v-model="createDate"
:editable="false"
:clearable="false"
placeholder="請輸入建立時間"
type="daterange"
start-placeholder="生產時間"
end-placeholder="過時時間"
format="yyyy/MM/dd"
>
</el-date-picker>
3.Picker Options 和 Shortcuts使用
- Shortcuts: 用來增長日期組件的快捷面板
- Picker Options: 用來對日期控件作自定義配置
3.1 Shortcuts使用
</el-date-picker>
<h1>日期配置</h1>
<el-date-picker
v-model="createDate"
type="date"
placeholder="請輸入時間"
:picker-options="pickerOptions"
>
</el-date-picker>
<script>
export default {
name: "DatePrickers",
data(){
return{
createDate:"",
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{ //定義的shortucts
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一週前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
}
}
}
</script>
3.2 Picker Options
<el-date-picker
v-model="createDate"
type="date"
placeholder="請輸入時間"
:picker-options="pickerOptions"
>
</el-date-picker>
<script>
export default {
name: "DatePrickers",
data(){
return{
createDate:"",
pickerOptions: {
disabledDate(time) { //用來對日期進行的控制
return time.getTime() < Date.now();
}
},
}
}
}
</script>
4.事件使用
<el-date-picker
.....
:picker-options="pickerOptions"
@change="aaa"
>
</el-date-picker>
<script>
export default {
name: "DatePrickers",
data(){
return{
createDate:"",
}
},
methods:{
aaa(value){ //發生change事件的函數
console.log(value);
}
}
}
</script>
8.7 Upload組件
1.組件建立
<el-upload action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList"> <el-button size="small" type="primary">點擊上傳</el-button> <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div> </el-upload>
注意:在使用upload組件時必須設置action屬性 action屬性爲必要參數不能省略
2.屬性和事件的使用
<el-upload :limit="3" :on-exceed="exceed" :multiple="false" :before-remove="beforeRemove" :on-remove="remove" :on-preview="show" :drag="true" accept=".txt,.png" :show-file-list="true" name="aaa" :data="info" action="https://jsonplaceholder.typicode.com/posts/"
:file-list="fileList">
<i class="el-icon-upload"></i>
<div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
<div class="el-upload__tip" slot="tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>
<script>
export default {
name: "Uploads",
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'
}],
info: {id:"21"}
}
},
methods:{
show(file){
console.log(file);
},
remove(file,fileList){
console.log(file);
console.log(fileList);
//alert(fileList.length)
},
beforeRemove(file,fileList){
if(fileList.length<3){
alert("上傳文件不能少於3個")
return false;
}
},
exceed(file,fileList){
alert("文件超出上傳的個數限制")
}
}
}
</script>
- 注意:在使用upload組件時沒有event事件,全部事件都是屬性事件
3.方法的使用
<el-upload ref="uploads" ....>........</el-upload>
方法調用:
this.$refs.uploads.clearFiles();
this.$refs.uploads.abort();
this.$refs.uploads.submit();
8.8 Form組件
1.組件的建立
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活動名稱">
<el-input v-model="form.name"></el-input>
</el-form-item>
......
<el-form-item>
<el-button type="primary" @click="onSubmit">當即建立</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
<script>
export default {
name: "Form",
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
2.內聯表單
<el-form :inline="true" :model="formInline" class="demo-form-inline">
.......
</el-form>
經過設置 inline=true方式將表單做爲內聯表單處理
3.表單驗證
- 使用說明:
Form 組件提供了表單驗證的功能，只須要經過rules屬性傳入約定的驗證規則，並將 Form-Item 的prop屬性設置爲需校驗的字段名便可。校驗規則參見 async-validator
3.1 失去焦點自動驗證
<el-form :rules="rules" ...>
<el-form-item label="活動名稱" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
....
</el-form>
<script>
export default {
name: "Form",
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{required: true, message: '請輸入活動名稱', trigger: 'blur'},
{min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur'}
],
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
3.2 表單提交調用表單組件的驗證方法驗證
<el-form :rules="rules".... ref="form" >
<el-form-item label="活動名稱" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">當即建立</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
...
methods: {
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
//發送異步請求 到 springboot項目
} else {
console.log('error submit!!');
return false;
}
});
}
}
4.自定義表單的驗證規則
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="手機號" prop="phone">
<el-input type="password" v-model="ruleForm.phone" ></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
name: "Form",
data() {
let validatePhone = (rule,value,callback)=>{ //定義自定義的驗證規則
console.log(rule);
console.log(value);
console.log(callback);
if(!value){
callback(new Error("手機號不能爲空!"));
}
if(!/^1[3456789]\d{9}$/.test(value)){
callback(new Error("手機號碼不正確!!"))
}
}
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: { //驗證規則
name: [ //使用默認規則
{required: true, message: '請輸入活動名稱', trigger: 'blur'},
{min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur'}
],
phone:[ //使用自定義規則
{validator:validatePhone,trigger: 'blur'}
]
},
ruleForm:{
phone:'',
},
}
},
methods: {
}
}
</script>
element-ui的組件太多了，我也就是把我最近練習的給記錄下來，其他的這裏就再也不一一介紹了，你們有須要的能夠看文檔，自行去測試。謝謝！！！
相關文章
- 1. ElementUi學習筆記
- 2. weblogic簡單筆記
- 3. Servlet簡單筆記
- 4. HTML5簡單筆記
- 5. netty簡單筆記
- 6. JVM簡單筆記
- 7. echarts2簡單筆記
- 8. sqlite簡單筆記
- 9. SQLAlchemy 簡單筆記
- 10. Mason 簡單筆記
- 更多相關文章...
- • ASP.NET Razor - 標記 - ASP.NET 教程
- • Thymeleaf簡單格式化輸出 - Thymeleaf 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Github 簡明教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面試的幾個實用小技巧，不妨看看！
- 2. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 3. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 4. 如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 5. Mac OS非兼容Windows軟件運行解決方案——「以VMware & Microsoft Access爲例「
- 6. 封裝 pyinstaller -F -i b.ico excel.py
- 7. 數據庫作業三ER圖待完善
- 8. nvm安裝使用低版本node.js(非命令安裝)
- 9. 如何快速轉換圖片格式
- 10. 將表格內容分條轉換爲若干文檔
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. ElementUi學習筆記
- 2. weblogic簡單筆記
- 3. Servlet簡單筆記
- 4. HTML5簡單筆記
- 5. netty簡單筆記
- 6. JVM簡單筆記
- 7. echarts2簡單筆記
- 8. sqlite簡單筆記
- 9. SQLAlchemy 簡單筆記
- 10. Mason 簡單筆記