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

只想幸福

背景：

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

直接看代码：

1. <template>
   
2.   <div class="project-container">
   
3.     <SearchInputVue :keyword.sync="keyword" :placeholder="placeholderWords" style="margin-bottom: 20px" />
   
4.     <div class="table">
   
5.       <DefectList :defect-list="keyword ? filterDefectList : defectList" :total="fetchListPageData.total" :on-page-change="pageChange" />
   
6.     </div>
   
7.   </div>
   
8. </template>
   
9. 
   
10. <script lang="ts">
    
11. import Vue from 'vue'
    
12. 
    
13. import SearchInputVue from '@/components/Input/SearchInput.vue'
    
14. import DefectList from './components/DefectList.vue'
    
15. // import Info from '@/mock.json'
    
16. import API from '@/api'
    
17. import { warn } from '@/utils/common'
    
18. 
    
19. export default Vue.extend({
    
20.   name: 'Index',
    
21.   components: {
    
22.     SearchInputVue,
    
23.     DefectList
    
24.     // TypeIcon
    
25.   },
    
26.   data() {
    
27.     return {
    
28.       defectList: [],
    
29.       filterDefectList: [],
    
30.       placeholderWords: '搜索缺陷',
    
31.       keyword: '',
    
32.       fetchListPageData: {
    
33.         total: 0,
    
34.         page: 1,
    
35.         pageSize: 10
    
36.       }
    
37.     }
    
38.   },
    
39.   watch: {
    
40.     keyword(newVal) {
    
41.       const keyVal = newVal.replace(' ', '')
    
42.       this.filterDefectList = keyVal ? this.defectList.filter(item => item.title.includes(keyVal)) : this.defectList
    
43.     }
    
44.   },
    
45.   created() {
    
46.     this.getDefectList()
    
47.   },
    
48.   methods: {
    
49.     async getDefectList() {
    
50.       try {
    
51.         const res = await API.Defect.defectListData({
    
52.           keyword: '',
    
53.           page: this.fetchListPageData.page,
    
54.           pageSize: this.fetchListPageData.pageSize
    
55.         })
    
56.         this.defectList = res.data.list
    
57.         this.fetchListPageData.total = res.data.total
    
58.       } catch (error) {
    
59.         warn(error, true)
    
60.       }
    
61.     },
    
62.     pageChange(current: number) {
    
63.       this.fetchListPageData.page = current
    
64.       this.getDefectList()
    
65.     }
    
66.   }
    
67. })
    
68. </script>
    
69. 
    
70. <style lang="stylus" scoped>
    
71. .project-container {
    
72.   .project-name {
    
73.     img {
    
74.       position: relative;
    
75.       top: 3px;
    
76.     }
    
77.   }
    
78. }
    
79. </style>

复制代码

searchInput.vue

1. <template>
   
2.   <el-input v-model="_keyword" :placeholder="placeholder" class="search" @change="$emit('trigger-event', _keyword)">
   
3.     <img slot="prefix" class="search-icon" src="@/image/search.svg" alt="search" />
   
4.   </el-input>
   
5. </template>
   
6. 
   
7. <script>
   
8. export default {
   
9.   name: 'SearchInput',
   
10.   props: {
    
11.     placeholder: {
    
12.       type: String,
    
13.       default: '请输入要搜索的内容'
    
14.     },
    
15.     keyword: {
    
16.       type: String,
    
17.       default: ''
    
18.     }
    
19.   },
    
20.   computed: {
    
21.     _keyword: {
    
22.       set: function (val) {
    
23.         this.$emit('update:keyword', val)
    
24.       },
    
25.       get: function () {
    
26.         return this.keyword
    
27.       }
    
28.     }
    
29.   }
    
30. }
    
31. </script>
    
32. 
    
33. <style scoped lang="stylus">
    
34. .search {
    
35.   width: auto;
    
36. 
    
37.   /deep/ .el-input__prefix {
    
38.     margin-left: 10px;
    
39.     line-height: 40px;
    
40.   }
    
41. 
    
42.   /deep/ .el-input__inner {
    
43.     padding-left: 54px;
    
44.     width: 305px;
    
45.     // height: 56px;
    
46.     border-radius: 5px;
    
47.     background-color: rgba(34, 37, 41, 1);
    
48.     border: 0.5px solid rgba(255, 255, 255, 0.1);
    
49.     font-weight: normal;
    
50.     font-size: 16px;
    
51.     line-height: 32px;
    
52.     color: #fff;
    
53.   }
    
54. 
    
55.   /deep/ .el-input__suffix {
    
56.     .el-input__suffix-inner {
    
57.       border-color: none;
    
58.       position: relative;
    
59. 
    
60.       .el-icon-circle-close:before {
    
61.         content: '\e6db' !important;
    
62.         font-size: 24px;
    
63.         color: #387DFF;
    
64.         right: 20px;
    
65.         top: -7px;
    
66.         position: absolute;
    
67.       }
    
68.     }
    
69.   }
    
70. }
    
71. 
    
72. .search-icon {
    
73.   vertical-align: middle;
    
74.   line-height: 40px;
    
75. }
    
76. </style>

复制代码

总结

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

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