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;

},

}

相关推荐
你的人类朋友2 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程3 小时前
纯前端做图片压缩
开发语言·前端·javascript
银色的白3 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
萌萌哒草头将军4 小时前
🚀🚀🚀什么?浏览器也能修改项目源文件了?Chrome 团队开源的超强 Vite 插件!🚀🚀🚀
vue.js·react.js·vite
islandzzzz4 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
Senar4 小时前
网页中如何判断用户是否处于闲置状态
前端·javascript
很甜的西瓜5 小时前
typescript软渲染实现类似canvas的2d矢量图形引擎
前端·javascript·typescript·图形渲染·canvas
阿芯爱编程6 小时前
最长和谐子序列,滑动窗口
前端·javascript·面试
烛阴6 小时前
开发者神器:如何在浏览器控制台玩转第三方库,让调试效率翻倍!
前端·javascript
拉不动的猪7 小时前
JQ常规面试题
前端·javascript·面试