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;

},

}

相关推荐
GIS程序媛—椰子16 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
ZL不懂前端25 分钟前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x28 分钟前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据1 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS医院管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea
理想不理想v2 小时前
vue经典前端面试题
前端·javascript·vue.js