主要是記錄淋袖，以備不時之需搅窿。
效果圖：

項目中截圖

不多說，直接上代碼廊镜。

<template>
    <ul>
        <li class="tempItem" v-for="(item,index) in tempList" :key="index"
            @click="tempItemClick(item,index)"
            :class="{'temp-active':checkArr.includes(item[options.id])}"
            :style="{'width':width}" >

            {{item[options.label]}}
            <div class="triangle">
                <span class="check"></span>
            </div>
        </li>
    </ul>
</template>

<script>
    export default {
        name: 'tempList',
        props: {
            //必傳牙肝，選項列表
            tempList: {
                type: Array,
                required: true,
                default () {
                    return []
                }
            },
            //默認寬度200px，支持百分比
            width: {
                type: String,
                default () {
                    return '200px'
                }
            },
            //是否支持多選嗤朴，默認false
            multiple: {
                type: Boolean,
                default () {
                    return false
                }
            },
            //選中項列表
            checkArr: {
                type: Array,
                default () {
                    return []
                }
            },
            //列表項鍵值對（默認顯示值-label配椭，后臺存值-id）
            options: {
                type: Object,
                default () {
                    return {
                        label: 'label',
                        id: 'id'
                    }
                }
            }
        },
        methods: {
            tempItemClick(item){
                let id = item[this.options.id];
                this.checkArr.includes(id) ? 
                this.checkArr.splice(this.checkArr.indexOf(id),1) :
                this.multiple ? this.checkArr.push(id) : this.$set(this.checkArr,0,(id));
            }
        }
    }
</script>

<style lang="scss" scoped>
    .temp-active{
        color: #2476c2 !important;
        border-color: #2476c2 !important;
        /* 三角形 */
        .triangle {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border: 11px solid #2476c2;
            border-left: 11px solid transparent;
            border-bottom: 11px solid transparent;
        }
        /* 對號 */
        .check {
            position: relative;
            display: inline-block;
            width: 25px;
            height: 25px;
            border-radius: 25px;
        }
        .check::after {
            content: "";
            position: absolute;
            left: -16px;
            top: -8px;
            width: 40%;
            height: 22%;
            border: 2px solid #fff;
            border-radius: 1px;
            border-top: none;
            border-right: none;
            background: transparent;
            transform: rotate(-45deg);
        }
    }
    .tempItem{
        position: relative;
        display: inline-block;
        // width: 200px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #DADADA;
        text-indent: 1em;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        border: 1px solid #DADADA;
        cursor: pointer;
        margin: 0 10px 10px 0;
    }
    
</style>

使用示例：

<TemplateSelect
   :options="{label:'name',id:'pkId'}"
   :tempList="formList"
   multiple
   width="20%"
   :checkArr="formData.formId"
 />
...
...
import TemplateSelect from "@/components/TemplateSelect";

checkArr最好傳入，可以直接在父組件拿值不需要子組件往上傳（vue子組件直接修改父組件屬性是會報錯的雹姊，數組不會股缸，而且也沒發(fā)現什么副作用，所以安啦）吱雏。
OK!dawanshougong敦姻！