el-date-picker搜索框输入值获取
时间: 2023-11-21 18:58:02 浏览: 95
要获取el-date-picker搜索框输入的值,可以通过v-model来实现。具体步骤如下:
1. 在data中定义一个变量,用于存储搜索框输入的值,例如searchValue。
2. 在el-date-picker中添加一个输入框,通过v-model绑定searchValue变量。
3. 在搜索按钮的点击事件中,可以通过this.searchValue获取到搜索框输入的值。
下面是一个示例代码:
```html
<template>
<div>
<el-date-picker
v-model="queryInfo.time"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
<el-input
slot="picker"
v-model="searchValue"
placeholder="请输入搜索内容"
@keyup.enter.native="search"
></el-input>
</el-date-picker>
<el-button type="primary" @click="search">搜索</el-button>
</div>
</template>
<script>
export default {
data() {
return {
queryInfo: {
time: [],
},
pickerOptions: {
disabledDate(v) {
// 日期禁止选择今天以前的日期
return v.getTime() < new Date().getTime() - 86400000;
},
},
searchValue: "",
};
},
methods: {
search() {
console.log(this.searchValue);
// 在这里可以进行搜索操作
},
},
};
</script>
```
阅读全文