elment 自定义下拉框（下拉选项为表格demo）

<template>
    <div>

        <!-- <el-form-item label="请选择用户" prop="member" style="width: 100%;"> -->
        <el-input class="input" placeholder="请选择车辆" v-model="mySelectValuer" @click.native="deptogglePanel($event)" size="medium" readonly>
            <i slot="suffix" class="el-input__icon el-icon-circle-close close" v-if="mySelectValue" @click.stop="clear"></i>
            <i slot="suffix" :class="showTree && !mySelectValue?'el-icon-arrow-up':'el-icon-arrow-down'" class="show" v-else></i>

        </el-input>
        <div v-if="showTree" class="treeDiv" ref="tableList">
            <el-table @row-click="handleRegionNodeClick" ref="moviesTable" :data="list" border :cell-style="getCellStyle" style="width: 300px" :header-cell-style="getHeaderCellStyle" height="200px">
                <el-table-column v-for="(item, index) in Columns" :key="index" :prop="item.prop" :label="item.label" :show-overflow-tooltip="true" width="100px">
                </el-table-column>
            </el-table>
        </div>
        <!-- </el-form-item> -->
    </div>
</template>

<script >
export default {
    props: {
 //Columns: [
               // {
                 //   prop: "vinNumber", //table的prop
                 //   label: "车架号", //table 的label
               // },
              //  {
                   // prop: "vehicleNumber",
                   // label: "车牌号",
               // },
               // {
                  //  prop: "vehicleModel",
                  //  label: "车辆型号",
                //},
           // ],
        Columns: {
            type: Array,
            default: () => [],
        },
        list: {
            type: Array,
            default: () => [], //table列表
        },
        mySelectValue: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            showTree: false,
            selectTableId: "", //  table选中行id
        }
    },
    computed: {
        mySelectValuer() {
            return this.$props.mySelectValue
        },
    },
    mounted() {},
    methods: {
        clear() {
            this.$emit("clerbel")
        },

        // 表格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.showTree = false
            this.$emit("select", data)
        },
    },
}
</script>


<style lang="less" scope>
.treeDiv {
    position: absolute;
    top: 60px;
    left: -1px;
    z-index: 1000;
    width: 300px;
    overflow: auto;
    max-height: 400px;

    .el-table {
        border: 1px solid #ccc;
        border-radius: 6px;
    }
    .el-table /deep/ td {
        padding: 4px 0;
    }
}
.input {
    position: relative;
}
.el-input__suffix {
    cursor: pointer;
}
input {
    cursor: pointer;
}
.show {
    position: absolute;
    right: 0;
    top: 8px;
}
.input:hover {
    .show {
        // display: none;

        right: 0;
        // z-index: -1;
    }
    .close {
        display: block;
        z-index: 99;
    }
}
</style>

父组件：

  <MySelect :Columns="Columns" :list="carList" :mySelectValue="editForm.mySelectValue" @select="selectCar" @clerbel="clerbel"></MySelect>