vue使用Element-ui el-dialog弹出层

最新推荐文章于 2024-08-12 10:04:01 发布

aaaaaaddddsssss

最新推荐文章于 2024-08-12 10:04:01 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/aaaaaaddddsssss/article/details/113923472

版权

本文介绍了如何在Vue项目中利用Element-UI的el-dialog组件创建弹出层对话框。通过点击‘添加歌手’按钮，演示了弹出层的用法，展示了一个基本的交互流程。

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

在这里插入图片描述
点击添加歌手
弹出

<template>
  <div class="table">
    <div class="container">
      <!-- 添加歌手按钮 -->
       <div class="handle-box">
         <el-button type="primary" size="mini" @click="centerDialogVisable=true">添加歌手</el-button>
       </div>
    </div>
    <el-table size="mini" border style="100%" height="500px" :data="tableData">
        <el-table-column label="歌手图片" width="110" align="center">
           <template slot-scope="scope">
               <div class="singer-img">
               </div>
           </template>
        </el-table-column>
    </el-table>
    <!-- 弹出层 -->
    <el-dialog title="添加歌手" :visible.sync="centerDialogVisable" width="400px" center>
      <el-form :model=