SuperTable 表格

table plus版本
默认支持table+pagination
支持post/get请求获取table数据
支持筛选和table数据联动 预留多处勾子，支持表前、表后等自定义
v2.7.0以上版本支持。

初始化

单独引入时：在入口js文件处引入

import { SuperTable } from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.use(SuperTable)

效果

基础使用

基础使用只需要配置数据接口和表头，即可实现基本的table+pagination效果

<template>
  <ss-super-table
    ref="xe-table"
    :table-header="tableHeader"
    :fetch-options="fetchOptions"
    is-horizontal
  >
  </ss-super-table>
</template>

<script>
  export default {
    data() {
      return {
        tableHeader: [{
          props: {
              prop: 'date',
              label: '日期',
          },
        },
        {
          props: {
              prop: 'name',
              label: '姓名',
          }
        },
        {
          props: {
              prop: 'address',
              label: '地址',
          }
        }],
        fetchOptions: {
          url: '/sense/super-table/demo',
          method: 'get',
          formatter(data) {
            return data.list
          }
        },
      }
    }
  }
</script>

筛选、多选

支持input、select筛选
选择多行数据时使用 Checkbox，手动添加is-selection
筛选布局水平is-horizontal

属性

参数	说明	类型	可选值	默认值
tableHeader	表头	array	—	—
fetchOptions	table数据获取配置见下表（fetchOptions）	object	—	—
tableOptions	table配置	object	—	—
filterOptions	筛选	array	—	-
filterLabelWidth	筛选项表单label宽度	string	—	'120px'
loadingText	加载中文字显示	-	—	-
pageSize	页数	-	number	10
emptyCell	单元格值为空时显示值	-	string	--
is-selection	选择多行数据	-	string	--
toolbarLayoutType	toolbar布局模式，multipleColumns多行布局,spaceBetween单行两端布局	string	multipleColumns/spaceBetween	multipleColumns

fetchOptions

参数	说明	类型	可选值	默认值
url	请求地址	string
method	请求方法	string	post/get/delete/put
params	请求参数携带的参数，写死的使用这个	object	{}	{}
fetchParams	向后台发起的请求参数，比如依赖vue实例上的，比较常用于这个返回对象	Function
formatter	格式化后端返回数据，回调参数为后端返回的data	Function	空函数

filterOptions使用说明

• toolbarLayoutType 值为multipleColumns的情况

参数	说明	类型	可选值	默认值
key	传给后端数据字段的key	string	必填
formatter	对拿到的值进行格式化	Function (val) {},参数val为表单绑定的值	非必填
toolbarType	工具类型，这种布局场景下只支持buttonGroup一种	string	如果是button组需要自己配置的时候必填
btnList	toolbarType为buttonGroup时必须对应的配置,具体配置见下面	Array
component	组件对象配置详情见下表	Object	必填

当toolbarType这个项没有的时候，会默认存在一个配置

{
  toolbarType: 'buttonGroup',
  btnList: [{
    type: 'primary',
    text: '筛选',
    onClickCallback(refreshTable) {
      refreshTable()
    }
  }, {
    type: 'text',
    text: '清空筛选项',
    onClickCallback(refreshTable, resetFilterItem) {
      resetFilterItem()
    }
  }]
}

• btnList配置

参数	说明	类型	可选值	默认值
type	按钮类型，对应button的type	string	参考button的type配置	primary
text	按钮内容	string	无	无
onClickCallback	点击按钮后的回调函数	Function	无，回调参数（refreshTable, resetFilterItem）	无

• components配置目前支持常见表单与相应表单配置一致如下：

name: 'ss-input', // 必须
props: {
  placeholder: '请输入姓名',
},
events: {
  /*blur(e){
    console.log('姓名----',e);
    self.handleSearch()
  }*/
}

• toolbarLayoutType 值为spaceBetween的情况

参数	说明	类型	可选值	默认值
toolbarType	工具类型	String	button/text/search	无
type	toolbarType 为button时存在	string	对应button颜色	无
onClickCallback	toolbarType为button时存在,search	Function（refreshTable, resetFilterItem）	无	无
align	位置（必填）	string	left/right	无
key	表单提交的时候对应的key(toolbar=search需要配置，搜索框和提交类表单需要配置)	string	无	无

tableOptions使用说明

参数	说明	类型	可选值	默认值
selectionOptions	复选框配置	object	—	—
pagination	表格底部页码配置	object	—	默认完整页码配置，属性值参考pagination组件

仅列举特殊配置，其他参考table属性

TableHeader配置

对应table-column配置,popover存在会给标题添加说明

        {
           props: {
               prop: 'name',
               label: '姓名',
           },
           popover: {
             content: '我是一段文字介绍'
           }
           // headerConfig: {
           //   columnDes: '我是列说明文字',
           //   columnDesIcon: '---'
           // }

       },

其他

事件

事件名	说明	参数
on-select-change	当用户手动勾选数据行的 Checkbox 时触发的事件	选中行信息
on-table-raw-data	获取table http请求的原始数据	object

方法

方法名	说明	参数
handleFilter	表格重新发起筛选请求获取数据	—
handleReset	筛选数据重置	—
resetSelectedRows	重置选中的数据行	—
updateListData	更新表格数据	—

Slot

name	说明	默认值
empty	数据为空	暂无数据
top	表格最上方（筛选项之前）	--
horizontal-filter-left	表格左上方（筛选项存在时生效）	--
horizontal-filter-right	表格右上方（筛选项存在时生效）	筛选/清空
table-before	表格上方，筛选栏下方	--
footer-left	表格左下方（页码左侧）	--
bottom	表格最下方	--