Vue实现下拉表格组件
作者:阳光的男夹克
这篇文章主要为大家详细介绍了Vue实现下拉表格组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。