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"
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组件了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。