在element对话框中使用地图插件时,会出现首次不会加载成功,这时使用$nextTick初始化地图插件即可
代码如下
<template>
<div class="app-container">
<el-row>
<el-col :span="24">
<el-button type="primary" size="small" @click="new_data">新增</el-button>
</el-col>
</el-row>
<el-dialog
title="新增"
:visible.sync="centerDialogVisible"
width="50%"
center>
<div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
<el-form-item label="分公司名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="联系方式" prop="phone">
<el-input v-model="ruleForm.phone"></el-input>
</el-form-item>
<el-form-item label="打卡地址" prop="addr">
<el-input v-model.number="ruleForm.addr"></el-input>
</el-form-item>
<div id="my_container"></div>
<el-form-item label="上班时间" prop="start_work_time">
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.start_work_time"></el-time-picker>
</el-form-item>
<el-form-item label="下班时间" prop="end_work_time">
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.end_work_time"></el-time-picker>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="resetForm('ruleForm')">取 消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
// 导入地图需要使用的插件
import AMap from 'AMap'
import store from '@/store'
import Vue from 'vue'
import { GetAjax, PostAjax, PatchAjax, DeleteAjax } from '@/api/myapi'
import datetime from 'date-and-time'
export default {
name: "company_manage",
data () {
return {
centerDialogVisible: false,
centerDialogVisible_two: false,
centerDialogVisible_patch: false,
page_datas: [],
ruleForm: {
name: '',
phone: '',
addr: '',
long: '',
lat: '',
start_work_time: '',
end_work_time: '',
},
rules: {
name: [
{ required: true, message: '请输入分公司名称', trigger: 'blur' }
],
phone: [
{ required: true, message: '请输入联系方式', trigger: 'blur' }
],
addr: [
{ required: true, message: '请输入打卡地址', trigger: 'blur' }
],
start_work_time: [
{ required: true, message: '请选择上班时间', trigger: 'change' }
],
end_work_time: [
{ required: true, message: '请选择下班时间', trigger: 'change' }
],
},
delete_data: {},
page_tatol: 100,
search: '',
keyword: '',
my_pagination: {
page: 1,
page_size: 10,
search: '',
},
}
},
methods: {
// 初始化地图插件的方法
init() {
var map = new AMap.Map('my_container',{
resizeEnable: true,
zoom: 18,
// center: [121.542282,29.831995]
})
AMap.plugin('AMap.Geolocation',function(){ //异步加载插件
var geolocation = new AMap.Geolocation()
map.addControl(geolocation)
})
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if(formName == 'ruleForm') {
console.log(datetime.format(this.ruleForm.start_work_time,"hh:mm"))
console.log(this.ruleForm)
} else{
console.log(this.ruleForm_patch)
}
} else {
console.log('error submit!!')
return false;
}
})
},
resetForm(formName) {
console.log(formName)
this.centerDialogVisible = false
this.$refs[formName].resetFields()
this.centerDialogVisible_patch = false
},
new_data() {
this.centerDialogVisible =true
// 在这里使用$nextTick初始化地图插件即可
this.$nextTick(() => {
this.init()
});
},
},
created: function() {
}
}
</script>
<style scoped>
#my_container{
margin-left: 110px;
height: 300px;
width: calc(100% - 110px);
}
</style>