uniapp：mosowe-table高级表格组件

演示地址下载地址为偷懒而开发：uni-tableuni-paginationmosowe-formmosowe-dropdown参考的nameConfig配置，其中col，hide，visible配置无效

Mosowe

3053人浏览 · 2023-04-15 21:06:36

Mosowe · 2023-04-15 21:06:36 发布

演示地址
 下载地址

为偷懒而开发：

多级表头，默认子集占父级宽度50%，flex布局
根据设置自动生成搜索区
搜索区可设置默认展开/收起
可以设置左右固定列，多选框及索引列默认左侧固定
用户可自主设置展示列
组件内部翻页、刷新及搜索事件处理
组件内flex垂直布局模式
透传uni-table的props，events
内置常用表单按钮，emits返回相关数据
丰富的slots
可单选，多选

依赖

uni-table
uni-pagination
mosowe-form
mosowe-dropdown

props

属性	类型	默认	说明
column	`columnItem[]`	-	列配置，排列顺序即为表格顺序
localData	array		本地数据列表，与requestMethod不能同时为空，优先级最高
requestMethod	function		数据获取的方法，接受一个promise返回的方法，其then方法的回调参数`res={code，data，msg}`格式，data包含了`dataListKey`，`dataTotalKey`，若不满足可以使用`initBefore`处理
autoRequest	boolean	true	是否自动请求数据，即页面加载完就请求
rowOperation	`rowOperation[]`		表格行末尾的操作选项列表，即操作列
rowOperationWidth	string	100	操作列宽度
tableProps	object		表格uni-table的props配置，loading属性无效，已被组件内部处理了，如需请使用ref调用
title	string		左上角表格名称
initBefore	function		表格通过`requestMethod`获取数据后渲染页面前数据处理，参数为接口返回数据res，return值为`{list，total}`结构，list、total为固定字段
dataListKey	string	list	requestMethod时数据列表的键名
dataTotalKey	string	total	requestMethod时数据总数的键名
toolbar	boolean/`toolbarString`	true	表格常用工具展示，默认true展示全部，false不展示，值为`toolbarString`时展示相关按钮，多个英文逗号分隔
pagination	boolean/`paginationConfig`	true	分页器配置，默认true显示，组件默认配置为{current：1，pageSize：10}，false不展示，翻页功能添加了节流处理，点击翻页300ms后请求数据
defaultOpenSearch	boolean/number	false	是否默认展开搜索区，或者默认展开多少项，配置为number的时候，默认显示‘收起’按钮，点击收起的时候，只展示一行
autoHeight	boolean	false	不限制高度，自动增加
maxHeight	string	-	最大高度，低于最大高度的时候，高度自适应，优先级高于autoHeight
showIndex	boolean	false	显示序号
exportSelectConfig	`exportSelectConfigObject`		导出已选配置
radio	boolean	false	`tableProps.type === 'selection'`时单选，单选时只能在当前页选中，跨页清空

注意

组件内部使用flex垂直布局，最外层元素宽高设置为100%，所以建议组件的父级元素应该设置固定高度，且y轴可滚动。
可通过ref操作uni-table等组件methods

columnItem

属性	类型	可选	说明
text	string		列表头名称
value	string		列单元格键名
width	string		单元格宽度
fixed	string	left/right	固定位置，多选和序号固定在左侧，只针对一级表头，该项设置时列宽度默认100px
hideInTable	boolean		在表格中不显示，仅一级表头生效
mustShow	boolean		该列在表中必须展示，不能被用户隐藏，仅一级表头生效
align	string	left/center/right	表头对齐方式
filter-type	string	search/select/range/date	筛选类型，仅一级表头生效，search关键字搜索，select类别选择
filter-data	array		筛选数据，仅一级表头生效
sortable	boolean		是否启用排序，仅一级表头生效
searchOrder	number		在搜索区的排列权重，越大越靠前
search	boolean/`searchConfig`		是否可搜索，默认false，为true会根据是否包含enum字段选择显示input还是select
enum	`enumItem[]`		枚举数组，若列表数据字段为enum的value，则会自动替换展示enum的text
children	`columnItem[]`		子表头

rowOperation

属性	类型	可选	说明
text	string		按钮文案
click	function		按钮点击事件，回调参数为行数据
isShow	boolean		是否显示，用于权限配置
type	string	text/button	按钮类型
config	object		type=button的props配置，或type=text时文字颜色等样式设置

tableProps

属性	类型	默认	说明
border	boolean	false	是否带有纵向边框
stripe	boolean	true	是否显示斑马线样式
type	string		值为type=“selection” 时开启多选
emptyText	string	没有更多数据	空数据时显示的文本内容

toolbarString

值	说明
export	导出按钮，默认文案：导出
exportChoose	导出已选按钮，默认文案：导出已选，组件内置导出功能，导出原始表格列表数据，与右上角列显隐无关，多级表头只导出子集表头，有配置enum的会转文案后输出
add	新增按钮，默认文案：新增
download	下载模板按钮，默认文案：下载模板
upload	导入按钮，默认文案：导入数据
delete	删除按钮，表格可选择时生效，默认文案：删除已选
column	列布局展示按钮
refresh	刷新按钮

paginationConfig

属性	类型	默认	说明
prevText	string	上一页	左侧按钮文字
nextText	string	下一页	右侧按钮文字
pageSize	number	10	每页数据量
showIcon	boolean	false	是否以icon形式展示按钮，即‘上一页’‘下一页’变为图标形式

