vue + Element ui 常用的组件和方法
弹出框
Dialog对话框
1.点空白地方触发事件 handleClose()使用before-close绑定
2.点击空白关闭弹出框 done()
3. 提示文字 title
4. 是否使用点击空白关闭弹出框 close-on-click-modal =“布尔值”
5. 关闭时是否销毁里面的元素 destroy-on-close=“布尔值”
6. show-close=布尔值 取消或显示右上的X
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<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>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
通常会有需求,在关闭弹框后需要清空填写的数据,这时候就需要关闭事件了
<el-dialog title="标题" :visible.sync="bind" size="small" @close='closeDialog'>
</el-dialog>
closeDialog(){
this.xxx = '';
},
Upload 上传
常用的属性
1.action 必选参数,上传的地址
2.headers 设置上传的请求头部
3.multiple 是否支持多选文件
4.data 上传时附带的额外参数
5.name 上传的文件字段名
6.show-file-list 是否显示已上传文件列表
7.drag 是否启用拖拽上传
8.accept 接受上传的文件类型(thumbnail-mode 模式下此参数无效)
9.limit 最大允许上传个数
10.tip 提示说明文字
11.clearFiles 清空已上传的文件列表(该方法不支持在 before-upload 中调用)
常用的钩子
1.on-preview 点击文件列表中已上传的文件时的钩子 function(file)
2.on-remove 文件列表移除文件时的钩子 function(file, fileList)
3.on-success 文件上传成功时的钩子 function(response, file, fileList)
4.on-error 文件上传失败时的钩子 function(err, file, fileList)
6.on-progress 文件上传时的钩子
7.on-change 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
8.on-exceed 文件超出个数限制时的钩子
9.trigger 触发文件选择框的内容
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<script>
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
}
}
</script>
Cascader 级联选择器
1.获取数据时获取的值放在options,
2.用props吧对应的值放进去
获取后台的数据渲染列表
<el-cascader
v-model="formData.value"
ref="unitAreacode"
:options="options"
:props="defaultParams"
@change="handleChange"
></el-cascader>
data() {
return {
defaultParams:{
value:"id",
label:"name",
children:"children"
},
options:[],
},
mounted() {
this.selectList()
},
methods: {
selectList(){
Apis.selectList().then(res=>{
console.log(res)
this.options=res.data
})
},
获取选择后所有的子节点
1.ref的方式调用
this.$refs.unitAreacode.getCheckedNodes()[0]
handleChange(value){
let result = this.$refs.unitAreacode.getCheckedNodes()[0];
}
Table 表格
次序请求数据
<template>
<layout-form>
<!-- header slot -->
<template slot="header"></template>
<!-- default slot -->
<el-form
ref="formList"
:rules="rules"
:model="formList"
:disabled="isDisabled"
label-width="120px"
>
<el-form-item label="联系人姓名" prop="name">
<el-input
v-model="formList.name"
show-word-limit
maxlength="50"
placeholder="请输入联系人姓名"
></el-input>
</el-form-item>
<el-form-item label="联系人电话" prop="phone_number">
<el-input v-model="formList.phone_number"></el-input>
</el-form-item>
<el-form-item label="退货地址" prop="province">
<div class="address">
<el-select
v-model="formList.province"
@change="handleProvince()"
placeholder="省"
class="select_style"
>
<el-option
v-for="item in province"
:key="item.id"
:label="item.full_name"
:value="item.full_name"
>
</el-option>
</el-select>
<el-select
@change="handleCity()"
v-model="formList.city"
placeholder="市"
class="select_style"
>
<el-option
v-for="item in city"
:key="item.id"
:label="item.full_name"
:value="item.full_name"
>
</el-option>
</el-select>
<el-select
v-model="formList.area"
placeholder="区"
class="select_style"
>
<el-option
v-for="item in area"
:key="item.id"
:label="item.full_name"
:value="item.full_name"
>
</el-option>
</el-select>
</div>
<div class="textarea_text">
<el-input
type="textarea"
placeholder="请输入详细地址"
v-model="formList.address"
maxlength="200"
show-word-limit
>
</el-input>
</div>
</el-form-item>
</el-form>
<!-- footer slot -->
<template slot="footer" class="template">
<div v-if="isDisabled" class="template">
<el-button type="primary" @click="isDisabled = false">编辑</el-button>
</div>
<div v-else class="template">
<el-button type="primary" @click="handlePreservation()">保存</el-button>
<el-button @click="handleCancel()">取消</el-button>
</div>
</template>
</layout-form>
</template>
<script>
import Apis from "@/apis/order/ayorder/ayorder";
export default {
name: "Ayaddress",
props: {},
data() {
let phone = (rule, value, callback) => {
let phoneNum = /^1[34578]\d{9}$/;
if (phoneNum.test(value) == false) {
callback(new Error("请输入11位的手机号"));
} else {
callback();
}
};
return {
title: "爱悦售后地址设置",
formList: {
province: "",
city: "",
area: ""
},
textarea: "",
isDisabled: true,
province: [],
city: [],
area: [],
rules: {
name: [
{
required: true,
message: "联系人姓名不能为空",
trigger: "blur"
}
],
phone_number: [
{
required: true,
message: "联系人电话不能为空",
trigger: "change"
},
{
validator: phone,
trigger: "change"
}
],
province: [
{
required: true,
message: "地址不能为空",
trigger: "blur"
}
]
}
};
},
mounted() {
this.getOrderAddress();
},
methods: {
async getProvince(data) {
return await Apis.getAddressList(data);
},
async getOrderAddress() {
let res = await Apis.getOrderAddress();
this.formList = res.data;
console.log(this.formList, 999999999);
let provinceRes = await this.getProvince();
this.province = provinceRes.data;
let provinceID = this.province.find(item => {
return item.full_name == this.formList.province;
});
let cityRes = await this.getProvince({ pid: provinceID.id });
this.city = cityRes.data;
let cityID = this.city.find(item => {
return item.full_name == this.formList.city;
});
let areaRes = await this.getProvince({ pid: cityID.id });
this.area = areaRes.data;
},
async getAddTo() {
console.log(this.formList, "+++++++++++++");
const data = {
name: this.formList.name,
phone_number: this.formList.phone_number,
province: this.formList.province,
city: this.formList.city,
area: this.formList.area,
address: this.formList.address
};
console.log(data);
await Apis.getAddTo(data);
},
async formValidate() {
let validate = await this.$refs.formList.validate();
if (validate) {
return true;
} else {
return false;
}
},
handleProvince() {
let provinceID = this.province.find(item => {
return item.full_name == this.formList.province;
});
console.log(provinceID);
this.getProvince({ pid: provinceID.id }).then(res => {
this.city = res.data;
this.formList.city = "";
this.formList.area = "";
});
},
handleCity() {
let cityID = this.city.find(item => {
return item.full_name == this.formList.city;
});
this.getProvince({ pid: cityID.id }).then(res => {
this.area = res.data;
this.formList.area = "";
});
},
handleCancel() {
this.getOrderAddress();
this.$refs.formList.resetFields();
this.isDisabled = true;
},
handlePreservation() {
this.formValidate().then(res => {
if (res) {
this.$confirm("此操作将修改售后订单地址, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.getAddTo();
this.isDisabled = true;
this.$message({
type: "success",
message: "修改成功!"
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消"
});
});
} else {
return false;
}
});
}
}
};
</script>
<style lang="scss" scoped>
.template {
width: 100%;
display: flex;
}
.textarea_text {
margin: 20px 0px;
width: 400px;
display: flex;
}
.el-input__inner:not(:only-child) {
padding: 0;
}
.el-input {
width: 400px;
}
.address {
display: flex;
width: 400px;
justify-content: space-between;
}
.select_style {
width: 120px;
display: flex;
}
</style>