这两天在搞一个项目的时候，遇到一个问题，如何对表格的数据进行多关键字筛选，然后把关键字提交给后台，后台返回相应的数据绑定在表格中，找了很多帖子也都没有过多的讲解，都没有找到心仪的案例，都是一些直接仿照官网给出的例子，只是静态的过滤已绑定的数据，并没有一个与后台交互的过程。

于是我尝试自己写了一个，用了近两个小时，现在把它分享出来

效果图：交互是只需将已选条件提交给后台就好了，若没选中，提交默认为空

代码：使用的是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 组件还是很友好的，特别容易上手

有什么不明处欢迎留言，博主会第一时间回复的