vue表格查询 select选择器

最新推荐文章于 2023-12-18 10:51:44 发布

Joyce0519

最新推荐文章于 2023-12-18 10:51:44 发布

阅读量423

点赞数

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/Joyce0519/article/details/120087669

版权

本文介绍了如何使用Vue.js结合ElementUI组件库，实现动态表格的查询功能，并通过Select选择器进行数据筛选。详细讲解了相关组件的配置与事件监听，帮助开发者提升前端交互体验。

摘要由CSDN通过智能技术生成

<!--

 * @Descripttion:

 * @version:

 * @Author: congsir

 * @Date: 2021-08-25 13:51:25

 * @LastEditors: Please set LastEditors

 * @LastEditTime: 2021-09-03 17:31:11

-->

<template>

  <d2-container>

    <template slot="header">

      <div class="work-order">

        <el-form

          :model="ruleForm"

          ref="ruleForm"

          label-width="80px"

          class="demo-ruleForm"

        >

          <el-row class="row1">

            <el-col :span="6">

              <el-form-item label="工单编号" prop="id">

                <el-input

                  placeholder="请输入工单号"

                  style="width: 150px"

                  size="mini"

                   v-model="searchList"

                >

                  <i slot="prefix" class="el-input__icon el-icon-search"></i

                ></el-input>

              </el-form-item>

            </el-col>

            <el-col :span="6">

              <el-form-item label="标题" prop="title">

                <el-input

                  v-model="searchTitle"

                  placeholder="请输入工单标题"

                  style="width: 150px"

                  size="mini"

                >

                  <i slot="prefix" class="el-input__icon el-icon-search"></i

                ></el-input>

              </el-form-item>

            </el-col>

            <el-col :span="6">

              <el-form-item label="类型" prop="type">

                <el-select

                  v-model="ruleForm.type" @change="query(ruleForm.type)"

                  placeholder="请选择活动区域"

                  size="mini"

                >

                  <el-option label="取消订单" value="取消订单"></el-option>

                  <el-option label="确认订单" value="确认订单"></el-option>

                </el-select>

              </el-form-item>

            </el-col>

            <el-col :span="6">

              <el-form-item label="状态" prop="station">

                <el-select

                  v-model="ruleForm.station"

                  placeholder="请选择活动区域"

                  size="mini"

                  @change="query(ruleForm.station)"

                >

                  <el-option label="已回复" value="已回复"></el-option>

                  <el-option label="待回复" value="待回复"></el-option>

                </el-select>

              </el-form-item>

            </el-col>

          </el-row>



          <el-row>

            <el-col :span="10">

              <el-form-item label="日期选择" prop="date">

                <el-date-picker

                  v-model="ruleForm.date"

                  size="mini"

                  type="daterange"

                  range-separator="至"

                  start-placeholder="开始日期"

                  end-placeholder="结束日期"

最低0.47元/天解锁文章