vue中el表單的簡單查詢方法

更新時間：2023年10月31日 14:33:46 作者：m0_56666791

本文主要介紹了vue中el表單的簡單查詢方法,主要包括表單頁面根據(jù)groupid 、type 、errortype進行數(shù)據(jù)過濾,感興趣的可以了解一下

預期效果

實現(xiàn)表單頁面根據(jù)groupid 、type 、errortype進行數(shù)據(jù)過濾

實現(xiàn)

第一步，在頁面中添加輸入或者是下拉框，并且用相應的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">查詢數(shù)據(jù)</el-button>

第三步

此時已經(jīng)很多報錯了，趕緊定義所需的數(shù)據(jù)和方法！

定義v-model綁定的數(shù)據(jù)，存儲查詢的東西

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

定義下拉框內(nèi)容

let typeOptions = ref([
  {
    label: "一般故障",
    value: "一般故障"
  },
  {
    label: "緊急故障",
    value: "緊急故障"
  },
  {
    label: "特大故障",
    value: "特大故障"
  }
]);
let errtypeOptions = ref([
  {
    label: "溫度",
    value: "溫度"
  },
  {
    label: "電流",
    value: "電流"
  },
  {
    label: "電壓",
    value: "電壓"
  }
]);

第三步

定義搜索方法

//查詢數(shù)據(jù)
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是去除掉如果用戶未輸入內(nèi)容的時候也進行過濾的情況的，通過多次過濾，我們可以任意選擇篩選的情況

到此這篇關于vue中el表單的簡單查詢方法的文章就介紹到這了,更多相關vue el表單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: