admin 管理员组

文章数量: 1087131

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-paginationstyle="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>

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.rowsthis.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 = truedocument.addEventListener('click', this.tableHideList, false)},tableHide() {this.showTree = falsedocument.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.idthis.showTree = falsethis.$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;}});},}
}

<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>

本文标签： Vue实现下拉表格组件

版权声明：本文标题：Vue实现下拉表格组件 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1699243380a338406.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。