usmart-filter-table

封装一个带有搜索框的列表组件

npm 地址

https://www.npmjs.com/package/usmart-filter-table

使用方法：

组件可以支持的参数：

• config 丢入配置文件
• tableList 接口返回的数组数据
• filters 查询参数对象
• filtersHide 是否隐藏搜索框
• selection 是否有选择框
• pageHide 是否隐藏分页组件名，默认false
• resetIndex 自定义序号，默认根据pageSize和pageNum来
• headerIsWrap 表头是否可以换行,默认false ==》 label: '客户|姓名',
• height Table 的高度，默认为自动高度。Table 的高度会受控于外部样式
• SerialNumName 序号的名称，默认是序号
• loading 是否添加loading，默认false
• pagination 分页参数
• paginationFixed 是否固定， 默认true固定

完整示例配置

<template lang="pug">
usmart-filter-table(
    :config="list"
    :tableList="tableList"
    :filters="filters"
    :filtersHide="false"
    :pageHide="false"
    :pagination="pagination"
    :selection="true"
    :loading="loading"
    @listenHandleClickFilterButton="handleClickFilterButton"
    @listenHandleClickTableColumnHref="handleClickTableColumnHref"
    @listenHandleChangePaginationSize="handleChangePaginationSize"
    @listenHandleChangePaginationNum="handleChangePaginationNum"
    @listenSortChange="handleSortChange"
    @listenHandleSelectionChange="handleSelectionChange"
)
</template>
import list from './list'
export default {
    name: 'app',

    data () {
        return {
            // 分页参数
            pagination: {
                pageNum: 1,
                pageSize: 20,
                total: 0
            },
            // 查询参数
            filters: list.filters,
            // 配置项
            list: list,
            tableList: [],
            // 是否有加载loading
            loading: false,
            // 是否隐藏搜索框
            filtersHide: false,
            // 是否隐藏分页组件
            pageHide: false,
            // 是否可勾选
            selection: false
        }
    },
    created() {
        // 模拟请求数据
        this.fetchData(100).then((list) => {
            this.tableList = list
        })
    },
    methods: {
        // 模仿接口返回的数据
        getData() {
            this.fetchData(100).then((list) => {
                this.tableList = list
            })
        },
        handleClickFilterButton(buttonKey) {
            console.log('filters===>', this.filters)
            console.log('buttonKey ===>', buttonKey)
            if (buttonKey === 'search') {
                this.pagination.pageNum = 1
                this.fetchData(100).then((list) => {
                    this.tableList = list
                })
            }
        },
        handleClickTableColumnHref(hrefKey) {
            console.log('hrefKey===>', hrefKey)
        },
        handleSelectionChange (val) {
            console.log('selected-val',val)
        },
        // 改变每页面显示条数
        handleChangePaginationSize(val) {
            this.pagination.pageNum = 1
            this.pagination.pageSize = val
            this.getData()
        },
        // 翻页操作
        handleChangePaginationNum(val) {
            this.pagination.pageNum = val
            this.getData()
        },
        handleSortChange (sort) {
            console.log('sort ===>' , sort)
        },
        // 模拟数据返回, 一个返回接口数据的api
        fetchData (total) {
            this.loading = true
            let num = this.pagination.pageSize
            this.pagination.total = total
            return new Promise((resolve) => {
                setTimeout(() => {
                    let list = Array.from(Array(num), (v,k) => {
                            return {gender: 'nv', chineseName: 'jack'+ k}
                        }
                    )
                    this.loading = false
                    resolve(list)
                }, 2000)
            }).catch((err) => {
                console.log(err)
            })
        }
    }
}

list参数配置

