devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue + element 实现的可配置的数据搜索组件

作者：2023面试高手 | 2024-02-18 01:04:31

赞

踩

vue + element 实现的可配置的数据搜索组件

vue + element 实现的可配置的数据搜索组件（搜索框 + table展示 + 分页控制）

说明：

在管理系统中，涉及到很多根据查询条件，查出数据，然后使用表格展示的页面。

对于这种复用性极强的page，提供一个公共的组件是很必要的（样式统一、高效开发）。

主要切分为3个组件。

1、Filter 功能：搜索条件，搜索按钮

2、Table 功能：展示数据，列表内实现一些操作如：查看、编辑等

3、Pagination 功能：分页，控制页面大小，页面数

调用方式：

  1. <template lang="pug">
  2. FilterTable(
  3.     :list="list"
  4.     :filters="filters"
  5.     :tableList="tableList"
  6.     :pageNum="pageNum"
  7.     :pageSize="pageSize"
  8.     :total="total"
  9.     @listenHandleClickFilterButton="handleClickFilterButton"
  10.     @listenHandleClickTableColumnHref="handleClickTableColumnHref"
  11.     @listenHandleChangePaginationSize="handleChangePaginationSize"
  12.     @listenHandleChangePaginationNum="handleChangePaginationNum"
  13. ) 
  14. </template>
  15. import FilterTable from '@/components/common/c-filter-table'
  16. import list from './list'
  17. export default {
  18.     components: {
  19.         FilterTable
  20.     },
  21.     created() {},
  22.     data() {
  23.         return {
  24.             pageNum: 1,
  25.             pageSize: 20,
  26.             total: 0,
  27.             tableList: [],
  28.             list,
  29.             filters: list.filterList.reduce((obj, item) => {
  30.                 if (item.type !== 'button') {
  31.                     obj[item.key] = ''
  32.                 }
  33.                 return obj
  34.             }, {}),
  35.         }
  36.     },
  37.     methods: {
  38.         handleClickFilterButton(buttonKey) {
  39.             if (buttonKey === 'search') {
  40.                 this.handleClickSearch()
  41.             }
  42.             if (buttonKey === 'reset') {
  43.                 this.handleClickReset()
  44.             }
  45.             if (buttonKey === 'export') {
  46.                 this.handleClickExport()
  47.             }
  48.             if (buttonKey === 'add') {
  49.                 this.handleClickAdd()
  50.             }
  51.         },
  52.         handleClickTableColumnHref(columnKey, row) {
  53.             if (columnKey === 'edit') {
  54.                 console.log('click column edit')
  55.             }
  56.         },
  57.         handleChangePaginationSize(size) {
  58.             this.pageNum = 1
  59.             this.pageSize = size
  60.             this.handleClickSearch()
  61.         },
  62.         handleChangePaginationNum(num) {
  63.             this.pageNum = num
  64.             this.handleClickSearch()
  65.         },
  66.         async handleClickSearch() {
  67.             ...
  68.         },
  69.         handleClickAdd() {
  70.             ...
  71.         },
  72.         async handleClickReset() {
  73.             this.filters = list.filterList.reduce((obj, item) => {
  74.                 if (item.type !== 'button') {
  75.                     obj[item.key] = ''
  76.                 }
  77.                 return obj
  78.             }, {})
  79.  
  80.             ...
  81.         }
  82.     }
  83. }
  84.         
  85. 复制代码

参数说明

list：搜索框配置、表格字段配置

