vue中DatePicker 日期选择器的使用,当后台传参有开始时间和结束时间,可以使用watch监听器,实现效果
vue中日期选择器一下选取2个数据,而后台传参数需要传2个开始时间和结束时间,所以可以使用watch监听器进行<template><div><el-form ref="searchForm" :model="searchForm" label-width="100px"><el-form-item label="文章状态:"><el-radio
·
vue中日期选择器一下选取2个数据,而后台传参数需要传2个开始时间和结束时间,所以可以使用watch监听器进行
<template>
<div>
<el-form ref="searchForm" :model="searchForm" label-width="100px">
<el-form-item label="文章状态:">
<el-radio v-model="searchForm.status" label>全部</el-radio>
<el-radio v-model="searchForm.status" :label="0">草稿</el-radio>
<el-radio v-model="searchForm.status" :label="1">待审核</el-radio>
<el-radio v-model="searchForm.status" :label="2">审核通过</el-radio>
<el-radio v-model="searchForm.status" :label="3">审核失败</el-radio>
</el-form-item>
<el-form-item label="频道列表:">
<el-select v-model="searchForm.channel_id" placeholder="请选择频道">
<el-option
v-for="item in channelList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-form-item>
<el-form-item label="时间选择:">
<el-date-picker
v-model="timetotime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Article",
data() {
return {
timetotime: "", //一个临时的接收时间的成员
searchForm: {
beginTime: "", //开始时间
endTime: "", //结束时间
status: "", //""-全部,0-草稿,1-待审核,2-审核通过,3-审核失败
channel_id: "" //频道id
},
channelList:[],//频道列表
};
},
watch: {
// 被检测的成员:function(newV,oldV){
//newV:数据变化后的样子,oldV:数据变化前的样子
// }
//被检查成员一般就是data成员
timetotime: function(newV) {
//把接收到的时间信息一分为二的给beginTime和endTime
if (newV) {
this.searchForm.beginTime = newV[0];
this.searchForm.endTime = newV[1];
} else {
//清空时间
this.searchForm.beginTime = "";
this.searchForm.endTime = "";
}
}
},
created(){
this.getChannelList()
},
methods:{
//获取频道列表的数据
getChannelList(){
let pro = this.$http({
url:"/mp/v1_0/channels",
methods:"get"
})
pro
.then(data =>{
// console.log(data);
this.channelList = data.data.channels
})
.catch(err =>{
return this.$message.error("或的频道失败:" + err)
})
}
}
};
</script>
<style lang="less" scoped>
</style>
效果如下图所示:
更多推荐
已为社区贡献9条内容
所有评论(0)