Vue实现下拉表格组件 Vue实现下拉表格组件

本文实例为大家分享了Vue实现下拉表格组件的具体代码，供大家参考，具体内容如下

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 = https://www.it610.com/article/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; }}); },}}

CSS

.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; }}

【Vue实现下拉表格组件】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。