<style>

</style>
<div id="{$name}">
    <input type="hidden" name="{$name}" :value="value.join(',')">
    <el-time-picker
        is-range
        v-model="value"
        size="small"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
        value-format="HH:mm"
        style="width:100%"
    >
    </el-time-picker>
</div>
<script>
    new Vue({
        el: '#{$name}',
        data: function() {
            return {
                value: ['', '']
            }
        },
        watch: {
            value: function (newVal, oldVal) {
               $('input[name={$name}]').val(newVal.join(','));
            }
        },
        created(){
            const vals = '{$val}';
            if(vals){
                const arrs = vals.split(',');
                this.value = [arrs[0],arrs[1]];
            }
        }
    })
</script>