vue下拉框组件,vue实现下拉列表
这篇文章主要为大家详细介绍了某视频剪辑软件实现下拉表格组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现下拉表格组件的具体代码，供大家参考，具体内容如下
模板
差异
div class=select-table
El-form ref= verification label-width= 80px :model= select data :rules= rules
El-表单-项目标签=姓名prop=用户名
El-input @ change= change tab v-model= select data。用户名 placeholder=选择用户：suffix-icon=showTree？El-icon-arrow-up : El-icon-arrow-down @ click。native= deptogglePanel($ event)/El-input
/El-表单-项目
/el格式
/div
div v-if= show tree class= treeDiv ref= table list
div style= display:flex；对齐-项目：居中；下边距：10px
span style=font-size: 14px .颜色：# 606266;边距：0 10px 姓名/span
El-input style= width:200 px clearable v-model= formdata。用户名 size= small placeholder=请输入姓名/el-input
span style=font-size: 14px .颜色：# 606266;边距：0 10px 职务/span
El-input style= width:200 px clearable v-model= formdata。position size= small placeholder=请输入职务/el-input
El-button style= margin-left:10px size= small type= primary plain @ click= gettable data 查询/el-button
/div
El-table @ row-click= handleRegionNodeClick :data= table data border stripe ref= table view size= small height= 200 px highlight-current-row:header-cell-style= { background: # ECF 5 ff ，color:#606266 ，fontWeight:bold}
埃尔-表格-列属性=用户名标签=姓名header-align=居中显示-溢出-工具提示/El-表格-列
埃尔-表格-列prop=position label=职位align= center /El-表格-列
El-table-column prop= orgName label=标段align= center /El-表格-列
/el-table
埃尔分页
style= width:calc(100%-10px)；底部：10px 背景：rgb(236，245，255)；
@ size-change= dondlesizechange
@ current-change= dolphandlecurrentchange
:current-page=formData.page
:page-size=[15，30，50，100]
:page-size=formData.rows
布局=总计，大小，上一页，分页，下一页，跳转
:total=total
/El-分页
/div
/div
/模板
射流研究…
导出默认值{
名称：选择表格，
data() {
返回{
总计：0,
//表单验证
规则：{
用户名：[{必填：真，消息： 姓名不能为空，触发器：模糊 }]
},
表数据：[],
表单数据：{
用户名：,
位置：,
行数：15,
第一页，
},
queryInfo:{}，
展示树：假的，
选择数据：{
用户名：""
}
}
},
已安装(){
this.getTableData()
},
方法：{
//获取查询数据
getTableData() {
这个100美元axios。get(/API/smartbs/user power/select person list ，{params:this.formData}).然后((res)={
if (res.data.success) {
这个。tabledata=RES . data。数据。行
this.total=资源数据数据总计
}
})
},
//点击投入阻止冒泡控制桌子显示隐藏
deptogglePanel(事件){
事件(事件=窗口.事件)
事件。停止传播？事件。停止传播():(事件。取消气泡=真)
这个。showTree？这个。table hide():this。表格显示()
},
tableShow() {
this.showTree=true
文档。addevent侦听器( click ，this.tableHideList，false)
},
tableHide() {
this.showTree=false
文档。addevent侦听器( click ，this.tableHideList，false)
},
tableHideList(e) {
如果（这个. refs.tableList！这个参考文献。表列表。包含(目标)){
this.tableHide()
}
},
//点击桌子节点
handleRegionNodeClick(数据){
this.selectTableId=data.id
this.showTree=false
这个参考文献。验证。resetfields()；
this.selectData。用户名=数据。用户名//用户名字
这个发出( getUserName ，this.selectData.userName)
},
dolNandleSizeChange(val) {
这个。表单数据。rows=val
这个。表单数据。page=1；
this.getTableData()
},
dolphandlecurrentchange(val){
这个。表单数据。page=val
this.getTableData()
},
//手动输入
变更标签(瓦尔){
这个emit(getUserName ，val)
},
//表单验证
submitForm() {
这个refs.verification.validate(有效)={
如果（有效){
返回有效
}否则{
返回错误的
}
});
},
}
}
半铸钢钢性铸铁(铸造半钢)
样式范围语言=少。选择-表格{
位置：相对；
}。treeDiv{
宽度：100%;
左边距：80px
位置：绝对；
顶配：50px
z指数：999;
背景色：# FFFFFF
边框：1px纯色# e5e5e5
边框-半径：4px
填充：10px。埃尔表{
边框：1px纯色# ccc
边框-半径：6px
}。埃尔-表/深/深{
填充：4px 0；
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。