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>

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;
        }
      });
    },
  }
}

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