本文实例为大家分享了Vue实现下拉表格组件的具体代码，供大家参考，具体内容如下
<template>
<div>
<div class="select-table">
<el-form ref="verification" label-width="80px" :model="selectData" :rules="rules">
<el-form-item label="姓名" prop="userName">
<el-input @change="changeTab" v-model="selectData.userName" placeholder="选择用户" :suffix-icon="showTree?'el-icon-arrow-up':'el-icon-arrow-down'" @click.native="deptogglePanel($event)"></el-input>
</el-form-item>
</el-form>
</div>
<div v-if="showTree" class="treeDiv" ref="tableList">
<div style="display: flex;align-items: center;margin-bottom: 10px">
<span style="font-size: 14px;color: #606266;margin: 0 10px">姓名</span>
<el-input style="width: 200px" clearable v-model="formData.userName" size="small" placeholder="请输入姓名"></el-input>
<span style="font-size: 14px;color: #606266;margin: 0 10px">职务</span>
<el-input style="width: 200px" clearable v-model="formData.position" size="small" placeholder="请输入职务"></el-input>
<el-button style="margin-left: 10px" size="small" type="primary" plain @click="getTableData">查询</el-button>
</div>
<el-table @row-click="handleRegionNodeClick" :data="tableData" border stripe ref="tableView" size="small" height='200px' highlight-current-row :header-cell-style="{background:'#ECF5FF',color:'#606266',fontWeight:'bold'}">
<el-table-column prop="userName" label="姓名" header-align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="position" label="职位" align="center"></el-table-column>
<el-table-column prop="orgName" label="标段" align="center"></el-table-column>
</el-table>
<el-pagination
style="width: calc(100% - 10px); bottom: 10px;background: rgb(236, 245, 255);"
@size-change="dolNandleSizeChange"
@current-change="dolHandleCurrentChange"
:current-page="formData.page"
:page-sizes="[15, 30, 50, 100]"
:page-size="formData.rows"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>
JS
export default {
name: "selectTable",
data() {
return {
total: 0,
//表单验证
rules: {
userName: [{ required: true, message: "姓名不能为空", trigger: "blur" }]
},
tableData:[],
formData:{
userName:"",
position:"",
rows: 15,
page: 1,
},
queryInfo:{},
showTree: false,
selectData:{
userName:''
}
}
},
mounted() {
this.getTableData()
},
methods: {
// 获取查询数据
getTableData() {
this.$axios.get('/api/smartbs/userPower/selectPersonList',{params:this.formData}).then((res) => {
if (res.data.success) {
this.tableData = res.data.data.rows
this.total = res.data.data.total
}
})
},
// 点击input 阻止冒泡 控制table显示隐藏
deptogglePanel (event) {
event || (event = window.event)
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true)
this.showTree ? this.tableHide() : this.tableShow()
},
tableShow() {
this.showTree = true
document.addEventListener('click', this.tableHideList, false)
},
tableHide() {
this.showTree = false
document.addEventListener('click', this.tableHideList, false)
},
tableHideList(e) {
if (this.$refs.tableList&& !this.$refs.tableList.contains(e.target)) {
this.tableHide()
}
},
// 点击table节点
handleRegionNodeClick (data) {
this.selectTableId = data.id
this.showTree = false
this.$refs.verification.resetFields();
this.selectData.userName = data.userName // 用户名字
this.$emit('getUserName',this.selectData.userName)
},
dolNandleSizeChange(val) {
this.formData.rows = val;
this.formData.page = 1;
this.getTableData()
},
dolHandleCurrentChange(val) {
this.formData.page = val;
this.getTableData()
},
// 手动输入
changeTab(val) {
this.$emit('getUserName',val)
},
// 表单验证
submitForm() {
this.$refs.verification.validate((valid) => {
if (valid) {
return valid
} else {
return false;
}
});
},
}
}
CSS
<style scoped lang="less">
.select-table {
position: relative;
}
.treeDiv{
width: 100%;
margin-left: 80px;
position:absolute;
top: 50px;
z-index: 999;
background-color: #FFFFFF;
border: 1px solid #e5e5e5;
border-radius: 4px;
padding: 10px;
.el-table{
border: 1px solid #ccc;
border-radius: 6px;
}
.el-table /deep/ td{
padding: 4px 0;
}
}
</style>