需求是修改列表页面里面弹框弹出来的值
1. 先创建弹框
父组件 主要
dialogVisibleedit ，systemlistedit ， systemlist 都是传给子组件的参数
dialogVisibleedits 是与子组件绑定的值 绑定的是子组件里面的操作状态
<emergencyedit
:dialogVisibleedit="dialogVisibleedit"
:systemlistedit="systemlistedit"
:systemlist="systemlist"
@update:dialogVisibleedit="dialogVisibleedits"
></emergencyedit>
import emergencyedit from "./environmentedit";
components: { emergencyedit },
methods：{
dialogVisibleedits(v) {
this.dialogVisibleedit = v;
// console.log(v);
},
}
子组件 主要
<template>
<el-dialog
title="环安知识库-编辑"
:visible.sync="dialogVisibleedit"
:before-close="cancelDialogedit"
class="dialog"
> </el-dialog>
</template>
1. 用props 接收 父组件的数据 标注好类型
2.
export default {
props: {
dialogVisibleedit: {
type: Boolean,
default: false,
},
systemlistedit: {
type: Object,
default: false,
},
systemlist: {
type: Array,
},
},
watch: {
dialogVisibleedit: function (newVal, oldVal) {
if (newVal) {
// console.log(newVal);
}
},
systemlistedit(newVal, oldVal) {
if (newVal) {
this.enedit = newVal;
// console.log(this.enedit);
let objf = {
name: this.enedit.attachedName,
url: this.enedit.attachedUrl,
};
let objv = {
name: this.enedit.videoName,
url: this.enedit.videoUrl,
};
this.failse = [objf];
this.failsev = [objv];
}
},
systemlist(newVal, oldVal) {
this.systemlistadd = newVal;
},
},
}
methods: {
cancelDialogedit() {
this.$emit("update:dialogVisibleedit", false);
},
},
cancelDialogedit 这个方法用来把关闭状态传到父组件去 实现绑定
<template>
<el-dialog
title="环安知识库-编辑"
:visible.sync="dialogVisibleedit"
:before-close="cancelDialogedit"
class="dialog"
>
<el-form ref="form">
<div class="dialog-add">
<div class="dialog-main-son">
<el-row :gutter="20">
<el-col :span="12">
<div class="dialog-main-son-title">编号</div>
<div class="dialog-main-son-content">
<el-input
v-model="enedit.kbNo"
placeholder="请输入内容"
></el-input>
</div>
</el-col>
<el-col :span="12">
<div class="dialog-main-son-title">问题描述</div>
<div class="dialog-main-son-content">
<el-input
v-model="enedit.description"
placeholder="请输入内容"
></el-input>
</div>
</el-col>
</el-row>
</div>
<div class="dialog-main-son">
<div class="dialog-main-son">
<el-row :gutter="20">
<el-col :span="12">
<div class="dialog-main-son-title">事件类型</div>
<div class="dialog-main-son-content">
<el-select v-model="enedit.matterType" placeholder="请选择">
<el-option
v-for="item in knclass"
:key="item.calssvalue"
:label="item.classtext"
:value="item.classtext"
>
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="12">
<div class="dialog-main-son-title">适用系统</div>
<div class="dialog-main-son-content">
<el-select
v-model="enedit.systemId"
@change="changesystem"
placeholder="请选择"
>
<el-option
v-for="item in systemlistadd"
:key="item.id"
:label="item.systemName"
:value="item.id"
>
</el-option>
</el-select>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="dialog-main-son">
<div class="dialog-main-son">
<el-row :gutter="20">
<el-col :span="12">
<div class="dialog-main-son-title">使用设备</div>
<div class="dialog-main-son-content">
<el-select
v-model="enedit.applyDevice"
placeholder="请选择"
@change="equipmentchange"
>
<el-option
v-for="item in equipment"
:key="item.id"
:label="item.deviceName"
:value="item.id"
>
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="12">
<div class="dialog-main-son-title">附件上传</div>
<div class="dialog-main-son-content">
<el-upload
class="upload-demo"
action="http://192.168.65.71:8090/common/upload"
:on-success="filesuccess"
:on-error="fileerror"
:on-remove="fileremove"
:before-remove="beforefile"
:limit="1"
:file-list="failse"
>
<div class="updatabotton-parent">
<el-button
class="updatabotton"
size="small"
type="primary"
v-show="fileupdata"
>点击上传</el-button
>
</div>
</el-upload>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="dialog-main-son">
<div class="dialog-main-son">
<el-row :gutter="20">
<el-col :span="12">
<div class="dialog-main-son-title">视频上传</div>
<div class="dialog-main-son-content">
<el-upload
class="upload-demo"
action="http://192.168.65.71:8090/common/upload"
:on-success="vediosuccess"
:on-error="vedioerror"
:on-remove="vedioremove"
:before-remove="beforevedio"
:limit="1"
:file-list="failsev"
>
<div class="updatabotton-parent">
<el-button
class="updatabotton"
size="small"
type="primary"
v-show="vedioupdata"
>点击上传</el-button
>
</div>
</el-upload>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
<div class="kno-bottom">
<el-form-item>
<el-button clkno-bottomass="complete" @click="complete"
>完成</el-button
>
</el-form-item>
</div>
</el-form>
</el-dialog>
</template>