详细讲解Element UI 中丰富的表单控件（图文解析）

前言

Element UI 一个基于 Vue.js 2.0 的桌面端组件库，提供许多常用的 UI 组件

该博客主要讲解如何使用 Element UI 创建各种表单控件，包括文本框、文本域、下拉框、单选框、复选框、日期控件、图片上传、文件上传和富文本控件

1. 文本框、文本域

文本框比较简易，也是用得比较多的一个控件
就是没有type： <el-input v-model="formData.description" placeholder="请输入描述" />

如果是文本域，则如下：

示例代码如下

<template>
  <el-form :model="formData" ref="form">
    <el-form-item label="描述" prop="description">
      <el-input type="textarea" v-model="formData.description" placeholder="请输入描述" />
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        description: ''
      }
    };
  }
};
</script>

主要的属性如下：

• v-model：绑定输入值
• type：设置为 textarea 以启用多行输入

如图所示：

2. 下拉框 (Select)

用于从预定义的选项中选择一个值

通过 el-select 和 el-option 组件实现

<template>
  <el-form :model="formData" ref="form">
    <el-form-item label="箱型" prop="boxType">
      <el-select v-model="formData.boxType" placeholder="请选择箱型">
        <el-option label="类型1" value="type1"></el-option>
        <el-option label="类型2" value="type2"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        boxType: ''
      }
    };
  }
};
</script>

主要属性和方法

• v-model：绑定选中的值
• placeholder：输入框为空时的占位文本
• el-option 的 label 和 value：分别表示选项的显示文本和实际值

实战中的代码示例如下：

<el-form-item label="预约类型" prop="appointmentType">
  <el-select v-model="formData.appointmentType" :disabled="formType === 'detail'" placeholder="请选择预约类型">
    <el-option
      v-for="dict in getStrDictOptions(DICT_TYPE.DANGEROUS_APPOINTMENT_TYPE)"
      :key="dict.value"
      :label="dict.label"
      :value="dict.value"
    />
  </el-select>
</el-form-item>

可以通过字典的形式进行存储

3. 单选框 (Radio)

用于从一组选项中选择一个值

通过 el-radio 和 el-radio-group 组件实现

<template>
  <el-form :model="formData" ref="form">
    <el-form-item label="性别" prop="gender">
      <el-radio-group v-model="formData.gender">
        <el-radio label="male">男</el-radio>
        <el-radio label="female">女</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        gender: ''
      }
    };
  }
};
</script>

主要属性和方法：

• v-model：绑定选中的值
• el-radio 的 label：单选框的值

4. 复选框 (Checkbox)

用于从一组选项中选择多个值

通过 el-checkbox 和 el-checkbox-group 组件实现

<template>
  <el-form :model="formData" ref="form">
    <el-form-item label="职位" prop="hobbies">
      <el-checkbox-group v-model="formData.hobbies">
        <el-checkbox label="reading">吗喽1</el-checkbox>
        <el-checkbox label="sports">吗喽2</el-checkbox>
        <el-checkbox label="music">吗喽3</el-checkbox>
      </el-checkbox-group>
    </el-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        hobbies: []
      }
    };
  }
};
</script>

主要属性和方法：

• v-model：绑定选中的值
• el-checkbox 的 label：复选框的值

5. 日期控件 (Date Picker)

用于选择日期或日期范围

通过 el-date-picker 组件实现

<template>
  <el-form :model="formData" ref="form">
    <el-form-item label="日期" prop="date">
      <el-date-picker v-model="formData.date" type="date" placeholder="请选择日期"></el-date-picker>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        date: ''
      }
    };
  }
};
</script>

主要属性和方法：

• v-model：绑定选中的日期
• type：设置日期选择器类型，如 date、daterange、datetime 等
• placeholder：输入框为空时的占位文本

对于这个日期原先写过一个组件，推荐阅读：【ElementUI】详细分析DatePicker 日期选择器

截图如下：

6. 图片上传 (Image Upload)

<template>
  <el-form :model="formData" ref="form">
    <el-form-item label="上传图片" prop="image">
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        v-model="formData.image">
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        image: []
      }
    };
  },
  methods: {
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    }
  }
};
</script>

主要属性和方法：

• action：上传的地址
• list-type：文件列表的类型，可选值为 text、picture 和 picture-card
• on-preview：点击文件列表中已上传的文件时的钩子
• on-remove：文件列表移除文件时的钩子

7. 文件上传 (File Upload)

通过 el-upload 组件实现

<template>
  <el-form :model="formData" ref="form">
    <el-form-item label="上传文件" prop="file">
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        v-model="formData.file">
        <el-button type="primary">点击上传</el-button>
      </el-upload>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        file: []
      }
    };
  },
  methods: {
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    }
  }
};
</script>

主要属性和方法

• action：上传的地址
• on-preview：点击文件列表中已上传的文件时的钩子
• on-remove：文件列表移除文件时的钩子

8. 富文本控件 (Rich Text Editor)

用于编辑和格式化文本内容

通过第三方库如 vue-quill-editor 实现：npm install vue-quill-editor

<template>
  <el-form :model="formData" ref="form">
    <el-form-item label="内容" prop="content">
      <quill-editor v-model="formData.content" ref="quillEditor"></quill-editor>
    </el-form-item>
  </el-form>
</template>

<script>
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      formData: {
        content: ''
      }
    };
  }
};
</script>

主要属性和方法：

• v-model：绑定编辑器内容
• quillEditor：富文本编辑器组件

这个控件比较丰富，我使用的是Editor

<el-form-item label="货物描述" prop="descriptionGoods">
  <Editor v-model="formData.descriptionGoods" height="150px" />
</el-form-item>

截图如下：