element关闭弹窗前做一些事

最新推荐文章于 2025-10-18 22:18:18 发布

原创最新推荐文章于 2025-10-18 22:18:18 发布 · 444 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

JS 同时被 2 个专栏收录

3 篇文章

订阅专栏

vue学习

1 篇文章

订阅专栏

这篇博客记录了一个使用Vue.js实现的科目阶段弹窗组件，包含一个可选中节点的树形结构。在关闭弹窗前，`onBeforeClose`方法会被调用，它通过`done`函数控制Dialog的关闭。用户可以通过点击确认或取消按钮来选择或关闭弹窗，同时`handleCheckChange`处理节点的勾选变化。

写了个小方法，可惜没用要删了，记录下

html部分：

   <!-- 科目阶段弹窗 -->
    <el-dialog 
    :visible.sync="dialogShowTree" 
    :title="title"  
    width="40%"  
    :before-close="onBeforeClose"		//关闭前的回调，会暂停 Dialog 的关闭
    >          
        <el-tree
            ref="tree"
            :data="subjectOptions"
            show-checkbox
            node-key="click"
            :default-expand-all =true
            @check="(click, checked)=>{handleCheckChange(click, checked)}"
            :props="defaultProps">
        </el-tree>
        <div class="footerCenter">
            <el-button type="primary" @click="treeSubmit()">确认</el-button>
            <el-button @click="treeLast()">取消</el-button>
        </div>
    </el-dialog>

js部分：

       //关闭科目阶段弹窗前
       onBeforeClose(done){
           //...
           return done();//function(done)，done 用于关闭 Dialog
       },