- N +

如何获取v-model绑定的值----实现查询功能

原标题:如何获取v-model绑定的值----实现查询功能

导读:

获取element封装好的picker(日期选择器)、select(下拉框)、input中选中的value值,点击查询之后发送请求到后台获取相应的数据:HTML代码如下(表格代...

文章目录 [+]

获取element封装好的picker(日期选择器)、select(下拉框)、input中选中的value值,点击查询之后发送请求到后台获取相应的数据:

HTML代码如下(表格代码没粘贴上来):

<div>
   日期: <el-date-picker v-model="createDate" type="datetime"  value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" @change="startTimeStatus">
    </el-date-picker>
    至
    <el-date-picker v-model="overDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" @change="endTimeStatus">
    </el-date-picker>
    <el-select v-model="objType"  placeholder="请选择" @change="colorStatus">
        <el-option v-for="item in colorWarning" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
    <el-select v-model="dataType1"  placeholder="请选择" @change="sourceStatus">
        <el-option v-for="item in dataSources" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
    <el-select v-model="dataType2"  placeholder="请选择" @change="waterGasStatus">
        <el-option v-for="item in waterGas" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
    <button style="width: 80px;height: 36px;background-color: #00bf84;border-radius: 4px;color:#fff;font-size: 16px;" @click="queryData">查询</button>
</div>

页面效果如图:

snipaste_20181213_152357.jpg

需要现在data里面声明v-model绑定的值,代码如下:

data:function() {
    return {
       // select选择器下拉框
       redAlert:[],// 红色预警
        colorWarning:[{
            value:' ',
            label:'请选择'
            },{
            value:'3',
            label:'红色预警'
            },{
            value:'2',
            label:'黄色预警'
            }],
        dataSources:[{
            value:' ',
            label:'请选择'
        },{
            value:'1',
            label:'在线数据'
        },{
            value:'2',
            label:'自行检测数据'
        }],
        waterGas: [{
            value:' ',
            label:'请选择'
        },{
            value:'1',
            label:'水'
        },{
            value:'2',
            label:'气'
        }],
        // 开始时间
        createDate: '',
        // 结束时间
        overDate:'',
        // 预警类型
        objType:'0',
        // 数据来源
        dataType1:'0',
        // 是什么导致的
        dataType2:''
    };
},

给picker(日期选择器)、select(下拉框)、input一个@change事件,获取到v-model的value值,代码如下:

// startTimeStatus与上面HTML代码中的@change="startTimeStatus"名称一样
// 时间开始选择器
startTimeStatus:function(value){
    // console.log(value)
    this.createDate = value
    console.log(this.createDate)
},
// 时间结束选择器
endTimeStatus:function(value){
    this.overDate = value
    console.log(this.overDate)
},
// 预警选择器
colorStatus:function(e){
    // console.log(e)
    this.objType = e
    console.log(this.objType)
},
// 数据来源选择器
sourceStatus:function(value){
    // console.log(value)
    this.dataType1 = value
    console.log(this.dataType1)
},
waterGasStatus:function(value){
    console.log(value)
    this.dataType2 = value
    console.log(this.dataType2)
},

写完以上代码后,发送请求,获取数据

//queryData为查询按钮上的点击事件 @click="queryData",然后把参数传入后台
// 查询数据
queryData:function(){
    // this.init --> 已封装好的ajax请求函数
   this.init(this.currentPage,this.objType,this.dataType1,this.dataType2,this.createDate,this.overDate)
},


有好的文章希望我们帮助分享和推广,猛戳这里我要投稿

2

0
返回列表
上一篇:
下一篇:

发表评论中国互联网举报中心

快捷回复:

验证码

    评论列表 (暂无评论,共1875人参与)参与讨论

    还没有评论,来说两句吧...