vue+element table弹窗组件

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

 

文章目录

• 前言
• 一、vue+element table弹窗组件
• 二、代码展示
  • 1.表格数据展示
  • 2.弹窗组件
• 总结

 

---

前言

本人爬虫菜鸟一枚，最近公司业务要求使用vue+flask搭建一个公司使用的后台管理系统，在此做个记录。也是本人第一次写博客，多多指点。
废话不多说...直捣黄龙，在表格数据展示经常需要有编辑和查看等操作，可以使用弹窗进行操作

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue+element table弹窗组件

主要 我想记录的是 将 弹窗 做为组件，并且如果弹窗部分有请求部分的话，就到弹窗组件内部处理，相对于说解耦吧

也有子组件改变父组件传过来的 值 

二、代码展示

1 表格数据展示

效果图

代码

<template>
  <div class="feedback">
    <!-- 表格部分 -->
    <div class="table">
      <el-table :data="tableData" v-loading="loading" :header-cell-style="{background:'#eef1f6'}">
        <!-- 用户Id -->
        <el-table-column prop="UserId" label="用户Id">
          <template slot-scope="scope">
            <span>{{scope.row.UserId}}</span>
          </template>
        </el-table-column>

        <!-- 建议描述 -->
        <el-table-column prop="Advise" label="建议描述">
          <template slot-scope="scope">
            <span class="span">{{scope.row.Advise}}</span>
          </template>
        </el-table-column>

        <!-- 图片数量 -->
        <el-table-column prop="FileCounts" label="图片数量">
          <template slot-scope="scope">
            <span>{{scope.row.FileCounts}}</span>
          </template>
        </el-table-column>

        <!-- 反馈时间 -->
        <el-table-column prop="Date" label="反馈时间">
          <template slot-scope="scope">
            <span>{{scope.row.Date}}</span>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="check(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 
　　　　弹窗组件引入
　　　　dialogVisible : 表示 弹框是否显示 父组件 传 子组件的值 
　　　　dialogInfo : 表示 当前点击查看的数据 父组件 传 子组件的值
　　　　update:dialogVisible : 表示 组件 点击取消关闭确定 传过来的 是否显示弹窗 子组件 传 父组件
　　 -->
    <component-dialog :dialogVisible="dialogVisible" :dialogInfo="dialogInfo" @update:dialogVisible="dialogVisibles"></component-dialog>
    <!-- 分页部分 -->
    <div class="block">
      <el-pagination
        class="page"
        v-show="totals>pagesize? true:false"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import feed from '@/models/feedback'
import componentDialog from './dialog'

export default {
  components: {
    componentDialog
  },
  data() {
    return {
      tableData: [
        {
          UserId: 1,
          Advise: '这么火爆的基础知识相关的文章，是不是也都是大家喜欢的内容呢？我们继续往下看，我们把每种类型的文章所获得的平均赞数量或者收藏数量计算并做成一张图表看看会是什么样子',
          FileCounts: 2,
          FileUrls: ['http://94.191.56.133:9000/article/43df6f26-e068-11ea-9053-e86f38485a7e.png',
            'http://94.191.56.133:9000/article/444b9928-e068-11ea-a08f-e86f38485a7e.png'],
          Date: '2020-12-12',
        },
        {
          UserId: 2,
          Advise: 'Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持',
          FileCounts: 3,
          FileUrls: [
            'http://94.191.56.133:9000/article/448faa36-e068-11ea-93bb-e86f38485a7e.png',
            'http://94.191.56.133:9000/article/44c125ec-e068-11ea-9c81-e86f38485a7e.png',
            'http://94.191.56.133:9000/article/4507f052-e068-11ea-9eae-e86f38485a7e.png'
          ],
          Date: '2020-10-1'
        }
      ],
      // 控制弹窗 显示
      dialogVisible: false,
      // 点击查看按钮 这条数据详细信息
      dialogInfo: {},
      // 分页
      totals: 0,
      currentPage: 1,
      pagesize: 10,
      loading: false
    }
  },
  async created() {
    this.loading = true
    this.getdata(this.currentPage, this.pagesize)
    this.loading = false
  },
  methods: {
    getdata(pagenum, pagesize) {
      feed.getFeedback().then(res => {
        console.log(res)
        this.tableData = res.slice((pagenum - 1) * pagesize, pagenum * pagesize)
        this.totals = res.length
      })
    },
    check(info) {
      this.dialogVisible = true
      this.dialogInfo = info
    },
    // 子组件传过来的数据
    dialogVisibles(v) {
      this.dialogVisible = v
      console.log(v)
    },
    // 分页数据绑定
    handleSizeChange(val) {
      this.pagesize = val
      this.getdata(this.currentPage, val)
    },
    handleCurrentChange(val) {
      this.currentPage4 = val
      this.getdata(val, this.pagesize)
    },
  }
}
</script>

<style scoped>
  .block{
    margin-top: 20px;
    text-align: center;
  }
  .span{
    max-width: 30em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /*超出部分用...代替*/
  }
</style>

 

2 弹窗部分

效果图

代码

<template>
  <el-dialog :visible.sync="dialogVisible" :before-close="cancelDialog">
      <h1 class="total">用户反馈意见</h1>
      <el-form class="form">
        <el-form-item>
          <h5>反馈意见：</h5>
          <p class="advise">&nbsp;&nbsp;&nbsp;&nbsp;{{dialogInfo.Advise}}</p>
        </el-form-item>
        <el-form-item>
          <img v-for="(item,index) in dialogInfo.FileUrls" :src="item" alt="无法显示" :key="index" class="img">
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" @click="cancelDialog">确 定</el-button>
      </div>
  </el-dialog>
</template>

<script>
export default {
  // 父组件传过来的值（列表页传）
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogInfo: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {}
    },
  },
  data() {
    return {}
  },
  methods: {
  // 修改父组件传过来的值
    cancelDialog() {
      console.log(this.dialogInfo)
      this.$emit('update:dialogVisible', false)
    }
  }
}
</script>

<style scoped>
  .form{
    background: #eee;
    padding: 0 10px;
  }
  .dialog-footer{
    text-align: center;
  }
  .total{
      text-align: center;
      font-size: large;
      padding-bottom: 20px;
  }
  .img{
      width: 400px;
      height: 220px;
      padding: 10px;
      display:inline-block;
  }
</style>

---

总结

本页面使用了props实现父组件向子组件传值，$emit子组件传值父组件，也实现了表格数据分页功能(由于本页测试数据没有超过十条，分页被隐藏了)

本人刚入手vue，还不会写组件复用，各位大佬请指教