uniapp：mosowe-table高级表格组件_uniapp表格组件

演示地址
下载地址

为偷懒而开发：

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"
    @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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186