更新记录

1.0.2（2023-05-05）

将uni组件封进组件包中，避免多次下载

1.0.1（2023-04-15）

兼容V2

1.0.0（2023-04-15）

发布

平台兼容性

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

依赖

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

在线演示

props

注意

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

columnItem

rowOperation

tableProps

toolbarString

paginationConfig

searchConfig

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

enumItem

exportSelectConfigObject

emits

slots

示例代码

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

<script setup lang="ts">
import { ref } from 'vue';

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>