• filterList 条件筛选的配置

  • input

  
      {
          label: '资金账号',
          key: 'chineseName',
          labelWidth: '70px',
          type: 'input', // input，range-input
          span: 3
      }
  

  • range-input

        {
          label: 'MV比例',
          key: 'mvRate',
          labelWidth: '100px',
          type: 'range-input',
          rate: 'rate',
          config: {
              key1: 'mvStart',
              key2: 'mvEnd'
          },
          span: 8
      },

  • select

   {
          label: '市场',
          key: 'exchangeType',
          type: 'select',
          options: exchangeTypeMapList,
          labelWidth: '50px',
          span: 6
      },

  • select-multiple

  {
          label: '用户证件归属',
          key: 'countryTypes',
          labelWidth: '150px',
          type: 'select-multiple',
          options: [
              {
                  key: 1,
                  label: '大陆',
                  val: 1
              },
              {
                  key: 2,
                  label: '香港',
                  val: 2
              },
              {
                  key: 3,
                  label: '海外',
                  val: 3
              }
          ],
          span: 8
      },

  • datePicker - datetimerange

  {
          label: '更新时间：',
          key: 'marketTime',
          type: 'datePicker',
          config: {
              type: 'datetimerange',
              rangeSeparator: '至',
              startPlaceholder: '开始日期',
              endPlaceholder: '结束日期'
          },
          span: 16
      },

  • datePicker - daterange

    {
          label: '除息日',
          key: 'exDividendDate',
          type: 'datePicker',
          config: {
              type: 'daterange',
              rangeSeparator: '-',
              startPlaceholder: '开始日期',
              endPlaceholder: '结束日期',
              valueFormat: 'yyyy-MM-dd'
          },
          labelWidth: '70px',
          span: 12
      },

• buttonList 按钮列表

const buttonList = [
        {
            label: '查询',
            key: 'search',
            type: 'button',
            config: {
                type: 'primary'
            },
            span: 3
        },
        {
            label: '重置',
            key: 'reset',
            type: 'button',
            config: {
                type: 'primary'
            },
            span: 3
        }
    ]

• filters 筛选值

const filtersHandle = filterList => {
    return filterList.reduce((obj, item) => {
        obj[item.key] = ''
        return obj
    }, {})
}
const filters = filtersHandle(filterList)

• tableColumns 表格的每列key

const tableColumns = [
        {
            label: '客户姓名',
            key: 'chineseName',
            filter: row => {
                return row['chineseName'] || row['englishName'] || {}
            }
        },
        {
            label: '性别',
            key: 'gender',
            // 是否可排序
            sortable: true
        },
        {
            label: '操作',
            key: 'process',
            type: 'href',
            // filter里可以过滤要展示的结果
            filter: row => {
                return '查看'
            }
        }
    ]

来一个完整的🌰： list 文件

const filtersHandle = filterList => {
    return filterList.reduce((obj, item) => {
        obj[item.key] = ''
        return obj
    }, {})
}
const filterList =
    [
        {
            label: '性别',
            key: 'gender',
            type: 'select',
            labelWidth: '70px',
            span: 5,
            options: [
                {
                    label: '全部',
                    val: ''
                },
                {
                    label: '男',
                    val: '1'
                },
                {
                    label: '女',
                    val: '0'
                },
                {
                    label: '中性',
                    val: '2'
                }
            ]
        },
        {
            label: '客户姓名',
            key: 'chineseName',
            labelWidth: '70px',
            type: 'input',
            span: 5
        },
        {
            label: '客户申请时间',
            key: 'startApplyTime',
            labelWidth: '100px',
            type: 'datePicker',
            config: {
                type: 'datetime'
            },
            span: 8
        }
    ]

const buttonList = [
    {
        label: '查询',
        key: 'search',
        type: 'button',
        config: {
            type: 'primary'
        },
        span: 3
    },
    {
        label: '重置',
        key: 'reset',
        type: 'button',
        config: {
            type: 'primary'
        },
        span: 3
    }
]

const tableColumns = [
    {
        label: '客户姓名',
        key: 'chineseName',
        filter: row => {
            return row['chineseName'] || row['englishName'] || {}
        }
    },
    {
        label: '性别',
        key: 'gender',
        sortable: true
    },
    {
        label: '操作',
        key: 'view',
        type: 'moreHref',
        // filter里可以过滤要展示的结果
        filter: row => {
            return [
                {
                    label: '禁用',
                    key: 'disable'
                },
                {
                    label: '启用',
                    key: 'disable'
                }
            ]
        }
    }
]
const filters = filtersHandle(filterList)

export default {
    filterList,
    tableColumns,
    buttonList,
    filters
}