Vue.js组件（5）：表单回显

🕗 发布于 2024-11-27 22:36 vue.js 前端 javascript

1 文本框回显

此组件是简单的，只需要使用v-model绑定props的值即可：

1.1 父组件

// 子组件标签与传入的数据
<project-statistics :form="project"></project-statistics>

const project = ref({
  id : 1,
  name : '测试项目',
})

1.2 子组件

定义props接收父组件传递的参数，并使用v-model与表单进行绑定。

<template>
  <div>
    <el-form :model="form" label-width="80px">
      <el-form-item label="项目ID">
        <el-input v-model="form.id" disabled></el-input>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
    </el-form>
  </div>
  回显的数据：{{ form.name }}
</template>

<script setup>
defineProps({
  form: {
    id: Number,
    name: String,
  }
})
</script>

1.3 测试

数据可以回显到表单中并且可以根据表单的内容进行变动。

2 单选按钮回显

也相对简单，只需要绑定对应的value即可。

2.1 父组件

<project-statistics :form="project"></project-statistics>

const project = ref({
  id : 1,
  name : '测试项目',
  status: 1,
})

2.2 子组件

页面显示的内容为label属性的值，value为绑定的值。

<template>
  <div>
    <el-form :model="form" label-width="80px">
      <el-form-item label="状态">
        <el-radio-group v-model="form.status">
          <el-radio label="启用" :value="1"></el-radio>
          <el-radio label="禁用" :value="0"></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
  回显的数据：{{ form.status }}
</template>

<script setup>
defineProps({
  form: {
    status: Number
  }
})
</script>

2.3 测试

3 多选框回显

因为是多选注意传入的参数为数组类型。

3.1 父组件

<project-statistics :form="project"></project-statistics>

const project = ref({
  label: [1, 3, 4]
})

3.2 子组件

<template>
  <div>
    <el-form :model="form" label-width="80px">
      <el-form-item label="标签">
        <el-checkbox-group v-model="form.label">
          <el-checkbox-button label="标签1" :value="1"></el-checkbox-button>
          <el-checkbox-button label="标签2" :value="2"></el-checkbox-button>
          <el-checkbox-button label="标签3" :value="3"></el-checkbox-button>
          <el-checkbox-button label="标签4" :value="4"></el-checkbox-button>
          <el-checkbox-button label="标签5" :value="5"></el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
  </div>
  回显的数据：{{ form.label }}
</template>

<script setup>
defineProps({
  form: {
    label: Array
  }
})
</script>

3.3 测试

4 选择器回显

4.1 单选

比较简单，传入一个值即可。

4.1.1 父组件

<project-statistics :form="project"></project-statistics>

const project = ref({
  audit: 3
})

4.1.2 子组件

<template>
  <div>
    <el-form :model="form" label-width="80px">
      <el-form-item label="审核状态">
        <el-select v-model="form.audit" placeholder="请选择">
          <el-option label="待审核" :value="1"></el-option>
          <el-option label="审核通过" :value="2"></el-option>
          <el-option label="审核不通过" :value="3"></el-option>
          <el-option label="已删除" :value="4"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
  回显的数据：{{ form.audit }}
</template>

<script setup>
defineProps({
  form: {
    audit: Number
  }
})
</script>

4.1.3 测试

4.2 多选

4.2.1 父组件

<project-statistics :form="project"></project-statistics>

const project = ref({
  label: [2,3,5]
})

4.2.2 子组件

<template>
  <div>
    <el-form :model="form" label-width="80px">
      <el-form-item label="标签">
        <el-select v-model="form.label" placeholder="请选择" multiple>
          <el-option label="标签1" :value="1"></el-option>
          <el-option label="标签2" :value="2"></el-option>
          <el-option label="标签3" :value="3"></el-option>
          <el-option label="标签4" :value="4"></el-option>
          <el-option label="标签5" :value="5"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
  回显的数据：{{ form.label }}
</template>

<script setup>
defineProps({
  form: {
    label: Array
  }
})
</script>

4.2.3 测试

4.3 级联

传入的参数为数组结构，对应级联的value值。

4.3.1 父组件

<project-statistics :form="project"></project-statistics>

const project = ref({
  area: [1,101,10101]
})

4.3.2 子组件

<template>
  <div>
    <el-form :model="form" label-width="80px">
      <el-form-item label="标签">
        <el-cascader
            v-model="form.area"
            :options="areaList"
            :props="areaProps"
        />
      </el-form-item>
    </el-form>
  </div>
  回显的数据：{{ form.area }}
</template>

<script setup>
import {ref} from "vue";

defineProps({
  form: {
    area: Array
  }
})

