本篇内容主要讲解“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怎么实现表格弹窗组件”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