一个list配置如下：

  1. const list = {
  2.     filterList: [
  3.         {
  4.             label: '座位号',
  5.             key: 'id',
  6.             type: 'input',
  7.             span: 6
  8.         },
  9.         {
  10.             label: '班级',
  11.             key: 'class',
  12.             type: 'select',
  13.             options: [
  14.                 {
  15.                     key: '1',
  16.                     label: '一班',
  17.                     val: '1'
  18.                 },
  19.                 {
  20.                     key: '2',
  21.                     label: '二班',
  22.                     val: '2'
  23.                 }
  24.             ],
  25.             span: 6
  26.         },
  27.         {
  28.             label: '入学日期',
  29.             key: 'statPeriod',
  30.             type: 'datePicker',
  31.             span: 6,
  32.             config: {
  33.                 type: 'date',
  34.                 placeholder: '选择日期'
  35.             }
  36.         },
  37.         {
  38.             label: '入校时长',
  39.             key: 'backDate',
  40.             type: 'datePicker',
  41.             config: {
  42.                 type: 'daterange',
  43.                 rangeSeparator: '至',
  44.                 startPlaceholder: '开始日期',
  45.                 endPlaceholder: '结束日期'
  46.             },
  47.             span: 12
  48.         },
  49.         {
  50.             label: '查询',
  51.             key: 'search',
  52.             type: 'button',
  53.             config: {
  54.                 type: 'primary'
  55.             },
  56.             span: 2
  57.         },
  58.         {
  59.             label: '重置',
  60.             key: 'reset',
  61.             type: 'button',
  62.             config: {
  63.                 type: ''
  64.             },
  65.             span: 2
  66.         },
  67.         {
  68.             label: '导出',
  69.             key: 'export',
  70.             type: 'button',
  71.             config: {
  72.                 type: 'success'
  73.             },
  74.             span: 2
  75.         }
  76.     ],
  77.     tableColumns: [
  78.         {
  79.             label: '状态',
  80.             key: 'stateName'
  81.         },
  82.         {
  83.             label: '编号',
  84.             key: 'code'
  85.         },
  86.         {
  87.             label: '姓名',
  88.             key: 'name'
  89.         },
  90.         {
  91.             label: '年龄',
  92.             key: 'remark'
  93.         },
  94.         {
  95.             label: '操作',
  96.             key: 'edit',
  97.             type: 'href',
  98.             filter: () => '编辑'
  99.         }
  100.     ],
  101. 复制代码

filterList 用于配置搜索框 对应的事件处理为：listenHandleClickFilterButton

tableColumns 用于配置表格字段 对应的事件处理为：listenHandleClickTableColumnHref

tableList: 搜索结果，传入table的数据

pageNum、pageSize、total: 分页需要的数据

对应的控制分页事件为：listenHandleChangePaginationSize、listenHandleChangePaginationNum

c-filter-table完整代码：

  1. <template lang="pug">
  2. .c-table-container       
  3.     el-form.search-box
  4.         el-row(:gutter="20")
  5.             template(v-for="item in list.filterList")
  6.                 el-col(
  7.                     v-if="item.type==='button'"
  8.                     :span="item.span"
  9.                     :key="item.key")
  10.                     el-button(:type="item.config.type" @click="handleClickFilterButton(item.key)") {{ item.label }}
  11.                 el-col(
  12.                     v-else
  13.                     :span="item.span"
  14.                     :key="item.key")
  15.                     el-form-item(
  16.                         :label="item.label"
  17.                         :prop="item.key"
  18.                         label-width="110px")
  19.                         el-input(
  20.                             v-if="item.type==='input'"
  21.                             v-model="filters[item.key]")
  22.                         el-select(
  23.                             v-if="item.type==='select'"
  24.                             v-model="filters[item.key]")
  25.                             el-option(
  26.                                 v-for="option in item.options" 
  27.                                 :key="option.key" 
  28.                                 :value="option.val" 
  29.                                 :label="option.label")
  30.                         el-select(
  31.                             v-if="item.type==='select-filterable'"
  32.                             v-model="filters[item.key]"
  33.                             filterable placeholder="请选择")
  34.                             el-option(
  35.                                 v-for="option in item.options" 
  36.                                 :key="option.key" 
  37.                                 :value="option.val" 
  38.                                 :label="option.label")
  39.                         el-date-picker(
  40.                             v-if="item.type==='datePicker'"
  41.                             v-model="filters[item.key]"
  42.                             :type="item.config.type"
  43.                             :range-separator="item.config.rangeSeparator"
  44.                             :start-placeholder="item.config.startPlaceholder"
  45.                             :end-placeholder="item.config.endPlaceholder")
  46.  
  47.     el-table(:data="tableList" border)
  48.         el-table-column(
  49.             type="index"
  50.             label="序号"
  51.             align="center")
  52.         el-table-column(
  53.             v-for="item in list.tableColumns" 
  54.             :key="item.key"
  55.             :label="item.label"
  56.             :prop="item.key"
  57.             align="center")
  58.             template(slot-scope="scope")  
  59.                 a(
  60.                     v-if="item.type === 'href'"
  61.                     class="blue"
  62.                     @click="handleClickTableColumnHref(item.key, scope.row)"
  63.                 ) {{ item.filter(scope.row) }}
  64.                 
  65.                 span(v-else) {{ item.filter ? item.filter(scope.row) : scope.row[item.key] }}
  66.     el-pagination(
  67.         @size-change="handleChangePaginationSize"
  68.         @current-change="handleChangePaginationNum"
  69.         :page-sizes="[10, 20, 50, 100]"
  70.         :current-page.sync="selfPageNum"
  71.         :page-size="selfPageSize"
  72.         layout="total, sizes, prev, pager, next, jumper"
  73.         :total="total")
  74. </template>
  75.  
  76. <script>
  77. export default {
  78.     props: [
  79.         'list',
  80.         'tableList',
  81.         'total',
  82.         'pageNum',
  83.         'pageSize',
  84.         'filters',
  85.         'listenHandleClickFilterButton',
  86.         'listenHandleClickTableColumnHref',
  87.         'listenHandleChangePaginationSize',
  88.         'listenHandleChangePaginationNum'
  89.     ],
  90.     data() {
  91.         return {
  92.             selfPageNum: this.pageNum,
  93.             selfPageSize: this.pageSize
  94.         }
  95.     },
  96.     methods: {
  97.         handleClickFilterButton(filterKey) {
  98.             this.$emit('listenHandleClickFilterButton', filterKey)
  99.         },
  100.         handleClickTableColumnHref(columnKey, row) {
  101.             this.$emit('listenHandleClickTableColumnHref', columnKey, row)
  102.         },
  103.         handleChangePaginationSize(val) {
  104.             this.selfPageNum = 1
  105.             this.selfPageSize = val
  106.             this.$emit('listenHandleChangePaginationSize', val)
  107.         },
  108.         handleChangePaginationNum(val) {
  109.             this.selfPageNum = val
  110.             this.$emit('listenHandleChangePaginationNum', val)
  111.         }
  112.     }
  113. }
  114. </script>
  115.  
  116. <style scoped lang="scss">
  117. .el-row {
  118.     margin-bottom: 20px;
  119.     &:last-child {
  120.         margin-bottom: 0;
  121.     }
  122. }
  123. .el-col {
  124.     border-radius: 4px;
  125. }
  126. .blue {
  127.     color: #409eff;
  128. }
  129. .c-table-container {
  130.     padding: 15px;
  131.     min-height: 500px;
  132.     .search-box.el-form {
  133.         display: flex;
  134.         flex-wrap: wrap;
  135.         .el-form-item {
  136.             .el-input {
  137.                 width: 160px;
  138.             }
  139.         }
  140.     }
  141.     .extand {
  142.         .el-form-item {
  143.             width: 25%;
  144.         }
  145.     }
  146.     .el-pagination {
  147.         text-align: right;
  148.         padding: 10px;
  149.     }
  150. }
  151. </style>
  152. 复制代码

转载于:https://juejin.im/post/5c909c995188252dac6d292b

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/103101
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号