vue+element-ui下拉框--下拉table

項目中有一個需求，用戶點擊下拉框，下拉列表爲一個表格，但是element裏面沒有這個組件，於是組裝一個，效果如下：

選擇後：

.vue：

<el-form-item label="請選擇用戶" prop="member" style="width: 100%;">
     <el-input
         style="width:400%;"
         placeholder="選擇用戶"
         v-model="formInline.member"      //  選擇後的結果
         :suffix-icon="showTree?'el-icon-arrow-up':'el-icon-arrow-down'"   //  input框上下箭頭
         @click.native="deptogglePanel($event)"      // table顯示隱藏
         size="medium"
         readonly="readonly"  // input只讀
     ></el-input>
     <div v-if="showTree" class="treeDiv" ref="tableList">
         <el-table 
             @row-click="handleRegionNodeClick"     // 點擊table獲取點擊行信息後及關閉table
             ref="moviesTable" 
             :data="memberList"      // table數據源
             border
             :cell-style="getCellStyle"      // table單元格樣式
             :header-cell-style="getHeaderCellStyle"      // table頭部單元格樣式
             >
             <el-table-column
                 v-for="(item, index) in Columns"    // table列數據
                 :key="index"
                 :prop="item.prop"
                 :label="item.label"
                 :show-overflow-tooltip="true"      // 超出顯示提示框
                 >
             </el-table-column>
         </el-table>
     </div>
</el-form-item>

.js：

<script type="text/ecmascript-6">
export default {
  data() {
    return {
        formInline: {
            member: '',
        },
        memberList: [],      // 用戶list
        showTree: false,
        selectTableId: '',   //  table選中行id
        Columns: [
            {
                prop: 'memberName',
                label: '用戶名'
            },
            {
                prop: 'tel',
                label: '手機號碼'
            },
            {
                prop: 'code',
                label: '編碼'
            },
        ]
    }
  },
  mounted () {
      this.getMemberList()
  },
  methods: {
      // 用戶
      getMemberList () {
          this.$get('/xxx/xxx', {page: 1, rows:10000}).then(res => {
              this.memberList = res.rows
          })
      },
      // 表格css
      getCellStyle () {
            return "text-align:center; "
      },
      getHeaderCellStyle () {
            return "background: rgba(9, 37, 56,0.1);text-align:center; background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);padding: 4px 5px;"
      },
      // 點擊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.formInline.member = data.memberName // 用戶名字
            this.showTree = false
        },
  }
}
</script>

.css：

.treeDiv{
      position:absolute;
      top:40px;
      left:-1px;
      z-index:1000;
      width: 868px;
      overflow: auto;
      max-height: 400px;
      .el-table{
          border: 1px solid #ccc;
          border-radius: 6px;
      }
      .el-table /deep/ td{
            padding: 4px 0;
      }
  }