element ui弹窗组件,vue element ui文档
这篇文章主要为大家详细介绍了某视频剪辑软件基于元素-用户界面实现表格弹窗组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件基于元素-用户界面实现表格弹窗组件的具体代码，供大家参考，具体内容如下
效果图
使用方式
acTable1 () {
这个. modalTable({
标题： 表格一，
表数据：[{
日期："2016年5月2日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1518 弄
}, {
日期："2016年5月四日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1517 弄
}, {
日期："2016年5月一日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1519 弄
}, {
日期："2016年5月3日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1516 弄
}],
表列：[
{
道具："日期",
标签: 日期，
宽度："180"
},
{
道具："名称",
标签: 姓名，
},
{
属性："地址",
标签: 地址，
}
]
})
},
acTable2 () {
这个. modalTable({
标题： 表格二，
表数据：[],
表列：[
{
道具："日期",
标签: 日期，
宽度："180"
},
{
道具："名称",
标签: 姓名，
},
{
属性："地址",
标签: 地址，
}
]
})
},
acTable3 () {
这个. modalTable({
标题： 表格三，
表数据：[{
日期："2016年5月2日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1518 弄
}, {
日期："2016年5月四日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1517 弄
}, {
日期："2016年5月一日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1519 弄
}, {
日期："2016年5月3日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1516 弄
}],
表列：[
{
道具："名称",
标签: 姓名，
},
{
道具："日期",
标签: 日期，
},
{
属性："地址",
标签: 地址，
}
]
})
},
1、创建modalTable.vue文件
将变量放在数据中，正常开发即可，后续会通过别的方式将数据传入组件数据中。
模板
el-dialog ref=dialog
:title=title
:visible.sync=visible
宽度=30%
:before-close=beforeClose
el-table :data=tableData
style=宽度：100%
el-table-column v-for=(item，index) in tableColumn
:key=index
:prop=item.prop
:label=item.label
:width=item.width
/El-表格-列
/el-table
span slot=页脚
class=对话框页脚
el-button @click=closeDialog 关闭/el-button
/span
/el-dialog
/模板
脚本
导出默认值{
data () {
返回{
可见：假，
vmId: 0，
标题： 标题，
表数据：[],
表列：[]
};
},
方法：{
关闭前（完成){
this.visible=false
//从数字正射影像图里将这个组件移除
//可见只是控制了显示与隐藏但是数字正射影像图结构中还是存在组件为了避免消耗内存必须销毁组件
//setTimeout(()={
//console.log(this .$el.parentNode ，这个. el.parentNode)
//console.log(this .$el，这个100万美元)
//这个100美元。父节点。移除孩子(这一个.$el)
//}, 500)
setTimeout(()={
如果(这种类型。onclose=== function ){
这个。onClose(这个。vmId)
完成()
}
}, 500);
},
closeDialog () {
这个. refs.dialog.handleClose()
}
}
};
/脚本
style lang=less 范围
/风格
2、创建modalTable.js文件
在组件中没有小道具接收参数，那么如何给模式表组件传参，这就需要一个modalTable.js文件去管理modalTable.vue组件。
从“Vue”导入Vue
const构造函数=vue。扩展(要求(./模态表。vue’).默认)
设nId=1
let instances=[]
const ModalTable=(options)={
let id= table- nId；
options=options { }；
console.log(选项，选项);
//重点：绑定关闭事件
选项。onclose=函数(vmId){
ModalTable.close(vmId)
}
//实列化
常量实例=新构造函数({
//重点：在这里将你传过来的参数匹配到modalTable.vue组件的数据
数据：{
.选项，
vmId: id
}
})
console.log(instance ，实例);
instance.id=id
实例. mount()；//挂载但是并未插入多姆，是一个完整的某视频剪辑软件实例
document.body.appendChild(实例. el) //将数字正射影像图插入身体
instance.visible=true //这里修改modalTable.vue数据中的可见的，这样模式表组件就显示出来
实例.推送(实例)
返回实例
};
模态表。close=function(vmId){
console.log(vmId ，vmId)
instances.forEach(实例，索引)={
if (instance.id==vmId) {
文档。身体。移除子实例[索引].$el)
实例.拼接(索引，1)
}
})
}
模态表。close all=function(){
对于(设I=实例。长度-1；I=0；我- ) {
实例[我].关闭()
}
}
导出默认模式表
3、在main.js文件中挂载vue原型链
从""导入模式表./组件/模态表/模态表。js
vue。原型。$模态表=模态表；
4、使用
最后就可以如上文的使用方法，通过原型链调用模式表组件了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。