IT俱乐部 JavaScript VUE el-table列表搜索功能纯前端实现方法

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

发布: 2024年 9月 7日 444阅读

目录

背景：

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

直接看代码：

<div class="project-container">
    <div class="table">
       
</div>
  </div>
 
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()
    }
  }
})
 
.project-container {
  .project-name {
    img {
      position: relative;
      top: 3px;
    }
  }
}

searchInput.vue

<img decoding="async" class="search-icon" src="@/image/search.svg" alt="search">
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
      }
    }
  }
}
 
.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;
}

总结

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

本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/js/13086.html

100赞

标签:el table vue 列表前端