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;

},

}

相关推荐
漂流瓶jz17 分钟前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
鱼樱前端1 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
q_19132846951 小时前
基于Springboot+Vue的办公管理系统
java·vue.js·spring boot·后端·intellij idea
coding随想2 小时前
JavaScript中的原始值包装类型:让基本类型也能“变身”对象
开发语言·javascript·ecmascript
满分观测网友z2 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js
BillKu2 小时前
Vue3 + TypeSrcipt 防抖、防止重复点击实例
前端·javascript·vue.js
鱼樱前端2 小时前
Vue3结合three和babylonjs实现3D数字展厅效果
前端·vue.js
Themberfue2 小时前
Vue ⑥-路由
前端·javascript·vue.js
whatever who cares2 小时前
React hook之useRef
前端·javascript·react.js