实践自定义弹框列表数据 slot 操作数据

最新推荐文章于 2023-08-28 20:14:25 发布

paidaboluo

最新推荐文章于 2023-08-28 20:14:25 发布

阅读量319

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/paidaboluo/article/details/126510124

版权

本文介绍了如何在Vue.js项目中利用ElementUI的弹框组件和JavaScript实现一个可复用的列表弹框。通过具名插槽和数据绑定，实现了弹框内的内容自定义，并展示了如何通过ref调用组件方法来开关弹框、操作分页和更新列表数据。

摘要由CSDN通过智能技术生成

最近在项目中需要实现一个列表弹框，需要复用，自定义内容大致内容一致，如图

其中的按钮操作也是只需要当前条数据的id

所以想到了可以实现一个简单的组件控制，所有的数据展示即可

首先弹框使用了 ele 的弹框组件和分页控件

  <el-dialog class="crudDialog" :close-on-click-modal="false" :visible.sync="isOpen" width="800px" append-to-body>
    <template slot="title">
      <span>跟踪记录</span>
      <el-button class="titBtn" size="mini" type="primary">添加</el-button>
    </template>

    <template slot="footer">
      <el-pagination
        :current-page="