el-dialog弹窗和组件的使用
记录使用el-dialog实现信息页面的 新增、修改 、查看 操作1.介绍el-dialog弹窗以及组件的使用<el-buttontype="primary"size="mini"@click="handleAdd('新增')">新增</el-button>//el-dialog弹窗里 要实现 新增、修改 、查看三个操作所以弹窗需要根据点击显示对应操作的标题<i cl
·
记录使用el-dialog实现信息页面的 新增、修改 、查看 操作
1.介绍el-dialog弹窗以及组件的使用
<el-button
type="primary"
size="mini"
@click="handleAdd('新增')">新增</el-button>
//el-dialog弹窗里 要实现 新增、修改 、查看三个操作 所以弹窗需要根据点击显示对应操作的标题
<i class="el-icon-edit" @click="handleEdit( scope.row.pid,'编辑')"></i>
<i class="el-icon-document" @click="handleEdit( scope.row.pid,'详情')"></i>
<el-dialog
:title="operationType" //设置弹窗显示的名字
v-model="dialogVisible" //设置绑定 控制打开关闭
:destroy-on-close="true" //弹窗右侧是否显示 X
:visible.sync="dialogVisible"
width="73%" //设置弹窗宽度
top="5%" //设置弹窗距离页面顶部位置
:before-close="handleClose" //点击 X 关闭弹窗方法
>
//自定义的组件页面
<good v-if="dialogVisible" :operation-type="operationType" :operation-code="operationCode" //添加 v-if="dialogVisible" 可以解决组件传参不刷新问题
@hideDialog="
hideDialog()
getUsers()" //组件页面 新增完之后 点击 提交按钮 触发hideDialog 关闭弹窗并刷新列表
/>
</el-dialog>
使用组件之前需要先声明再注册
<script>
import good from './addDs.vue' // 声明 组件
export default {
components: { // 注册 组件
good
},
data() {
return {
dialogVisible:false, //弹窗状态设置关闭
operationType:'', //标题
operationCode:'', //传参的code
}
}
methods:{
// 编辑or详情
handleEdit( pid,tt) {
this.operationType = tt;
this.operationCode = pid.toString();
//点击按钮弹窗打开
this.dialogVisible =true
},
// 新增
handleAdd(tt){
//tt接受参数
this.operationType = tt;
//点击按钮弹窗打开
this.dialogVisible =true
},
// 子组件提交传值 关闭弹窗
hideDialog() {
this.dialogVisible = false;
},
//addDs.vue页面 子组件向父传值this.$emit 关闭弹窗传参
// this.$emit('hideDialog',this.operationType);
}
2. el-dialog嵌套el-dialog会出现第二个不高亮显示问题解决方法:
给第二个el-dialog标签 添加 append-to-body
更多推荐
已为社区贡献3条内容
所有评论(0)