• 后台管理-----搜索框重置


    1.之前想的方案是准备采用数据的双向绑定来实现的

    2.因为双向绑定无非本质上就是一个语法糖,既然是一个语法糖,完全可以写成一个

    :model-value,这个时候就不是去formData 里面取值了,因为最终这个值是page-Search 传给了hy-form ,又传给了到了这个上面来(:model-value),将传过来的值绑定到(

    :modle-value 上),直接从modeValue 取出我们的属性绑定这个上面去。

    只是在这里做了一个值绑定,把modeValue 里面的值绑定到el-input 上面

     也就是我们现在直接是把最新的值直接绑定到这个上面去的

    1. <div class="hy-from">
    2. <div class="header">
    3. <slot name="header">slot>
    4. div>
    5. <el-form label-witdh="labelWhidth">
    6. <el-row>
    7. <template v-for="item in formItems" :key="item.label">
    8. <el-col v-bind="collayout">
    9. <el-form-item :label="item.label" :style="itemStyle">
    10. <template v-if="item.type==='input'|| item.type==='password'">
    11. <el-input
    12. :placeholder="item.placeholder"
    13. :show-password="item.type==='password'"
    14. :model-value="modelValue[`${item.field}`]"
    15. />
    16. template>
    17. <template v-else-if="item.type==='select'">
    18. <el-select
    19. :placeholder="item.placeholder"
    20. :model-value="modelValue[`${item.field}`]">
    21. <el-option v-for="option in item.options"
    22. :key="option.value"
    23. :value="optionvalue">
    24. {{option.title}}el-option>
    25. el-select>
    26. template>
    27. <template v-else-if="item.type==='datepicker'">
    28. <el-date-picker v-bind="item.otherOptions"
    29. :model-value="modelValue[`${item.field}`]">
    30. el-date-picker>
    31. template>
    32. el-form-item>
    33. el-col>
    34. template>
    35. el-row>
    36. el-form>
    37. <div class="footer">
    38. <slot name="footer">slot>
    39. div>
    40. div>

     3.第三步:就是把传进来的modelValue 的值,赋值到这个每一个搜索框中,如果这里的值改变,就会调用,@update:modleValue ,就是说会触发这么一个事件。

    1. //$event: 拿到内部这里传过来的值
    2. //item.field 当前的字段
    3. @uptade:modelValue="handleValueChange($event,item.field)"
    1. <div class="hy-from">
    2. <div class="header">
    3. <slot name="header">slot>
    4. div>
    5. <el-form label-witdh="labelWhidth">
    6. <el-row>
    7. <template v-for="item in formItems" :key="item.label">
    8. <el-col v-bind="collayout">
    9. <el-form-item :label="item.label" :style="itemStyle">
    10. <template v-if="item.type==='input'|| item.type==='password'">
    11. <el-input
    12. :placeholder="item.placeholder"
    13. :show-password="item.type==='password'"
    14. :model-value="modelValue[`${item.field}`]"
    15. @update:modelValue="handleValueChange($event,item.field)"
    16. />
    17. template>
    18. <template v-else-if="item.type==='select'">
    19. <el-select
    20. :placeholder="item.placeholder"
    21. :model-value="modelValue[`${item.field}`]"
    22. @update:modelValue="handleValueChange($event,item.field)"
    23. >
    24. <el-option v-for="option in item.options"
    25. :key="option.value"
    26. :value="optionvalue">
    27. {{option.title}}el-option>
    28. el-select>
    29. template>
    30. <template v-else-if="item.type==='datepicker'">
    31. <el-date-picker v-bind="item.otherOptions"
    32. :model-value="modelValue[`${item.field}`]"
    33. @update:modelValue="handleValueChange($event,item.field)"
    34. >
    35. el-date-picker>
    36. template>
    37. el-form-item>
    38. el-col>
    39. template>
    40. el-row>
    41. el-form>
    42. <div class="footer">
    43. <slot name="footer">slot>
    44. div>
    45. div>

    第4步:一旦上面的值发生改变的时候,就会执行下面这个函数

    1. //方案2:
    2. //拿到最新的值和 field 了
    3. const handleValueChange=(value:any,field:string)=>{
    4. //一旦值改变就把这个事件给发出去,顺变把这个大的对象给传出去
    5. emit('update:modelValue',{...props.modelValue,[field]:value}) //使用field 作为key,在把value 给传过去
    6. }

    第5步:发出去以后,在外界(父组件)就绑定到这里面去了

    第6步:点击重置把formData 里面赋的值 在设置回原始的对象formOrignData

    1. //优化2:当我们的用户点击了重置的时候:就是把formData 里面赋的值 在设置回原始的对象formOrignData
    2. const handleResetClick=()=>{
    3. //方式2:
    4. formData.value=formOrignData
    5. // 方式1: //当我们点击重置的时候拿到了所有formOrginData 里面的key
    6. // for(const key in formOrignData){
    7. // //通过这个key 去取到它所有的值,直接去修改fromDta 里面里面的某些属性
    8. // formData.value[`${key}`]=formOrignData[key]
    9. // }
    10. }
  • 相关阅读:
    科创人·优锘科技COO孙岗:错误问题找不到正确答案,求索万物可视的大美未来
    OkHttp原理 一篇文章就够了
    Redis之分布式锁
    ssm基于大数据的智能公交平台的设计与实现毕业设计源码261620
    X-VLM: Multi-Grained Vision Language Pre-Training
    使用脚本获取系统信息
    Android学习笔记 1.2.5 Gradle插件和java、application等插件 && 1.2.6 依赖管理
    Docker安装MySQL详细步骤
    cubemx stm32 lu90614模块 人体温度检测模块 可以替代温枪 驱动代码
    Java中long(Long)与int(Integer)之间的转换
  • 原文地址:https://blog.csdn.net/weixin_51614564/article/details/126494703