vue+elementUI 组件弹窗

最新推荐文章于 2024-10-09 18:12:15 发布

小白_0615

最新推荐文章于 2024-10-09 18:12:15 发布

阅读量6.3k

点赞数 3

分类专栏：基础文章标签： vue elementUI 组件弹窗

本文链接：https://blog.csdn.net/qq_42897782/article/details/115405047

版权

需求：点击按钮，弹窗（这里的弹窗使用外部组件）

效果图：

页面中：

“查看详情”点击触发 examineBtn() 方法，

<template>
    <div>
        <div style="height: 73vh">
            <el-table :data="showData"
                      style="width: 100%"
                      :header-cell-style="headClass">
                <el-table-column type="index"
                                 label="编号"
                                 width="80"
                                 header-align="center"
                                 align="center"></el-table-column>
                <el-table-column prop="name"
                                 label="企业名称"
                                 width="180"
                                 header-align="center"
                                 align="center"></el-table-column>
                <el-table-column prop="duration"
                                 label="时长"
                                 width="80"
                                 header-align="center"
                                 align="center"></el-table-column>
                <el-table-column prop="address"
                                 label="广告位置"
                                 header-align="center"
                                 align="center"></el-table-column>
                <el-table-column prop="companyStatus"
                                 label="订单状态"
                                 width="100"
                                 header-align="center"
                                 align="center">
                    <template scope="scope">
                        <span v-if="scope.row.companyStatus == 1"
                              style="color: #1ec6df"