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;
});