Element-ui中的複雜篩選與搜索 ,多關鍵字搜索

這兩天在搞一個項目的時候，遇到一個問題，如何對錶格的數據進行多關鍵字篩選，然後把關鍵字提交給後臺，後臺返回相應的數據綁定在表格中，找了很多帖子也都沒有過多的講解，都沒有找到心儀的案例，都是一些直接仿照官網給出的例子，只是靜態的過濾已綁定的數據，並沒有一個與後臺交互的過程。

於是我嘗試自己寫了一個，用了近兩個小時，現在把它分享出來

效果圖：交互是隻需將已選條件提交給後臺就好了，若沒選中，提交默認爲空

 

代碼：使用的是vue   element-ui組件編寫的，相應的引包是在js中引的，這裏並沒有給出

<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="2" style="color: yellowgreen">
          已選條件：
        </el-col>
        <el-col :span="12">
          <el-tag v-if="this.selectTags.area !== ''"
            closable size="small" @close="handleClose(0)">
            {{this.selectTags.area}}
          </el-tag>
          <el-tag v-if="this.selectTags.work !== ''"
                  closable size="small" @close="handleClose(1)">
            {{this.selectTags.work}}
          </el-tag>
          <el-tag v-if="this.selectTags.num !== ''"
                  closable size="small" @close="handleClose(2)">
            {{this.selectTags.num}}
          </el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" style="color: yellowgreen">
          行業：
        </el-col>
        <el-col :span="8">
          <el-button type="text" v-for="work in works" :key="work"
                     size="medium" @click="selectKey(work,0)">{{work}}</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" style="color: yellowgreen">
          省份：
        </el-col>
        <el-col :span="8">
          <el-button type="text" v-for="area in areas" :key="area"
                     size="medium"  @click="selectKey(area,1)">{{area}}</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" style="color: yellowgreen">
          指數：
        </el-col>
        <el-col :span="8">
          <el-button type="text" v-for="num in nums" :key="num"
                     size="medium"  @click="selectKey(num,2)">{{num}}</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //省份
        areas: ['湖南', '廣西', '福建', '廣東', '江西', '山東'],
        //行業
        works: ['工業', '旅遊業', '餐飲', '農業'],
        //指數
        nums: ['>=0.9','>=0.8','>=0.6'],
        //篩選參數
        selectTags: {
          area: '湖南',
          work: '',
          num: ''
        }
    },
    methods: {
      //篩選
      selectKey(tag,key) {
        if(key === 0)
          this.selectTags.work = tag
        else if(key === 1)
          this.selectTags.area = tag
        else
          this.selectTags.num = tag
      },
      //刪掉已選中的選項
      handleClose(tag) {
        if(tag === 0)
          this.selectTags.area = ''
        else if(tag === 1)
          this.selectTags.work = ''
        else
          this.selectTags.num = ''
      }
    }
  }
</script>

<style scoped>
.el-row {
  margin: 0px 0 15px 10px;
}
.el-tag {
  margin-right: 10px;
}
.el-button--medium {
  padding: 0px 10px;
  font-size: 16px;
  border-radius: 4px;
}
</style>

 

剛開始入坑vue框架，有什麼不足之處還望指出，最後我想說Element-ui 組件還是很友好的，特別容易上手

有什麼不明處歡迎留言，博主會第一時間回覆的