首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue el表单

vue中el表单的简单查询方法

2023-10-31 14:33:46 作者：m0_56666791

本文主要介绍了vue中el表单的简单查询方法,主要包括表单页面根据groupid 、type 、errortype进行数据过滤,感兴趣的可以了解一下

预期效果

实现表单页面根据groupid 、type 、errortype进行数据过滤

实现

第一步，在页面中添加输入或者是下拉框，并且用相应的v-model进行绑定

    <div style="display: flex;flex-direction: row;">
      <el-input style="width: auto;height:32px" placeholder="输入故障设备组" v-model="groupid"></el-input>

      <el-form-item>
        <el-select v-model="type" placeholder="请选择故障类型">
          <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="errortype" placeholder="请选择故障原因">
          <el-option v-for="(item, index) in errtypeOptions" :key="index" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>

    </div>

第二步，添加查询按钮按钮绑定查询方法

 <el-button type="primary" @click="search" style="margin-left: 5px">查询数据</el-button>

第三步

此时已经很多报错了，赶紧定义所需的数据和方法！

定义v-model绑定的数据，存储查询的东西

const groupid = ref("")
const type = ref("")
const errortype = ref("")

定义下拉框内容

let typeOptions = ref([
  {
    label: "一般故障",
    value: "一般故障"
  },
  {
    label: "紧急故障",
    value: "紧急故障"
  },
  {
    label: "特大故障",
    value: "特大故障"
  }
]);
let errtypeOptions = ref([
  {
    label: "温度",
    value: "温度"
  },
  {
    label: "电流",
    value: "电流"
  },
  {
    label: "电压",
    value: "电压"
  }
]);

第三步

定义搜索方法

//查询数据
const search = () => {
  if (groupid.value != "") {
    tableData.value = tableData.value.filter(v => v.groupid == (groupid.value))
    console.log(1);

  }
  if (type.value != "") {
    tableData.value = tableData.value.filter(v => v.type.includes(type.value))
    console.log(2);

  }
  if (errortype.value != "") {
    tableData.value = tableData.value.filter(v => v.errortype.includes(errortype.value))
    console.log(3);

  }


}

这里的if是去除掉如果用户未输入内容的时候也进行过滤的情况的，通过多次过滤，我们可以任意选择筛选的情况

到此这篇关于vue中el表单的简单查询方法的文章就介绍到这了,更多相关vue el表单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！