源码搜藏网

本文实例为大家分享了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"
       style="width: 100%">
   <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 = 1
let 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组件了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。