jili2/application/admin/view/common/multiple-optgroup-select.html

<style>
    .el-select-group__wrap:not(:last-of-type)::after {
        content: '';
        position: absolute;
        display: none;
        left: 20px;
        right: 20px;
        bottom: 0px !important;
        height: 0px !important;
        background: #e4e7ed;
    }
    .el-select-group__wrap:not(:last-of-type){
        padding-bottom: 0px !important;
    }
</style>
<div id="{$name}">
    <input type="hidden" name="{$name}" :value="value.join(',')">
    <el-select v-model="value" filterable clearable multiple placeholder="请选择" size="small"
               style="width:100%">
        <el-option-group
                v-for="group in options"
                :key="group.label"
                :label="group.label">
            <el-option
                    v-for="item in group.options"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id.toString()">
            </el-option>
        </el-option-group>
    </el-select>
    {if $msg}
    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> {$msg}</span>
    {/if}
</div>
<script>
    new Vue({
        el: '#{$name}',
        data: function() {
            return {
                options: {:json_encode($lists)},
                value: {:json_encode($val)}
        }
        },
        watch: {
            value: function (newVal, oldVal) {
                $('input[name={$name}]').val(newVal.join(','));
            }
        },
        created(){
            const vals = this.value;
            this.value = [];
            vals.forEach((item) => {
                this.value.push(item.toString());
        })
            console.log('11111',this.value);
        }
    })
</script>