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中。

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组件了。

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