elementui带日期范围的日期选择器组件和输入框通过el-form布局在同一行
时间: 2024-02-24 17:53:08 浏览: 24
可以使用 ElementUI 提供的 `el-form-item` 组件来将日期选择器组件和输入框放在同一行布局。具体实现方法如下:
```html
<template>
<el-form :model="form" label-width="80px">
<el-form-item label="日期范围">
<el-date-picker
v-model="form.dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
></el-date-picker>
</el-form-item>
<el-form-item label="输入框">
<el-input v-model="form.input"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
dateRange: '',
input: ''
},
pickerOptions: {
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])
}
}
]
}
}
}
}
</script>
```
在上面的示例中,我们使用了 `el-form-item` 组件将日期选择器组件和输入框放在同一行布局,并设置了 `label` 属性来显示表单项的标题。同时,我们还可以通过 `label-width` 属性来设置表单项标题的宽度,以达到更好的布局效果。