element-plus 时间日期选择器 el-date-picker value-format 无效等

vue3.0 配合  element-plus  在使用时间日期选择时， value-format 无法设置选中值的解决办法，以及一些零零散散的坑

完整代码：

<!-- HTML部分 -->
<el-date-picker
    v-model="ruleForm.f_xdsj_time"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    @change="timeFn1"
    :default-time="defaultTime"
    format="YYYY-MM-DD"
    class="elDatePicker"
    :clearable="false"
>
</el-date-picker>

/*-- js逻辑部分 --*/

//格式化--时间
function timeStr(dataStr){
    var date = new Date(dataStr);
    var y = date.getFullYear();

    var m = date.getMonth() + 1;
    m = m < 10 ? ('0' + m) : m;

    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;

    var h = date.getHours();
    h = h < 10 ? ('0' + h) : h;

    //获得分
    var mm = date.getMinutes()
    mm = mm < 10 ? ('0' + mm) : mm;

    //获得秒
    var ss = date.getSeconds()
    ss = ss < 10 ? ('0' + ss) : ss;

    // console.log(y+'-'+m+'-'+d+' '+h+':'+mm+':'+ss)

    return y+'-'+m+'-'+d+' '+h+':'+mm+':'+ss
}

//用户选定值以后触发
const timeFn1 = (data)=>{
    console.log(data)
    if(data == null){
        //如果data等于null 则表示用户点击了 时间选择器的清空按钮，因为 清空按钮没有回调函数说以用这个方法来解决
    }else{
        //如果data不等于null 就可以把data的值复给 想要的变量
        ruleForm.XX_begin = timeStr(ruleForm.f_xdsj_time[0])
        ruleForm.XX_end = timeStr(ruleForm.f_xdsj_time[1])
    }
}

//给出默认值--如果需要设置默认的 时分秒 可以用这个方法，修改 后面3位就行，这种写法不是用来添加默认值的。
const defaultTime = [
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59)
]