vue自定义表格组件,vue自定义表单
这篇文章主要为大家详细介绍了某视频剪辑软件实现自定义表格工具扩展，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件自定义表格工具扩展的具体代码，供大家参考，具体内容如下
工具组件
模板
div class=right-btn
el-row
埃尔-工具提示
效果=黑暗
:content=showSearch？隐藏搜索 : 显示搜索
placement=top
埃尔按钮
size=mini
圆
icon=el-icon-search
@click=toggleSearch()
/
/工具提示
埃尔-工具提示
效果=黑暗
内容=刷新
placement=top
埃尔按钮
size=mini
圆
icon=el-icon-refresh
@click=refresh()
/
/El-工具提示
埃尔-工具提示
效果=黑暗
内容=显隐列
placement=top
v-if=columns
埃尔按钮
size=mini
圆
图标=el图标菜单
@click=showColumn()
/
/El-工具提示
/el-row
//显隐列对话框
埃尔对话
:title=title
:visible.sync=open
附加到正文
埃尔传输
:title=[显示, 隐藏]
v-model=值
：数据="列"
@change=changeData
/el-transfer
/el-dialog
/div
/模板
脚本
导出默认值{
名称："右侧工具栏",
data () {
返回{
值：[],//显隐数据
标题： 显示/隐藏, //弹出层标题
open: false，//弹出层显示状态
}
},
道具：{
showSearch: {
类型：布尔型，
默认值：真
},
列：{
类型：数组
}
},
已创建(){
//显隐列初始默认隐藏列
对于(让项目在此栏中){
if (this.columns[item].visible===false) {
this.value.push(parseInt(item))
}
}
}
方法：{
//搜索
toggleSeach () {
这个. emit(update:showSeach ，这个。显示搜索)；
},
//刷新
刷新(){
这个. emit(查询表)；
},
//打开显隐列对话框
showColumn (){
this.open=true
},
//右侧列表元素变化
变更数据(数据){
对于(这个。列中的定义变量项目){
const key=this.columns[item].关键；
this.columns[item].可见=!数据包括(键);
}
}
}
}
/脚本
在主页。射流研究…全局注册工具组件
从" @/组件/右工具栏"导入右侧工具栏；
//全局组件挂载
Vue.component(RightToolbar ，右工具栏)；
其他页面引入工具组件
模板
div class=索引
El-form v-show= showSearch /El-form
右侧工具栏
:showSearch.sync=showSearch
@queryTable=getList
：列="列"
右侧工具栏
埃尔表
埃尔-表格-列标签=用户编号v-if=columns[0].可见/El-表格-列
埃尔-表格-列标签=用户名称v-if=columns[1].可见/El-表格-列
埃尔-表格-列标签=用户昵称v-if=columns[2].可见
/El-表格-列
/el-table
/div
/模板
脚本
导出默认值{
data () {
返回{
//显示搜索条件
显示搜索：没错，
//列信息
列：[
{密钥：0,标签: 用户编号，visible: true}，
{密钥：1,标签: 用户名称，visible: true}，
{密钥：2,标签: 用户昵称，可见：真}
//.
]
}
},
已创建(){
这个。getlist()；
},
//查询
getList () {
//调用接口
}
}
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。