element ui 表单操作

element ui 表单操作

1.日期选择器

例子:

   <el-date-picker
      v-model="dateRange"
      size="small"
      style="width: 240px"
      value-format="yyyy-MM-dd"
      type="daterange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    ></el-date-picker>

   设置默认日期:dateRange: [this.getNowTime(new Date() - 86400000 *10), this.getNowTime(new Date())],
    getNowTime(temp) {
        var now = new Date(temp);
        var year = now.getFullYear();     //得到年份
        var month = now.getMonth() + 1; //得到月份
        var date = now.getDate();         //得到日期
        month = month.toString().padStart(2, "0");
        date = date.toString().padStart(2, "0");
        return `${year}-${month}-${date}`;
      },

2.复选框和单选框

3.下拉选择框

<el-form-item label="类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择类型(支出/收入/收款/付款/转账)">
                <el-option
                  v-for="dict in typeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
</el-form-item>
//设置默认值   
 created() {
    // 如果你想设置一个默认值，可以在组件创建时赋值
    this.form.selectedOption = this.options[0].value; // 设置默认选中第一个选项
  },

按钮

 
  <el-form-item label="是否默认">
          <el-radio-group v-model="form.isDefault">
            <el-radio
              v-for="dict in isDefaultOptions"
              :key="dict.dictValue"
              :label="parseInt(dict.dictValue)"
            >{{dict.dictLabel}}</el-radio>
          </el-radio-group>
  </el-form-item>

js:

this.getDicts("isDefault").then(response => {
  console.log("11111111"+response.data);
  this.isDefaultOptions = response.data;

});