FitsGroupTable 分组表格
guhaodong2022年10月17日大约 2 分钟约 656 字
# FitsGroupTable 分组表格
# 基本用法
必须传入headers属性（表头配置，和vxe-columns属性一致）以及ajax.query属性。groupConditions属性（分组条件）可传可不传，defaultChecked属性表示默认选中哪个分组。
<template>
<div class="base-group-table">
<!-- 现在这里没用到自定义列，到时候想和框架的查询兼容，还需要等到时候修改 -->
<fits-table-group ref="table" :config="config" />
</div>
</template>
<script lang="ts" setup name="QualityControl">
import { reactive, ref, toRefs } from "vue";
import { FitsTableGroup } from '@/fits-components';
import { IFitsTableGroup, FitsTableGroupProps } from '@/fits-components/type'
const state = reactive<{ config: FitsTableGroupProps }>({
config: new FitsTableGroupProps({
headers: [
{ title: "年龄", field: "age" },
{ title: "性别", field: "sex" },
{ title: "姓名", field: "name" },
],
ajax: {
query: ({ form, page, cancelToken, isLoading, httpType }) => {
console.log(form, httpType);
let GroupTable: IFitsTableGroup[] = []
let TableList: any[] = []
let ItemCount = 0
return new Promise(resolve => {
// 如果是接口请求，写以下代码即可
/**
getMedicalQualityList(Object.assign({}, queryForm.value, form), page, cancelToken, isLoading).then(res => {
if (res.RetCode === ResultEnum.SUCCESS) {
resolve({
result: res.ReturnData
})
} else {
reject(res.Message)
}
})
*/
if (httpType === "All") {
if (form.GroupCondition === "") {
TableList = [
{ age: "18", sex: "男", name: "张三" },
{ age: "60", sex: "女", name: "李四" },
{ age: "99", sex: "男", name: "马五" },
]
ItemCount = 3
} else if (form.GroupCondition === "sex") {
GroupTable = [
{
ID: "1",
NAME: "男",
DataSource: {
ItemCount: 2,
GroupList: [{ age: "18", sex: "男", name: "张三" }, { age: "99", sex: "男", name: "马五" }]
}
},
{
ID: "2",
NAME: "女",
DataSource: { ItemCount: 1, GroupList: [{ age: "60", sex: "女", name: "李四" }] }
},
]
ItemCount = 2
} else {
GroupTable = [
{
ID: "1",
NAME: "18",
DataSource: {
ItemCount: 2,
GroupList: [{ age: "18", sex: "男", name: "张三" }, { age: "18", sex: "男", name: "张三2" }]
}
},
{ ID: "2", NAME: "20", DataSource: { ItemCount: 1, GroupList: [{ age: "20", sex: "女", name: "李四" }] } },
{ ID: "3", NAME: "60", DataSource: { ItemCount: 1, GroupList: [{ age: "60", sex: "女", name: "李四22" }] } },
]
ItemCount = 3
}
resolve({
result: {
GroupTable,
ItemCount,
TableList
}
})
}
})
}
},
groupConditions: {
defaultChecked: "age",
conditions: [
{ name: "按年龄", value: "age" },
{ name: "按性别", value: "sex" },
]
},
}),
})
const { config } = toRefs(state)
const table = ref()
</script>
<style lang="scss" scoped>
.base-group-table {
height: 400px;
}
</style>```# 插槽
可通过插槽去重写表格单元格的内容（插槽名是字段名），另外还提供了额外的插槽：query表格查询条件插槽、noData暂无数据插槽、right组头右侧插槽、groupName组名插槽、expand展开行插槽。
<template>
<div class="base-group-table">
<!-- 现在这里没用到自定义列，到时候想和框架的查询兼容，还需要等到时候修改 -->
<fits-table-group ref="table" :config="config">
<template #age="scope">
<div>{{ scope.row.age }}岁</div>
</template>
</fits-table-group>
</div>
</template>
<script lang="ts" setup name="QualityControl">
import { reactive, ref, toRefs } from "vue";
import { FitsTableGroup } from '@/fits-components';
import { IFitsTableGroup, FitsTableGroupProps } from '@/fits-components/type'
const state = reactive<{ config: FitsTableGroupProps }>({
config: new FitsTableGroupProps({
headers: [
{ title: "年龄", field: "age" },
{ title: "性别", field: "sex" },
{ title: "姓名", field: "name" },
],
ajax: {
query: ({ form, page, cancelToken, isLoading, httpType }) => {
console.log(form, httpType);
let GroupTable: IFitsTableGroup[] = []
let TableList: any[] = []
let ItemCount = 0
return new Promise(resolve => {
// 如果是接口请求，写以下代码即可
/**
getMedicalQualityList(Object.assign({}, queryForm.value, form), page, cancelToken, isLoading).then(res => {
if (res.RetCode === ResultEnum.SUCCESS) {
resolve({
result: res.ReturnData
})
} else {
reject(res.Message)
}
})
*/
if (httpType === "All") {
if (form.GroupCondition === "") {
TableList = [
{ age: "18", sex: "男", name: "张三" },
{ age: "60", sex: "女", name: "李四" },
{ age: "99", sex: "男", name: "马五" },
]
ItemCount = 3
} else if (form.GroupCondition === "sex") {
GroupTable = [
{
ID: "1",
NAME: "男",
DataSource: {
ItemCount: 2,
GroupList: [{ age: "18", sex: "男", name: "张三" }, { age: "99", sex: "男", name: "马五" }]
}
},
{
ID: "2",
NAME: "女",
DataSource: { ItemCount: 1, GroupList: [{ age: "60", sex: "女", name: "李四" }] }
},
]
ItemCount = 2
} else {
GroupTable = [
{
ID: "1",
NAME: "18",
DataSource: {
ItemCount: 2,
GroupList: [{ age: "18", sex: "男", name: "张三" }, { age: "18", sex: "男", name: "张三2" }]
}
},
{ ID: "2", NAME: "20", DataSource: { ItemCount: 1, GroupList: [{ age: "20", sex: "女", name: "李四" }] } },
{ ID: "3", NAME: "60", DataSource: { ItemCount: 1, GroupList: [{ age: "60", sex: "女", name: "李四22" }] } },
]
ItemCount = 3
}
resolve({
result: {
GroupTable,
ItemCount,
TableList
}
})
}
})
}
},
groupConditions: {
defaultChecked: "age",
conditions: [
{ name: "按年龄", value: "age" },
{ name: "按性别", value: "sex" },
]
},
}),
})
const { config } = toRefs(state)
const table = ref()
</script>
<style lang="scss" scoped>
.base-group-table {
height: 400px;
}
</style>```# 默认展开
通过设置expandGroupsNum属性表示默认展开多少个分组，默认展开的分组第一次请求时会返回表格数据，其余分组表格的数据通过分段请求返回（会在组头开启loading图标）。但expandGroupsNum属性的值必须大于1（后端规定的）。
<template>
<div class="base-group-table">
<!-- 现在这里没用到自定义列，到时候想和框架的查询兼容，还需要等到时候修改 -->
<fits-table-group ref="table" :config="config" />
</div>
</template>
<script lang="ts" setup name="QualityControl">
import { reactive, ref, toRefs } from "vue";
import { FitsTableGroup } from '@/fits-components';
import { IFitsTableGroup, FitsTableGroupProps } from '@/fits-components/type'
const state = reactive<{ config: FitsTableGroupProps }>({
config: new FitsTableGroupProps({
headers: [
{ title: "年龄", field: "age" },
{ title: "性别", field: "sex" },
{ title: "姓名", field: "name" },
],
ajax: {
query: ({ form, page, cancelToken, isLoading, httpType }) => {
console.log(form, httpType);
let GroupTable: IFitsTableGroup[] = []
let TableList: any[] = []
let ItemCount = 0
return new Promise(resolve => {
// 如果是接口请求，写以下代码即可
/**
getMedicalQualityList(Object.assign({}, queryForm.value, form), page, cancelToken, isLoading).then(res => {
if (res.RetCode === ResultEnum.SUCCESS) {
resolve({
result: res.ReturnData
})
} else {
reject(res.Message)
}
})
*/
if (httpType === "All") {
if (form.GroupCondition === "") {
TableList = [
{ age: "18", sex: "男", name: "张三" },
{ age: "60", sex: "女", name: "李四" },
{ age: "99", sex: "男", name: "马五" },
]
ItemCount = 3
} else if (form.GroupCondition === "sex") {
GroupTable = [
{
ID: "1",
NAME: "男",
DataSource: {
ItemCount: 2,
GroupList: [{ age: "18", sex: "男", name: "张三" }, { age: "99", sex: "男", name: "马五" }]
}
},
{
ID: "2",
NAME: "女",
DataSource: { ItemCount: 1, GroupList: [{ age: "60", sex: "女", name: "李四" }] }
},
]
ItemCount = 2
} else {
GroupTable = [
{
ID: "1",
NAME: "18",
DataSource: {
ItemCount: 2,
GroupList: [{ age: "18", sex: "男", name: "张三" }, { age: "18", sex: "男", name: "张三2" }]
}
},
{ ID: "2", NAME: "10", DataSource: { ItemCount: 1, GroupList: [] } },
{ ID: "3", NAME: "20", DataSource: { ItemCount: 1, GroupList: [] } },
{ ID: "4", NAME: "30", DataSource: { ItemCount: 1, GroupList: [] } },
{ ID: "5", NAME: "40", DataSource: { ItemCount: 1, GroupList: [] } },
]
ItemCount = 5
}
resolve({
result: {
GroupTable,
ItemCount,
TableList
}
})
} else if (httpType === "Fragment") {
const ids = form.GroupValue.split(",") || []
ids.forEach((id: string, index: number) => {
GroupTable.push({
ID: id,
NAME: "",
DataSource: {
ItemCount: 0,
GroupList: [{ age: index + 1 + "0", sex: "男", name: "张三12" + index }]
}
})
})
// 模拟分段请求的loading
setTimeout(() => {
resolve({
result: {
GroupTable,
ItemCount,
TableList
}
})
}, 3000);
}
})
}
},
groupConditions: {
defaultChecked: "age",
conditions: [
{ name: "按年龄", value: "age" },
{ name: "按性别", value: "sex" },
]
},
expandGroupsNum: 1
}),
})
const { config } = toRefs(state)
const table = ref()
</script>
<style lang="scss" scoped>
.base-group-table {
height: 400px;
}
</style>```# 分段请求
如果当前页的分组表格个数大于默认展开分组表格的个数，剩余的分组表格会开启分段请求（会在组头开启loading图标）。可以通过requestGroupNums属性设置多少个表格为一组去分段请求。
<template>
<div class="base-group-table">
<!-- 现在这里没用到自定义列，到时候想和框架的查询兼容，还需要等到时候修改 -->
<fits-table-group ref="table" :config="config" />
</div>
</template>
<script lang="ts" setup name="QualityControl">
import { reactive, ref, toRefs } from "vue";
import { FitsTableGroup } from '@/fits-components';
import { IFitsTableGroup, FitsTableGroupProps } from '@/fits-components/type'
const state = reactive<{ config: FitsTableGroupProps }>({
config: new FitsTableGroupProps({
headers: [
{ title: "年龄", field: "age" },
{ title: "性别", field: "sex" },
{ title: "姓名", field: "name" },
],
ajax: {
query: ({ form, page, cancelToken, isLoading, httpType }) => {
console.log(form, httpType);
let GroupTable: IFitsTableGroup[] = []
let TableList: any[] = []
let ItemCount = 0
return new Promise(resolve => {
// 如果是接口请求，写以下代码即可
/**
getMedicalQualityList(Object.assign({}, queryForm.value, form), page, cancelToken, isLoading).then(res => {
if (res.RetCode === ResultEnum.SUCCESS) {
resolve({
result: res.ReturnData
})
} else {
reject(res.Message)
}
})
*/
if (httpType === "All") {
if (form.GroupCondition === "") {
TableList = [
{ age: "18", sex: "男", name: "张三" },
{ age: "60", sex: "女", name: "李四" },
{ age: "99", sex: "男", name: "马五" },
]
ItemCount = 3
} else if (form.GroupCondition === "sex") {
GroupTable = [
{
ID: "1",
NAME: "男",
DataSource: {
ItemCount: 2,
GroupList: [{ age: "18", sex: "男", name: "张三" }, { age: "99", sex: "男", name: "马五" }]
}
},
{
ID: "2",
NAME: "女",
DataSource: { ItemCount: 1, GroupList: [{ age: "60", sex: "女", name: "李四" }] }
},
]
ItemCount = 2
} else {
GroupTable = [
{
ID: "1",
NAME: "18",
DataSource: {
ItemCount: 2,
GroupList: [{ age: "18", sex: "男", name: "张三" }, { age: "18", sex: "男", name: "张三2" }]
}
},
{ ID: "2", NAME: "10", DataSource: { ItemCount: 1, GroupList: [] } },
{ ID: "3", NAME: "20", DataSource: { ItemCount: 1, GroupList: [] } },
{ ID: "4", NAME: "30", DataSource: { ItemCount: 1, GroupList: [] } },
{ ID: "5", NAME: "40", DataSource: { ItemCount: 1, GroupList: [] } },
]
ItemCount = 5
}
resolve({
result: {
GroupTable,
ItemCount,
TableList
}
})
} else if (httpType === "Fragment") {
const ids = form.GroupValue.split(",") || []
ids.forEach((id: string, index: number) => {
GroupTable.push({
ID: id,
NAME: "",
DataSource: {
ItemCount: 0,
GroupList: [{ age: index + 1 + "0", sex: "男", name: "张三12" + index }]
}
})
})
// 模拟分段请求的loading
setTimeout(() => {
resolve({
result: {
GroupTable,
ItemCount,
TableList
}
})
}, 3000);
}
})
}
},
groupConditions: {
defaultChecked: "age",
conditions: [
{ name: "按年龄", value: "age" },
{ name: "按性别", value: "sex" },
]
},
expandGroupsNum: 1,
requestGroupNums: 2
}),
})
const { config } = toRefs(state)
const table = ref()
</script>
<style lang="scss" scoped>
.base-group-table {
height: 400px;
}
</style>```# 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| headers | 表头配置（与vxe-columns属性一致） | IFitsTableHeadersopen in new window[] | 必填 | [] |
| ajax | checkbox-group的配置 | CheckboxGroupPropsopen in new window | 必填 | - |
| groupConditions | 分组条件配置 | IFitsGroupConditionConfig | 非必填 | { conditions: [] } |
| expandGroupsNum | 默认展开多少个分组（必须大于0，后端规定） | number | 非必填 | 3 |
| requestGroupNums | 多少个表格为一组去分段请求（解决数据量大响应时间超长的问题） | number | 非必填 | 4 |
# 方法（通过分组表格组件实例调用）
| 方法名 | 说明 | 需要参数类型 | 返回数据 |
|---|---|---|---|
| fetchTableData | 主动请求一次接口 | - | - |
| getCheckGroupsData | 获取勾选的表格 | - | { groupID: string, groupName: string, checkedData: any[] }[] |
| updateColumns | 更新表格列配置 | ICustomColumnsConfig[] | - |
# 插槽
| 插槽名 | 说明 | 插槽作用域 |
|---|---|---|
| - （字段名） | 自定义列的内容插槽 | { row, groupIndex, index } |
| query | 表格查询条件插槽 | - |
| noData | 暂无数据插槽 | - |
| right | 组头右侧插槽 | { groupData } |
| groupName | 组名插槽 | { groupName } |
| expand | 展开行插槽 | { row, index } |
Loading...