vue+element table的弹窗组件

在处理表格编辑相关的需求,是需要做一个弹框进行保存的;或者查看表格数据的详细信息时,也是需要做弹窗;

当然 ,这是类似于这样的 ,当然 element 已经帮我们做好 弹窗这一块

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

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

表格部分,也就是主要显示地方

<template>
  <div class="myComponent">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--     弹窗组件引入    dialogVisible : 表示 弹框是否显示 父组件 传 子组件的值     dialogInfo : 表示 当前点击查看的数据 父组件 传 子组件的值    update:dialogVisible : 表示 组件 点击取消关闭确定 传过来的 是否显示弹窗 子组件 传 父组件   -->
    <component-dialog :dialogVisible="dialogVisible" :dialogInfo="dialogInfo" @update:dialogVisible="dialogVisibles"></component-dialog>
  </div>
</template>

<script>
import componentDialog from "./components/dialog"; //引入组件
export default { //引入组件
  components: {
    componentDialog
  },
  name: "myComponent",
  data() {
    return {    //控制弹窗 显示
      dialogVisible: false,    //点击查看按钮  这条数据详细信息
      dialogInfo:{},    //table 的假数据
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "张小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "撸小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "鞠小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {  //点击查看 按钮  的事件
    handleClick(info) {
      console.log(info);
      this.dialogVisible = true;
      this.dialogInfo = info
    },   //子组件传 过来的 数据
    dialogVisibles(v){
        this.dialogVisible = v
        console.log(v)
    }
  }
};
</script>
<style lang=‘scss‘ scoped>
</style>

弹窗组件部分

<template>
  <el-dialog title="详细信息" :visible.sync="dialogVisible" :before-close="cancelDialog" >
    <el-form class="form">
      <el-form-item label="日期 : ">
        <p>{{dialogInfo.date}}</p>
      </el-form-item>
      <el-form-item label="姓名 : ">
        <p>{{dialogInfo.name}}</p>
      </el-form-item>
      <el-form-item label="地址 : ">
        <p>{{dialogInfo.address}}</p>
      </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,
      default: {}
    }
  },
  watch: {  //监听 弹窗显示, 可以用来写 请求接口
    dialogVisible: function(newVal, oldVal) {
      if (newVal) {
        console.log(newVal);
      }
    }
  },
  components: {},
  name: "componentDialog",
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {   //修改父组件传过来的值
    cancelDialog() {
      this.$emit("update:dialogVisible", false);
    }
  }
};
</script>
<style lang=‘scss‘ scoped>
.form{
    background: #eee;
    padding: 0 10px;
}
.dialog-footer{
    text-align: center;
}
</style>

原文地址:https://www.cnblogs.com/TreeCTJ/p/11981894.html

时间: 2024-10-07 20:24:14

vue+element table的弹窗组件的相关文章

vue+element UI实现分页组件

1.前言 在web页面中,常常需要将后台查询到的数据以表格形式展示出来,而这些数据量往往会非常庞大,如果将所有要展示的数据一次性请求获取并展示到页面上,那页面长度势必会变得非常的长,很不美观.更重要的是,如果数据量过于大,在页面加载时一次性请求全部数据将会耗费大量网络资源,性能极低.但是,如果我们可以将数据分页展示,这样页面首先不会变的冗长,另外只有用户点击页码才会发出请求并且每次请求的数据量也不会很大,这就极大的节省了网络资源,提高了性能.本文就以vue结合element UI实现一个数据分页

vue + elementui 中的弹窗组件封装成公共组件

如果一个弹窗比较简单,可以直接放在页面中,通过visible属性的true,false控制显示隐藏就可以了,我们今天要说的是将个比较复杂的弹窗组件封装成全局组件,然后可以在项目中的任何一个页面引用~~下面走起 1.首先要注册个全局组件,用下面的全局API  Vue.component('my-component', { /* ... */ }) 在js文件中首先引入这个弹窗组件,组件名称是iesPersonRadioDialog,项目中会引入一个js文件,这个js文件中在分别引入其他的js,模块

解决vue element table行列不齐问题

全局加入如下样式即可(app.vue): body .el-table th.gutter{ display: table-cell!important; } 原文地址:https://www.cnblogs.com/-llf/p/12692200.html

vue+ element table如何给指定的单元格添加点击事件

<el-table @row-click="openDetails">  </el-table> //对应的 methods 中 //点击行事件  methods: {  openDetails (row) {  //具体操作  },   原文地址:https://www.cnblogs.com/sylys/p/12313823.html

Vue列表组件与弹窗组件示例

列表组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content=

Vue. 之 Element table 高度自适应

Vue. 之 Element table 高度自适应 使用vue创建table后,其高度自适应浏览器高度. 在创建的 el-table 中添加:height属性,其值为一个变量(tableHeight) 1 <el-table 2 :data="tableData" 3 :height="tableHeight" 4 border 5 style="width: 100%"> 在script中的data() 中添加高度的定义: 这里的

Vue+Element实现网页版个人简历系统

这篇文章介绍一个使用Vue+Element实现的个人简历系统,主要用到的技术有:vue.element.css3.css定位. 作者在window10进行开发,目前只在chrome上进行过测试,没有大的毛病.但是还有很多小功能还不完善,代码也未进行优化,后续会继续完善功能,优化代码. 声明:项目相对来说就是一个纯静态页面,代码都比较简单,大佬可闭眼绕过,或者看一眼留下宝贵意见也可 一.项目介绍 本项目是一个网页版的个人简历系统,主要使用的技术为vue2+element进行实现. 个人简历系统主要

Vue Element+Node.js开发企业通用管理后台系统

第1章 课程介绍介绍项目背景.达到的目标.技术栈和功能演示 第2章 课程分析课程分析 第3章 Vue进阶(上)对Vue的进阶知识进行讲解,包括$emit和$on.directive指令.组件化.Vue插件等相关内容. 第4章 Vue进阶(下)对Vue的进阶知识进行讲解,包括组件通信.过滤器.监听器.Vue2.6重要新特性等相关内容. 第5章 Element-UI入门对Element-UI的内容进行讲解,包括如何搭建Element-UI使用环境,如何使用插件快速集成Element-UI,并通过el

Vue学习笔记入门篇——组件的使用

本文为转载,原文:Vue学习笔记入门篇--组件的使用 组件定义 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件使用 注册 注册一个全局组件,你可以使用 Vue.component(tagName, options).组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用.