Vue基于Element-ui怎么实现表格弹窗组件

本篇内容主要讲解“Vue基于Element-ui怎么实现表格弹窗组件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue基于Element-ui怎么实现表格弹窗组件”吧!

效果图

使用方式

acTable1 () {  this.$modalTable({    title: "表格一",    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 弄'    }],    tableColumn: [      {        prop: "date",        label: "日期",        width: "180"      },      {        prop: "name",        label: "姓名",      },      {        prop: "address",        label: "地址",      }    ]  })},acTable2 () {  this.$modalTable({    title: "表格二",    tableData: [],    tableColumn: [      {        prop: "date",        label: "日期",        width: "180"      },      {        prop: "name",        label: "姓名",      },      {        prop: "address",        label: "地址",      }    ]  })},acTable3 () {  this.$modalTable({    title: "表格三",    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 弄'    }],    tableColumn: [      {        prop: "name",        label: "姓名",      },      {        prop: "date",        label: "日期",      },      {        prop: "address",        label: "地址",      }    ]  })},

1、创建modalTable.vue文件

将变量放在data中，正常开发即可，后续会通过别的方式将数据传入组件data中。

<template>  <el-dialog ref="dialog"             :title="title"             :visible.sync="visible"             width="30%"             :before-close="beforeClose">    <el-table :data="tableData"              >      <el-table-column v-for="(item,index) in tableColumn"                       :key="index"                       :prop="item.prop"                       :label="item.label"                       :width="item.width">      </el-table-column>    </el-table>    <span slot="footer"          class="dialog-footer">      <el-button @click="closeDialog">关闭</el-button>    </span>  </el-dialog></template><script>export default {  data () {    return {      visible: false,      vmId: 0,      title: "标题",      tableData: [],      tableColumn: []    };  },  methods: {    beforeClose (done) {      this.visible = false      // 从DOM里将这个组件移除        // visible只是控制了显示与隐藏  但是dom结构中还是存在组件  为了避免消耗内存必须销毁组件      // setTimeout(() => {      //   console.log("this.$el.parentnode", this.$el.parentNode)      //   console.log("this.$el", this.$el)      //   this.$el.parentNode.removeChild(this.$el)      // }, 500)      setTimeout(() => {        if (typeof this.onClose === "function") {          this.onClose(this.vmId)          done()        }      }, 500);    },    closeDialog () {      this.$refs.dialog.handleClose()    }  }};</script><style lang="less" scoped></style>

2、创建modalTable.js文件

在组件中没有props接收参数，那么如何给modalTable组件传参，这就需要一个modalTable.js 文件去管理modalTable.vue组件。

import Vue from "vue";const constructor = Vue.extend(require('./modalTable.vue').default)let nId = 1let instances = []const ModalTable = (options) => {  let id = 'table-' + nId++;  options = options || {};  console.log("options", options);  // 重点：绑定关闭事件  options.onClose = function (vmId) {    ModalTable.close(vmId)  }  // 实列化  const instance = new constructor({    //重点：在这里将你传过来的参数匹配到modalTable.vue组件的data    data: {      ...options,      vmId: id    }  })  console.log("instance", instance);  instance.id = id;  instance.$mount(); // 挂载但是并未插入dom，是一个完整的Vue实例  document.body.appendChild(instance.$el) // 将dom插入body  instance.visible = true //这里修改modalTable.vue数据中的visible,这样modalTable组件就显示出来  instances.push(instance)  return instance};ModalTable.close = function (vmId) {  console.log("vmId", vmId)  instances.forEach((instance, index) => {    if (instance.id == vmId) {      document.body.removeChild(instances[index].$el)      instances.splice(index, 1)    }  })}ModalTable.closeAll = function () {  for (let i = instances.length - 1; i >= 0; i--) {    instances[i].close()  }}export default ModalTable;

3、在main.js文件中挂载vue原型链

import ModalTable from './components/modalTable/modalTable.js'Vue.prototype.$modalTable = ModalTable;

4、使用

最后就可以如上文的使用方法，通过原型链调用ModalTable组件了。

到此，相信大家对“Vue基于Element-ui怎么实现表格弹窗组件”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！