elementUI自定义组件--单(多)选

主要是记录，以备不时之需。
效果图：

不多说，直接上代码。

<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子组件直接修改父组件属性是会报错的，数组不会，而且也没发现什么副作用，所以安啦）。
OK!dawanshougong！