vue使用scope插槽实现dialog窗口

<template slot-scope="scope">

<span @click="opendialog(scope.row)" style="cursor: pointer; color: #2d8cf0;">

{{scope.row.XXX}}

</span>

</template>

<el-dialog

title="详情"

:visible.sync="dialog"

width="70%"

:before-close="handleClose">

<template>

<div v-if="currentRow">

<el-form :label-position="labelPosition" label-width="100px" :model="currentRow" >

<a-col :span="8"><el-form-item label="更新日期"><el-input v-model="currentRow.update_time" style="width: 300px;" readonly></el-input></el-form-item></a-col>

</el-form>

</div>

</template>

<span slot="footer" class="dialog-footer">

<el-button @click="dialog= false">取 消</el-button>

<el-button type="primary" @click="dialog= true">确 定</el-button>

</span>

</el-dialog>

定义data:

dialog= false

methods:{

handleClose(done) {

done();

},

opendialog(row){

this.currentRow = row;

// Example: Open a drawer

this.dialog= true;

},

}

相关推荐
十九画生12 分钟前
parentID ``` JavaScript 是区分大小写的,所以这两个不是同一个字段。 第二,`parent` 没有声明。 应该先写: `
javascript
秃头网友小李16 分钟前
前端难点:keep-alive 缓存什么?RouterView 的 key 为什么要带 scopeId?
前端·vue.js
怕浪猫29 分钟前
Electron 开发实战(十六):总结与展望|生态现状、框架对比、行业趋势与学习指南
前端·javascript·electron
ZengLiangYi2 小时前
批量导入 1000 条对话的性能优化实战
javascript·后端·架构
竹林8182 小时前
用 wagmi v2 + viem 监听合约事件时踩的坑,我花了两天才把"遗漏事件"修好
javascript
小花酱酱2 小时前
QQ群里只有你一个人?邪门歪道破局之路——AstrBot
javascript
bonechips2 小时前
JS 数组指南:从内存原理到二维矩阵
前端·javascript
mONESY2 小时前
前端零基础精讲:Canvas3D、CSS3D、文档流、定位全方位复盘
javascript
徐小夕3 小时前
JitWord 3.0 正式发布,高精度Word异构解析+复杂组件兼容,打造web端协同Word编辑器
前端·vue.js·算法