<template>
<div>
<span class="addressTitle"></span>
<el-button type="primary" class="addNew" @click="addNew"></el-button>
<div class="card">
<el-card class="box-card" v-for="item of addressList">
<div slot="header" class="clearfix">
<span>{{item.id}}</span>
<el-button style="float: right; padding: 3px 0" type="text"></el-button>
<el-button style="float: right; padding: 3px 0" type="text"></el-button>
</div>
<div class="text item">
{{item.name}}, {{item.tel}}
<br>
{{item.address}}
</div>
</el-card>
</div>
<el-dialog
:visible.sync="dialogFormVisible"
:before-close="cancelAddaddress"
title=""
width="450px"
>
<el-form :model="addeidtAddress" :rules="rules" ref="addeidtAddress" :label-position="labelPosition" label-width="80px" :inline="true">
<el-form-item label=" " prop="name">
<el-input v-model="addeidtAddress.name"></el-input>
</el-form-item>
<el-form-item label="" prop="tel">
<el-input v-model="addeidtAddress.tel"></el-input>
</el-form-item>
<el-form-item label="" prop="address">
<el-input v-model="addeidtAddress.address"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelAddAddress"> </el-button>
<el-button type="primary" @click="sureAddAddress"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
var checkTel = (rule, value, callback) => {
if (!value) {
return callback(new Error(""));
} else {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
if (reg.test(value)) {
callback();
} else {
return callback(new Error(""));
}
}
}
return {
dialogFormVisible: false,
labelPosition: "right",
addressList: [{
id: "1",
name: "",
tel: "13012345678",
address: ""
},{
id: "2",
name: "",
tel: "13212345678",
address: ""
}],
addeidtAddress: {
name: "",
tel: "",
address: ""
},
rules: {
name: [
{ required: true, message: "", trigger: "blur" },
{ max: 10, message: " 10", trigger: "blur" }
],
tel: [
{ required: true, message: "", trigger: "blur" },
{ validator: checkTel, trigger: "blur"},
],
address: [
{ required: true, message: "", trigger: "blur" }
]
}
}
},
methods: {
addNew () {
this.dialogFormVisible = true
},
cancelAddaddress () {
this.dialogFormVisible = false
},
sureAddAddress () {
this.dialogFormVisible = false
}
}
}
</script>
what"s wrong? I really don"t know