// 级联数据
const areaList = ref([{
  name: '北京市',
  code: 1,
  children: [
    {
      name: '北京市',
      code: 101,
      children: [
        {
          name: '丰台区',
          code: 10101,
          children: []
        }
      ]
    }
  ]
},
  {
    name: '天津市',
    code: 2,
    children: [
      {
        name: '天津市',
        code: 201,
        children: [
          {
            name: '虹桥区',
            code: 20101,
            children: []
          }
        ]
      }
    ]
  }
])

// 属性映射
const areaProps = ref({
  value: 'code',
  label: 'name',
  children: 'children'
});
</script>

4.3.3 测试

5 日期时间

5.1 日期

5.1.1 父组件

<project-statistics :form="project"></project-statistics>

const project = ref({
  date: '2024-01-01',
})

5.1.2 子组件

<template>
  <div>
    <el-form :model="form" label-width="80px">
      <el-form-item label="日期">
        <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="Pick a day"
            :size="'default'"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
    </el-form>
  </div>
  回显的数据：{{ form.date }}
</template>

<script setup>

defineProps({
  form: {
    date: String
  }
})

5.1.3 测试

5.2 日期时间

5.2.1 父组件

传入规范格式的日期时间即可回显。

<project-statistics :form="project"></project-statistics>

const project = ref({
  date: '2024-01-01T12:00:00',
})

5.2.2 子组件

<template>
  <div>
    <el-form :model="form" label-width="80px">
      <el-form-item label="日期">
        <el-date-picker
            v-model="form.date"
            type="datetime"
            placeholder="Pick a day"
            :size="'default'"
            value-format="YYYY-MM-DDTHH:mm:ss"
        />
      </el-form-item>
    </el-form>
  </div>
  回显的数据：{{ form.date }}
</template>

<script setup>
defineProps({
  form: {
    date: String
  }
})
</script>

5.2.3 测试

原文地址：https://blog.csdn.net/qq_40298351/article/details/144050993

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：算法篇：贪心算法
下一篇：企业网络安全之OPENVPN

基于spring boot的医院挂号就诊系统论文
第二点：设计有效的导航，这个包括每个页面上都有导航条的显示，有时也可以在页面的底部设计导航条，当用户进入具体页面时，要设计相应的位置提示，在页面中比较特殊的位置，需要设计返回链接，可以返回上个页面，也
阅读更多2024-11-28
【Unity踩坑】Unity中父对象是非均匀缩放时出现倾斜或剪切现象
本文解决了Unity中父对象是非均匀缩放时出现倾斜或剪切的问题
阅读更多2024-11-28
「Mac玩转仓颉内测版29」基础篇9 - 数组类型详解
本篇将介绍 Cangjie 中的数组类型，包括数组的定义、创建、访问、常见操作以及在数据管理中的应用，帮助开发者熟练掌握数组的使用。
阅读更多2024-11-28
创建mapreduce项目使用maven
创建mapreduce项目使用maven
阅读更多2024-11-28
Python开源项目周排行 2024年第16周
注:当前文章会不定期进行更新。标签： ERP PDF OCR。
阅读更多2024-11-28
使用EFK收集k8s日志
首先我们使用EFK收集Kubernetes集群中的日志，本次实验讲解的是在Kubernetes集群中启动一个Elasticsearch集群，如果企业内已经有了Elasticsearch集群，可以直接将
阅读更多2024-11-28
C#基础41-45
求n以内（不包括n）同时能被3和7整数的所有自然数之和的平方根s，并作为函数值返回，最后结果s输出到控制台。44.数组x中有n个数，求出奇数的个数cn1和偶数的个数cn2以及数组x下标为奇数的元素值的
阅读更多2024-11-28
JavaScript：遍历一个对象数组，获取每个对象中 mainKeyId 对应的值，并以这个值作为新属性的键名，给该对象添加一个新属性。
假设我们有一个对象数组，每个对象包含一个mainKeyId字段，以mainKeyId的值作为新的键名，并给它添加一个新的属性。
阅读更多2024-11-28
【AI系统】谷歌 TPU v4 与光路交换
TPU v4 通过采用 7nm 工艺，翻倍的 MXU 数量，以及显著增加的内存容量和带宽，实现了性能的大幅提升。特别引人注目的是 Sparse Core 的引入，它专门针对稀疏计算进行了优化，使得 T
阅读更多2024-11-28
SpringBoot文件上传之秒传、断点续传、分片上传
比如，在线教育平台上的视频资源上传，社交平台上的图片分享，以及企业内部的知识文档管理等。这些场景对文件上传的要求也各不相同，有的追求速度，有的注重稳定性，还有的需要考虑文件大小和安全性。这对于大文件上
阅读更多2024-11-28