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;

},

}

相关推荐
I_Am_Me_29 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ40 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴1 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple1 小时前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript