Vue大作战：探索不同表单元素的写入技巧！

目录

最基础的文本框：

下拉框：

下拉框变多选：

一段日期的选择：

---

今天来写一个.vue的表单哇，一起看看都有哪些元素吧。

最基础的文本框：

 <el-form-item label="输入框:">
    <el-input v-model="formLabelAlign.name"></el-input>
 </el-form-item>

下拉框：

        <el-form-item label="颜色:">
          <el-select v-model="selected_color" 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>

export default {
  data() {
    return {
      selected_color:'',

下拉框变多选：

效果图 

          <el-form-item label="标签:">
          <el-select v-model="vehicle_tags" multiple placeholder="请选择">
           <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>

export default {
  data() {
    return {
      vehicle_tags:'',

一段日期的选择：

效果图：

点击后：

 <el-form :label-position="labelPosition" label-width="80px" 
        ref="form" :model="formLabelAlign" class="custom-form">
          <el-form-item label="时间:" >  
       <el-date-picker v-model="queryform.snapTime" type="datetimerange"
        :picker-options="pickerOptions"
      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
                format="yyyy-MM-dd HH:mm:ss" value-format="yyyyMMddHHmmss" style="width: 200px;">
            </el-date-picker>
          </el-form-item>

//script部分
export default {
  data() {
    return {      
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      }, 
    };
  }
}

如果你觉得我的文章对你有帮助，能否给我点个赞，关注我呢？你们的支持将是我持续创作的动力，也是我进一步提升的动力。希望我们能够在这个技术的海洋中一起成长，共同探索更多惊喜和可能性。谢谢大家！期待你们的关注和赞同！👍❤️