Vue 手写下拉列表

原生的下拉列表要修改成所需的样式，往往都挺麻烦的...（此处省略200字）

效果图
选项太长，滚动

此处的三角形图标使用的是vant的字体图标，可自行修改...
css单位为自定义的rem()，可自行修改为px/em/rem...

<template>
    <div>
        <div @click="hideArr">
            <ul class="con_ul">
                <li v-for="(testArr,t) in testArrs" :key=t @click.stop="selLi=t">
                    <span>{{testArr.title}}</span>
                    <van-icon name="play" :class="[selLi==t?'play_ani':'']" />
                    <ul class="con_small" v-if="selLi==t">
                        <li v-for="(con,c) in testArr.cons" :key=c @click.stop="option(t,c)">
                            {{con}}
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                selLi: -1,
                testArrs: [{
                    title: '人数',
                    cons: ['10人以下', '10~20人', '20~30人', '30~50人', '50人以上']
                }, {
                    title: '年龄',
                    cons: ['5岁以下', '5~10岁', '10~20岁', '20岁以上']
                }, {
                    title: '行业领域',
                    cons: ['金融', '地产', '工程', '建筑', '服装', '机械', '食品', '环保', '餐饮', '科研机构', '互联网', '其他']
                }],
            }
        },
        methods: {
            hideArr() {
                this.selLi = -1;
            },
            option(t, c) {
                this.selLi = -1;
                this.testArrs[t].title = this.testArrs[t].cons[c];
            },
        }
    }
</script>

<style scoped lang='scss'>
@import "../assets/css/reset.scss";
.con_ul {
    background: white;
    padding: rem(20);
    &>li {
        background: rgba(245, 245, 245, 1);
        border-radius: rem(3);
        line-height: rem(36);
        height: rem(36);
        position: relative;
        margin-bottom: rem(10);
        display: flex;
        justify-content: space-between;
        padding-left: rem(15);
    }
    span {
        color: #333333;
        font-size: rem(14);
    }
    .van-icon {
        transform: rotate(90deg);
        padding: rem(15);
        transform-origin: center center;
        color: #C2C2C2;
    }
    .play_ani {
        transform: rotate(-90deg);
        transform-origin: center center;
        margin-right: rem(7);
    }
    .con_small {
        background: white;
        position: absolute;
        right: 0;
        z-index: 9;
        padding: 0 rem(15);
        box-shadow: 0px 1px rem(8) 0px rgba(22, 42, 73, 0.12);
        border-radius: rem(3);
        margin-top: rem(36);
        max-height: rem(250);
        overflow: auto;
        li {
            width: rem(115);
            line-height: rem(43);
            text-align: right;
            background: white;
            border-bottom: 1px solid #EBEBEB;
        }
    }
}
</style>