vue2中表格复合型输入框搜索功能

momo_root

已于 2023-08-10 11:14:49 修改

阅读量462

点赞数

CC 4.0 BY-SA版权

分类专栏： vue2表格文章标签： elementui vue javascript 前端

于 2023-08-09 17:32:58 首次发布

本文链接：https://blog.csdn.net/weixin_54526156/article/details/132193165

vue2表格专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在ElementUI中使用el-input和el-select组件进行内容标题或人物标签的搜索，以及如何根据用户选择动态过滤数据并发送API请求到后台获取列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格可以根据标题或者标签去查找
elementui官网参考：https://element.eleme.io/#/zh-CN/component/input

<el-input
          v-model="selectVideoName"
          class="videoName"
          placeholder="通过内容标题或人物标签搜索"
          prefix-icon="el-icon-search"
          :clearable="true"
          @keyup.enter.native="toFilterData"
          @keyup.esc.native="clearInput"
        >
          <el-select slot="prepend" v-model="selectSearchData" placeholder="请选择" class="ownSelect input-with-select" @change="searchSelect">
            <el-option label="内容标题" value="内容标题" />
            <el-option label="人物标签" value="人物标签" />
          </el-select>
        </el-input>

selectVideoName: '', // 搜索输入框输入的文本
selectSearchData: '内容标题', // 搜索下拉框的选择
// 获取列表
    getList(page) {
      this.tableData = []
      this.page = page || 1
      if (this.selectSearchData === '内容标题') {
        this.filterObj.articleName = this.selectVideoName
      } else {
        // 此处是命中标签的查找
        this.filterObj.personLabel = this.selectVideoName
      }
      this.axios.post('请求后台地址', {
        curPage: this.page,
        pageSize: this.pageSize,
        ...this.filterObj
      }).then(res => {
        if (res.code === 200) {
        }
      })
    },
// 搜索框前面的下拉选择框
    searchSelect(event) {
      if (event === '内容标题') {
        this.filterObj.personLabel = ''
      } else {
        this.filterObj.articleName = ''
      }
    }