论坛 › JavaScript › VUE el-table列表搜索功能纯前端实现方法

只想幸福 发表于 2024-9-12 10:00:18

VUE el-table列表搜索功能纯前端实现方法

背景：

对el-table数据进行搜索筛选，但是不想调取接口，纯前端实现


直接看代码：

<template>
<div class="project-container">
    <SearchInputVue :keyword.sync="keyword" :placeholder="placeholderWords" style="margin-bottom: 20px" />
    <div class="table">
      <DefectList :defect-list="keyword ? filterDefectList : defectList" :total="fetchListPageData.total" :on-page-change="pageChange" />
    </div>
</div>
</template>

<script lang="ts">
import Vue from 'vue'

import SearchInputVue from '@/components/Input/SearchInput.vue'
import DefectList from './components/DefectList.vue'
// import Info from '@/mock.json'
import API from '@/api'
import { warn } from '@/utils/common'

export default Vue.extend({
name: 'Index',
components: {
    SearchInputVue,
    DefectList
    // TypeIcon
},
data() {
    return {
      defectList: [],
      filterDefectList: [],
      placeholderWords: '搜索缺陷',
      keyword: '',
      fetchListPageData: {
      total: 0,
      page: 1,
      pageSize: 10
      }
    }
},
watch: {
    keyword(newVal) {
      const keyVal = newVal.replace(' ', '')
      this.filterDefectList = keyVal ? this.defectList.filter(item => item.title.includes(keyVal)) : this.defectList
    }
},
created() {
    this.getDefectList()
},
methods: {
    async getDefectList() {
      try {
      const res = await API.Defect.defectListData({
          keyword: '',
          page: this.fetchListPageData.page,
          pageSize: this.fetchListPageData.pageSize
      })
      this.defectList = res.data.list
      this.fetchListPageData.total = res.data.total
      } catch (error) {
      warn(error, true)
      }
    },
    pageChange(current: number) {
      this.fetchListPageData.page = current
      this.getDefectList()
    }
}
})
</script>

<style lang="stylus" scoped>
.project-container {
.project-name {
    img {
      position: relative;
      top: 3px;
    }
}
}
</style>
searchInput.vue

<template>
<el-input v-model="_keyword" :placeholder="placeholder" class="search" @change="$emit('trigger-event', _keyword)">
    <img slot="prefix" class="search-icon" src="@/image/search.svg" alt="search" />
</el-input>
</template>

<script>
export default {
name: 'SearchInput',
props: {
    placeholder: {
      type: String,
      default: '请输入要搜索的内容'
    },
    keyword: {
      type: String,
      default: ''
    }
},
computed: {
    _keyword: {
      set: function (val) {
      this.$emit('update:keyword', val)
      },
      get: function () {
      return this.keyword
      }
    }
}
}
</script>

<style scoped lang="stylus">
.search {
width: auto;

/deep/ .el-input__prefix {
    margin-left: 10px;
    line-height: 40px;
}

/deep/ .el-input__inner {
    padding-left: 54px;
    width: 305px;
    // height: 56px;
    border-radius: 5px;
    background-color: rgba(34, 37, 41, 1);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    font-weight: normal;
    font-size: 16px;
    line-height: 32px;
    color: #fff;
}

/deep/ .el-input__suffix {
    .el-input__suffix-inner {
      border-color: none;
      position: relative;

      .el-icon-circle-close:before {
      content: '\e6db' !important;
      font-size: 24px;
      color: #387DFF;
      right: 20px;
      top: -7px;
      position: absolute;
      }
    }
}
}

.search-icon {
vertical-align: middle;
line-height: 40px;
}
</style>
总结

到此这篇关于VUE el-table列表搜索功能纯前端实现的文章就介绍到这了,更多相关VUE el-table列表搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/3268082mr.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

查看完整版本: VUE el-table列表搜索功能纯前端实现方法