searchConfig

参考mosowe-form的nameConfig配置，其中col，hide，visible配置无效

enumItem

属性	类型	说明
text	string	文案
value	string\|number	值

exportSelectConfigObject

属性	类型	说明
type	string	导出类型，支持：xls，html，csv，默认xls
filename	string	导出文件名称，优先级 > title，都没有就默认时间戳

emits

事件	说明
onSearchChange	搜索区表单项值改变时，回调参数为name及值
onExport	导出按钮点击事件，回调参数为查询参数，导出功能的传参需要搜索区点击查询后方能生效
onAdd	新增按钮点击事件
onDownload	下载按钮点击事件，回调参数为查询参数
onUpload	导入数据按钮点击事件
onDelete	删除已选按钮点击事件，回调参数为表格已选数据列表
onSelectionChange	多选时选项改变事件，回调参数为已选数据列表
onSortChange	th点击排序，回调参数obj
onFilterChange	th点击筛选，回调参数obj

slots

slot	说明
search	搜索区插槽
toolbar	工具栏区插槽，作用域参数为{selectData，searchQuery}
toolbarLeft	工具栏左侧区插槽，作用域参数为{selectData，searchQuery}，包含了title，export，add，download，delete按钮
toolbarRight	工具栏右侧区插槽，作用域参数为{selectData，searchQuery}，包含了column，refresh按钮
rowOperation	表格行操作栏插槽，作用域参数为{index,rowData}
more	工具栏上方，搜索区下方插槽
under	分页下方底部区插槽
paginationLeft	分页区左侧插槽
[`columnItem.value`]Header	表格头部插槽，一级表头有效，作用域参数为{index，colnum}
[`columnItem.value`]Default	表格单元插槽，一级表头有效，作用域参数为{index，rowData，colnum}

示例代码

<template>
  <mosowe-table
    :column="column"
    :requestMethod="requestMethod"
    dataListKey="content"
    dataTotalKey="totalCount"
    rowOperationWidth="100"
    showIndex
    :tableProps="{
      type: 'selection'
    }"
    :rowOperation="rowOperation"
    @onAdd="onAdd"
    @onDelete="onDelete"
    @onSelectionChange="selectionChange"
    @onSortChange="onSortChange"
    @onSearchChange="onSearchChange"
  ></mosowe-table>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const app = getApp().globalData;
app?.checkLogin();

const requestMethod = (query: any) => {
  return new Promise((resolve) => {
    console.log('query', query);
    setTimeout(() => {
      resolve({
        code: 0,
        data: {
          content: Array.from({ length: query.pageSize }).map((_, index) => {
            return {
              name: '测试' + Date.now().toString().substring(9) + '-' + index,
              name2: '测试2',
              sex: index % 3,
              age: 20,
              date: Date.now()
            };
          }),
          totalCount: 100
        },
        msg: ''
      });
    }, 1000);
  });
};

const initBefore = (data: any) => {
  return {
    list: data.data.list.map((item: any) => ({ ...item, name: '我改了' })),
    total: data.data.total
  };
};
const onSortChange = (obj: any) =>{
  console.log('onSortChange',obj)
}

const selectionChange = (data: any) => {
  console.log('selectionChange',data)
}

const localData = Array.from({ length: 50 }).map((_, index) => {
  return {
    name: '测试',
    name2: '测试2',
    sex: index % 3,
    age: 20,
    date: Date.now()
  };
});
const rowOperation = [
  {
    text: '编辑',
    type: 'text',
    isShow: true,
    config: {
      color: '#409eff'
    },
    click: (row: any) => {
      console.log('编辑', row);
    }
  },
  {
    text: '删除',
    type: 'text',
    isShow: true,
    config: {
      sizi: 'mini',
      type: 'primary',
      style: {
        height: '20px',
        lineHeight: '20px',
        fontSize: '12px'
      }
    },
    click: (row: any) => {
      console.log('删除', row);
    }
  }
];

const onSearchChange = (name: any,value: any) => {
  console.log(name,value)
  if (name ==='name') {
    column.value[2].enum = [
      {
        text: '男',
        value: 0
      },
      {
        text: '女',
        value: 1
      }
    ]
  }
}

const column = ref([
  {
    text: '姓名',
    value: 'name',
    fixed: 'right',
    sortable: true,
    search: {
      type:'input',
      unionName: 'date=2023-02-01'
    }
  },
  {
    text: '姓名2',
    value: 'name2',
    width:'150',
    fixed: 'right'
  },
  {
    text: '性别',
    value: 'sex',
    width: '300',
    search: true,
    enum: [
      {
        text: '男',
        value: 0
      },
      {
        text: '女',
        value: 1
      },
      {
        text: '未知',
        value: 2
      }
    ]
  },
  {
    text: '年龄',
    value: 'age',
    search: true,
  },
  {
    text: '创建时间',
    value: 'date',
    searchOrder:12,
    search: {
      type: 'date',
      defaultValue: '2021-02-1',
      transform:(value: any)=>{
        return {
          time: value
        }
      }
    }
  }
]);

const onAdd = () => {
  console.log('onAdd');
};
const onDelete = (data: any) => {
  console.log('onDelete', data);
};
</script>

<style lang="scss" scoped></style>