form的编辑与展示的切换(输入框，单选多选框，上传图片，颜色选择器)适用个人信息的展示与修改

别Null.了

已于 2022-08-01 16:10:49 修改

阅读量975

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-07-29 17:27:32 首次发布

本文链接：https://blog.youkuaiyun.com/TangJing_/article/details/126059721

这篇博客详细介绍了如何使用Vue.js的Element UI库实现可编辑的表单组件，包括输入框、单选多选框、图片上传和颜色选择器的交互功能。通过切换编辑状态来展示或隐藏默认信息和编辑内容，并提供了图片预览、上传限制以及颜色选择器的禁用和启用状态的管理。示例代码中展示了如何处理这些组件的事件，如点击编辑按钮、图片上传和删除等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示

输入框（el-input）：展示默认信息，编辑后展示所编辑内容。

单选多选框（el-select）：展示默认信息，选择后展示所选择内容。

上传图片（el-upload）：（用于展示头像）编辑时每次仅只能上传一张图片，上传完成后回显且隐藏上传框，删除图片后显示上传框。可对图片进行预览，判断上传文件的类型与大小。

颜色选择器（el-color-picker）：展示时选择器禁用，编辑状态可对选择器进行编辑。

实现代码

<template>
  <div>
    <el-button type="primary" @click="dialogFormVisible = true">可操作表单对话框</el-button>
    <el-dialog v-model="dialogFormVisible" title="用户信息">
      <el-form :model="form">
        <el-form-item label="用户姓名：" :label-width="formLabelWidth">
          <div v-if="isChange">{
  
  { form.name }}</div>
          <el-input v-if="!isChange" v-model="form.name" class="name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别：" :label-width="formLabelWidth">
          <div v-if="isChange">{
  
  { form.region }}</div>
          <el-select v-if="!isChange" v-model="form.region">
            <el-optio