Vue-element

  1. Radio 单选框
  2. Checkbox 多选框

components: Pagination: Quick first、previous、next、last和page按钮,用于控制另一个组件的分页(例如或list)。

confirmLoading 控制页面刷新(bool)

$confirm 消息提示

1
2
3
4
5
this.$confirm('提示信息','对话框名字' {
type: 'warning' // 消息类型,用于显示图标 success / info / warning / error
confirmButtonText: '是',
cancelButtonText: '否'
})

dialogStatus //对话框状态

增删改查:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
handleCreate() {
this.resetTemp() //初始化所需变量
this.dialogStatus = 'create'
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['dafaForm'].clearValidate()
})
},
createData() {
this.$refs['dataForm'].validate(async(valid) => {
if (valid) {
this.confirmLoading = true
await disciplinesOp.create(this.temp).then(() => {
this.dialogFormVisible = false
this.$notify({
title: '成功',
message: '创建成功',
type: 'success',
duration: 2000 //持续时间
})
this.initData()
this.getDisciplineOptions({ usingCache: false })
this.confirmLoading = false
}).catch(() => {
this.confirmLoading = false
})
}
})
}

Radio 单选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
/* el-radio组件, 与data中的radio双向绑定,
选择后radio会被改为对标签中label的值 初始的选中为与data中绑定的数据的值相等label所在的标签*/
/* 可在元素中设置 disable属性, 使其成为不可用状态*/

<el-radio v-model="radio" label="1">Option1</el-radio>
<el-radio v-model="radio" label="2">Option2</el-radio>
</template>

<script>
export default {
data() { // data设置为函数, 为了组件复用
return {
radio: '1'
};
}
}
</script>

/* 结合 el-radio-group 元素和子元素 el-radio 实现单选组
只需在el-radio-group 中绑定 v-model 在 el-radio 中设置好 radio 即可 */
/* 修改按钮样可以将 el-radio改为 el-radio-button, 用法与上述一致, 还有border属性(接受Boolean) */

Checkbox 多选框

与Radio类似, 单一的checkbox中, 默认绑定的变量类型为 Boolean

多选框组: 在 el-checkbox-group 中 v-model 绑定 Array类型变量

indeterminate状态: 表示 checkbox 的不确定状态, 可用于实现全选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
<el-checkbox :indeterminate="isIndenterminate" v-model="checkAll" @change="handleCheckAllChange"> 全选 </el-checkbox>
<div style="margin: 15px 0;"></div>

<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>

<script>
const cityOptions = ['上海', '北京', '广州', '深圳']
export default {
date() {
return {
checkAll: false,
checkedCities: ['上海', '北京'],
cities: cityOptions,
isIndenterminate: true
};
}
methods: {
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions: [];
this.isIndenterminate = false;
},
handleCheckedCitiesChange(val) {
let checkedCount = val.length;
this.checkAll = checkedCount == this.cities.length;
this.isIndenterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
};
</script>
script>