Maxwell_YCM
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(grid): [grid] change grid x-design theme (#1984) 

* fix(pager): change x-design theme

* fix(grid): change grid x-design theme

* fix(grid): change grid x-design theme
This commit is contained in:
gimmyhehe 2024-08-26 14:22:56 +08:00 committed by GitHub
parent 58f7654c29
commit 93f956a576
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
130 changed files with 468 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/sites/demos/apis/grid.js
View File

@ -4082,7 +4082,7 @@ interface IPagerConfig {
pageSize: number
pageSizes: number[]
total: number
// 分页组件布局默认值：'total, prev, pager, next, jumper, sizes'
// 分页组件布局默认值：'total, prev, pager, next, jumper'
layout: string
}
}
@ -4435,7 +4435,7 @@ interface IPageChangeArgs {
$grid: Component
// 当前页码
currentPage: number
//当前分页组件布局信息 'total, prev, pager, next, jumper, sizes'
//当前分页组件布局信息 'total, prev, pager, next, jumper'
layout: string
// 当前每页显示条数
pageSize: number

2
examples/sites/demos/apis/transfer.js
View File

@ -440,7 +440,7 @@ interface IPagerOp {
currentPage: number
pageSize: number
pageSizes: number[]
layout: string // 分页组件布局默认值：'total, prev, pager, next, jumper, sizes'
layout: string // 分页组件布局默认值：'total, prev, pager, next, jumper'
}
}
`

2
examples/sites/demos/mobile-first/app/grid/basic-usage.vue
View File

@ -146,7 +146,7 @@ export default {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/mobile-first/app/grid/height-auto.vue
View File

@ -77,7 +77,7 @@ export default {
pageSize: 60,
pageSizes: [5, 10, 60],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/custom/ordercolumn-remote-composition-api.vue
View File

@ -31,7 +31,7 @@ const pager = ref({
pageSize: 3,
total: 0,
pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/custom/ordercolumn-remote.vue
View File

@ -39,7 +39,7 @@ export default {
pageSize: 3,
total: 0,
pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/custom/page-size-composition-api.vue
View File

@ -24,7 +24,7 @@ const pager = ref({
pageSize: 10,
total: 0,
pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/custom/page-size.vue
View File

@ -31,7 +31,7 @@ export default {
pageSize: 10,
total: 0,
pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/custom/reset-method-composition-api.vue
View File

@ -29,7 +29,7 @@ const pager = ref({
pageSize: 10,
total: 0,
pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/custom/reset-method.vue
View File

@ -65,7 +65,7 @@ export default {
pageSize: 10,
total: 0,
pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/custom/server-storage-composition-api.vue
View File

@ -29,7 +29,7 @@ const pager = ref({
pageSize: 3,
total: 0,
pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/custom/server-storage.vue
View File

@ -36,7 +36,7 @@ export default {
pageSize: 3,
total: 0,
pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/custom/sort-type-composition-api.vue
View File

@ -24,7 +24,7 @@ const pager = ref({
pageSize: 10,
total: 0,
pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/custom/sort-type.vue
View File

@ -31,7 +31,7 @@ export default {
pageSize: 10,
total: 0,
pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/data-source/auto-load-composition-api.vue
View File

@ -21,7 +21,7 @@ const pagerConfig = ref({
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/data-source/auto-load.vue
View File

@ -27,7 +27,7 @@ export default {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering-composition-api.vue
View File

@ -24,7 +24,7 @@ const pagerConfig = ref({
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering.vue
View File

@ -30,7 +30,7 @@ export default {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch-composition-api.vue
View File

@ -23,7 +23,7 @@ const pagerConfig = ref({
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch.vue
View File

@ -29,7 +29,7 @@ export default {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/data-source/request-service-composition-api.vue
View File

@ -24,7 +24,7 @@ const pagerConfig = ref({
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/data-source/request-service.vue
View File

@ -31,7 +31,7 @@ export default {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns-composition-api.vue
View File

@ -38,7 +38,7 @@ const pagerConfig = ref({
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const value = ref([new Date(2020, 1), new Date()])

2
examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.vue
View File

@ -45,7 +45,7 @@ export default {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
value: [new Date(2020, 1), new Date()],

1
examples/sites/demos/pc/app/grid/empty/empty-data-default-tip-composition-api.vue
View File

@ -1,6 +1,5 @@
<template>
<tiny-grid :data="tableData" height="300">
<tiny-grid-column type="index" width="5%"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>

1
examples/sites/demos/pc/app/grid/empty/empty-data-default-tip.vue
View File

@ -1,6 +1,5 @@
<template>
<tiny-grid :data="tableData" height="300">
<tiny-grid-column type="index" width="5%"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>

2
examples/sites/demos/pc/app/grid/event/page-before-change-event-composition-api.vue
View File

@ -27,7 +27,7 @@ const pager = ref({
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/event/page-before-change-event.vue
View File

@ -33,7 +33,7 @@ export default {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/event/page-change-event-composition-api.vue
View File

@ -21,7 +21,7 @@ const pager = ref({
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/event/page-change-event.vue
View File

@ -27,7 +27,7 @@ export default {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/faq/unbalanced-composition-api.vue
View File

@ -2,10 +2,10 @@
<tiny-grid
:data="tableData"
border
table-layout="auto"
show-overflow
show-header-overflow
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
column-width="100"
>
<tiny-grid-column title="操作" header-align="center">
<tiny-grid-column type="index" width="40"></tiny-grid-column>

2
examples/sites/demos/pc/app/grid/faq/unbalanced.spec.js
View File

@ -8,5 +8,5 @@ test('常见问题--表格列头与单元格错位测试', async ({ page }) => {
const { x } = await firstThDom.boundingBox()
const { x: x1 } = await firstTdDom.boundingBox()
await expect(x).not.toEqual(x1)
await expect(x).toEqual(x1)
})

2
examples/sites/demos/pc/app/grid/faq/unbalanced.vue
View File

@ -2,10 +2,10 @@
<tiny-grid
:data="tableData"
border
table-layout="auto"
show-overflow
show-header-overflow
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
column-width="100"
>
<tiny-grid-column title="操作" header-align="center">
<tiny-grid-column type="index" width="40"></tiny-grid-column>

2
examples/sites/demos/pc/app/grid/filter/server-filter-composition-api.vue
View File

@ -20,7 +20,7 @@ const pager = ref({
pageSize: 5,
total: 0,
pageSizes: [5, 10, 15, 20],
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const cityFilter = ref({

2
examples/sites/demos/pc/app/grid/filter/server-filter-default-composition-api.vue
View File

@ -23,7 +23,7 @@ const pager = ref({
pageSize: 5,
total: 0,
pageSizes: [5, 10, 15, 20],
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})

2
examples/sites/demos/pc/app/grid/filter/server-filter-default.vue
View File

@ -30,7 +30,7 @@ export default {
pageSize: 5,
total: 0,
pageSizes: [5, 10, 15, 20],
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
cityFilter: {

2
examples/sites/demos/pc/app/grid/filter/server-filter.vue
View File

@ -26,7 +26,7 @@ export default {
pageSize: 5,
total: 0,
pageSizes: [5, 10, 15, 20],
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
cityFilter: {

13
examples/sites/demos/pc/app/grid/header/custom-grid-header-composition-api.vue
View File

@ -2,7 +2,7 @@
<tiny-grid :data="tableData" resizable :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
<tiny-grid-column title="操作" header-align="center">
<tiny-grid-column type="index" width="40"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column type="selection" width="48"></tiny-grid-column>
<tiny-grid-column :renderer="rendererCellOperate" width="100"></tiny-grid-column>
</tiny-grid-column>
<tiny-grid-column :title="renderHeaderDescription" header-align="center">
@ -100,7 +100,7 @@ const options = ref([
{ label: '华南区', value: '华南区' }
])
function renderHeaderDescription(h) {
function renderHeaderDescription() {
return (
<span>
{' '}
@ -110,7 +110,7 @@ function renderHeaderDescription(h) {
)
}
function renderHeaderRelation(h) {
function renderHeaderRelation() {
return (
<span>
<IconVersiontree />
@ -118,8 +118,7 @@ function renderHeaderRelation(h) {
)
}
// eslint-disable-next-line
function renderHeaderArea(h) {
function renderHeaderArea() {
return (
<span>
<IconMarkOn />
@ -128,7 +127,7 @@ function renderHeaderArea(h) {
)
}
function renderHeaderAddress(h) {
function renderHeaderAddress() {
return (
<span>
<IconUser />
@ -137,7 +136,7 @@ function renderHeaderAddress(h) {
)
}
function rendererCellOperate(h) {
function rendererCellOperate() {
return (
<div style="text-align: center; font-size: 16px;">
<IconHelpful />

16
examples/sites/demos/pc/app/grid/header/custom-grid-header.vue
View File

@ -2,7 +2,7 @@
<tiny-grid :data="tableData" resizable :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
<tiny-grid-column title="操作" header-align="center">
<tiny-grid-column type="index" width="40"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column type="selection" width="48"></tiny-grid-column>
<tiny-grid-column :renderer="rendererCellOperate" width="100"></tiny-grid-column>
</tiny-grid-column>
<tiny-grid-column :title="renderHeaderDescription" header-align="center">
@ -108,8 +108,7 @@ export default {
}
},
methods: {
// eslint-disable-next-line
renderHeaderDescription(h) {
renderHeaderDescription() {
const IconAdministrator = this.IconAdministrator
return (
@ -120,7 +119,7 @@ export default {
</span>
)
},
renderHeaderRelation(h) {
renderHeaderRelation() {
const IconVersiontree = this.IconVersiontree
return (
@ -129,7 +128,6 @@ export default {
</span>
)
},
// eslint-disable-next-line
renderHeaderArea(h) {
const IconMarkOn = this.IconMarkOn
@ -140,8 +138,8 @@ export default {
</span>
)
},
// eslint-disable-next-line
renderHeaderAddress(h) {
renderHeaderAddress() {
const IconUser = this.IconUser
return (
@ -151,8 +149,8 @@ export default {
</span>
)
},
// eslint-disable-next-line
rendererCellOperate(h) {
rendererCellOperate() {
const IconAssociation = this.IconAssociation
const IconHelpful = this.IconHelpful

2
examples/sites/demos/pc/app/grid/header/many-header-switching-composition-api.vue
View File

@ -6,7 +6,7 @@
<tiny-grid :data="tableData" resizable :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
<tiny-grid-column title="操作" header-align="center">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="40" v-if="flag"></tiny-grid-column>
<tiny-grid-column type="selection" width="48" v-if="flag"></tiny-grid-column>
<tiny-grid-column :renderer="rendererCellOperate" width="100" v-if="flag"></tiny-grid-column>
</tiny-grid-column>
<tiny-grid-column :title="renderHeaderDescription" header-align="center">

2
examples/sites/demos/pc/app/grid/header/many-header-switching.vue
View File

@ -6,7 +6,7 @@
<tiny-grid :data="tableData" resizable :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
<tiny-grid-column title="操作" header-align="center">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="40" v-if="flag"></tiny-grid-column>
<tiny-grid-column type="selection" width="48" v-if="flag"></tiny-grid-column>
<tiny-grid-column :renderer="rendererCellOperate" width="100" v-if="flag"></tiny-grid-column>
</tiny-grid-column>
<tiny-grid-column :title="renderHeaderDescription" header-align="center">

2
examples/sites/demos/pc/app/grid/header/slot-header-composition-api.vue
View File

@ -3,7 +3,7 @@
<tiny-grid-column header-align="center">
<template #header>操作</template>
<tiny-grid-column type="index" width="40"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column type="selection" width="48"></tiny-grid-column>
<tiny-grid-column width="100" align="center">
<tiny-icon-helpful style="text-align: center; font-size: 16px; fill"></tiny-icon-helpful>
&nbsp;&nbsp;

2
examples/sites/demos/pc/app/grid/header/slot-header.vue
View File

@ -3,7 +3,7 @@
<tiny-grid-column header-align="center">
<template #header>操作</template>
<tiny-grid-column type="index" width="40"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column type="selection" width="48"></tiny-grid-column>
<tiny-grid-column width="100" align="center">
<icon-helpful style="text-align: center; font-size: 16px; fill"></icon-helpful>
&nbsp;&nbsp;

2
examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue
View File

@ -183,7 +183,7 @@ const pagerConfig = ref({
pageSize: 3,
pageSizes: [3, 5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = { api: getData }

2
examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue
View File

@ -171,7 +171,7 @@ export default {
pageSize: 3,
pageSizes: [3, 5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: { api: this.getData }

4
examples/sites/demos/pc/app/grid/large-data/full-data-loading.spec.js
View File

@ -6,11 +6,11 @@ test('全量加载', async ({ page }) => {
await page.locator('.tiny-grid__body').hover()
// 先滚动1000px
await page.mouse.wheel(0, 1000)
await expect(page.getByRole('cell', { name: '39' })).toBeVisible()
await expect(page.getByRole('cell', { name: '33' })).toBeVisible()
await page.waitForTimeout(500)
await page.locator('.tiny-grid__body').hover()
// 先滚动4000px
await page.mouse.wheel(0, 5000)
await page.waitForTimeout(200)
await expect(page.getByRole('cell', { name: '218' })).toBeVisible()
await expect(page.getByRole('cell', { name: '175' })).toBeVisible()
})

18
examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row-composition-api.vue
View File

@ -3,8 +3,7 @@
<template #toolbar>
<tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar>
</template>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="radio" width="60"></tiny-grid-column>
<tiny-grid-column type="radio" width="40"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
@ -85,3 +84,18 @@ function toolbarButtonClickEvent({ code }) {
}
}
</script>
<style scoped lang="less">
:deep(.tiny-grid) {
&-header__column,
&-body__column {
&.col__radio {
padding: 0 8px 0 16px;
& + th,
+ td {
padding-left: 0;
}
}
}
}
</style>

18
examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row.vue
View File

@ -3,8 +3,7 @@
<template #toolbar>
<tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar>
</template>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="radio" width="60"></tiny-grid-column>
<tiny-grid-column type="radio" width="40"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
@ -95,3 +94,18 @@ export default {
}
}
</script>
<style scoped lang="less">
:deep(.tiny-grid) {
&-header__column,
&-body__column {
&.col__radio {
padding: 0 8px 0 16px;
& + th,
+ td {
padding-left: 0;
}
}
}
}
</style>

17
examples/sites/demos/pc/app/grid/operation-column/custom-operation-column-composition-api.vue
View File

@ -1,7 +1,6 @@
<template>
<tiny-grid :data="tableData">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
@ -90,4 +89,18 @@ function clickHandler(row) {
.demo-custom-column svg:not(:last-child) {
margin-right: 8px;
}
:deep(.tiny-grid) {
&-header__column,
&-body__column {
&.col__selection,
&.col__radio {
padding: 0 8px 0 16px;
& + th,
+ td {
padding-left: 0;
}
}
}
}
</style>

2
examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.spec.js
View File

@ -8,7 +8,7 @@ test('自定义操作列', async ({ page }) => {
await expect(
page
.getByRole('row', {
name: '1 GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
name: 'GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
})
.getByRole('img')
.nth(1)

19
examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.vue
View File

@ -1,7 +1,6 @@
<template>
<tiny-grid :data="tableData">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
@ -84,7 +83,7 @@ export default {
}
</script>
<style scoped>
<style scoped lang="less">
.demo-custom-column {
font-size: 0;
}
@ -99,4 +98,18 @@ export default {
.demo-custom-column svg:not(:last-child) {
margin-right: 8px;
}
:deep(.tiny-grid) {
&-header__column,
&-body__column {
&.col__selection,
&.col__radio {
padding: 0 8px 0 16px;
& + th,
+ td {
padding-left: 0;
}
}
}
}
</style>

7
examples/sites/demos/pc/app/grid/operation-column/dropdown-composition-api.vue
View File

@ -1,9 +1,8 @@
<template>
<tiny-grid ref="gridRef" :data="tableData">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="80">
<template #dropdown>
<tiny-dropdown class="ml-6" title="" @item-click="itemClick">
<tiny-dropdown class="ml-12" title="" @item-click="itemClick">
<template #dropdown>
<tiny-dropdown-menu placement="top">
<tiny-dropdown-item :item-data="{ name: 'selectCurPage' }"> 选择本页数据 </tiny-dropdown-item>
@ -89,7 +88,7 @@ function itemClick({ itemData }) {
</script>
<style scoped>
.ml-6 {
left: 6px;
.ml-12 {
left: 12px;
}
</style>

7
examples/sites/demos/pc/app/grid/operation-column/dropdown.vue
View File

@ -1,9 +1,8 @@
<template>
<tiny-grid ref="grid" :data="tableData">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="80">
<template #dropdown>
<tiny-dropdown class="ml-6" title="" @item-click="itemClick">
<tiny-dropdown class="ml-12" title="" @item-click="itemClick">
<template #dropdown>
<tiny-dropdown-menu placement="top">
<tiny-dropdown-item :item-data="{ name: 'selectCurPage' }"> 选择本页数据 </tiny-dropdown-item>
@ -95,7 +94,7 @@ export default {
</script>
<style scoped>
.ml-6 {
left: 6px;
.ml-12 {
left: 12px;
}
</style>

21
examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve-composition-api.vue
View File

@ -11,8 +11,7 @@
@select-change="selectedDevices"
:select-config="tableSelectConfigData"
>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
@ -47,7 +46,7 @@ const pagerConfig = ref({
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({
@ -159,3 +158,19 @@ function selectedDevices({ $table }) {
})
}
</script>
<style scoped lang="less">
:deep(.tiny-grid) {
&-header__column,
&-body__column {
&.col__selection,
&.col__radio {
padding: 0 8px 0 16px;
& + th,
+ td {
padding-left: 0;
}
}
}
}
</style>

4
examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve.spec.js
View File

@ -5,7 +5,7 @@ test('翻页后保留选中状态', async ({ page }) => {
await page.goto('grid-operation-column#operation-column-grid-pager-reserve')
await page
.getByRole('row', {
name: '1 GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
name: 'GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
})
.locator('path')
.first()
@ -13,7 +13,7 @@ test('翻页后保留选中状态', async ({ page }) => {
await page.getByRole('list').getByText('2').click()
await page
.getByRole('row', {
name: '8 西安门福德宝网络技术YX公司 华东区 厦门 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
name: '西安门福德宝网络技术YX公司 华东区 厦门 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
})
.locator('path')
.first()

21
examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve.vue
View File

@ -11,8 +11,7 @@
@select-change="selectedDevices"
:select-config="tableSelectConfigData"
>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
@ -47,7 +46,7 @@ export default {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {
@ -158,3 +157,19 @@ export default {
}
}
</script>
<style scoped lang="less">
:deep(.tiny-grid) {
&-header__column,
&-body__column {
&.col__selection,
&.col__radio {
padding: 0 8px 0 16px;
& + th,
+ td {
padding-left: 0;
}
}
}
}
</style>

1
examples/sites/demos/pc/app/grid/operation-column/header-select-disabled-composition-api.vue
View File

@ -1,6 +1,5 @@
<template>
<tiny-grid ref="mytableRef" :select-config="selectConfig" :data="tableData">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>

1
examples/sites/demos/pc/app/grid/operation-column/header-select-disabled.vue
View File

@ -1,6 +1,5 @@
<template>
<tiny-grid ref="mytable" :select-config="selectConfig" :data="tableData">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>

1
examples/sites/demos/pc/app/grid/operation-column/radio-config-composition-api.vue
View File

@ -1,6 +1,5 @@
<template>
<tiny-grid ref="mytableRef" :radio-config="radioConfigData" :data="tableData">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="radio" width="100"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>

1
examples/sites/demos/pc/app/grid/operation-column/radio-config.vue
View File

@ -1,6 +1,5 @@
<template>
<tiny-grid ref="mytable" :radio-config="radioConfigData" :data="tableData">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="radio" width="100"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>

5
examples/sites/demos/pc/app/grid/operation-column/refresh-grid-composition-api.vue
View File

@ -5,8 +5,7 @@
<template #toolbar>
<tiny-grid-toolbar refresh></tiny-grid-toolbar>
</template>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
@ -33,7 +32,7 @@ const pagerConfig = ref({
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

17
examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue
View File

@ -8,7 +8,6 @@
border
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column
@ -119,3 +118,19 @@ const checkboxEdit = (h, { row, column }) => {
)
}
</script>
<style scoped lang="less">
:deep(.tiny-grid) {
&-header__column,
&-body__column {
&.col__selection,
&.col__radio {
padding: 0 8px 0 16px;
& + th,
+ td {
padding-left: 0;
}
}
}
}
</style>

20
examples/sites/demos/pc/app/grid/operation-column/selection-config.vue
View File

@ -5,11 +5,9 @@
ref="grid"
:select-config="selectConfig"
highlight-current-row
border
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column
field="createdDate"
@ -128,3 +126,19 @@ export default {
}
}
</script>
<style scoped lang="less">
:deep(.tiny-grid) {
&-header__column,
&-body__column {
&.col__selection,
&.col__radio {
padding: 0 8px 0 16px;
& + th,
+ td {
padding-left: 0;
}
}
}
}
</style>

20
examples/sites/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue
View File

@ -3,8 +3,8 @@
<template #toolbar>
<tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar>
</template>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
@ -108,3 +108,19 @@ function toolbarButtonClickEvent({ code, $grid }) {
}
}
</script>
<style scoped lang="less">
:deep(.tiny-grid) {
&-header__column,
&-body__column {
&.col__selection,
&.col__radio {
padding: 0 8px 0 16px;
& + th,
+ td {
padding-left: 0;
}
}
}
}
</style>

20
examples/sites/demos/pc/app/grid/operation-column/selection-operation.vue
View File

@ -3,8 +3,8 @@
<template #toolbar>
<tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar>
</template>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
@ -119,3 +119,19 @@ export default {
}
}
</script>
<style scoped lang="less">
:deep(.tiny-grid) {
&-header__column,
&-body__column {
&.col__selection,
&.col__radio {
padding: 0 8px 0 16px;
& + th,
+ td {
padding-left: 0;
}
}
}
}
</style>

2
examples/sites/demos/pc/app/grid/pager/inner-default-pager-composition-api.vue
View File

@ -21,7 +21,7 @@ const pagerConfig = ref({
pageSizes: [5, 10],
total: 0,
align: 'right', // 可选值：['left', 'center', 'right']
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/pager/inner-default-pager.vue
View File

@ -27,7 +27,7 @@ export default {
pageSizes: [5, 10],
total: 0,
align: 'right', // 可选值：['left', 'center', 'right']
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/pager/inner-pager-composition-api.vue
View File

@ -21,7 +21,7 @@ const pagerConfig = ref({
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/pager/inner-pager.vue
View File

@ -27,7 +27,7 @@ export default {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/pager/pager-in-grid-composition-api.vue
View File

@ -30,7 +30,7 @@
:page-sizes="[5, 10, 20, 50]"
@current-change="currentChange"
@size-change="sizeChange"
layout="total, prev, pager, next, jumper, sizes"
layout="total, sizes, prev, pager, next, jumper"
></tiny-pager>
</div>
</template>

2
examples/sites/demos/pc/app/grid/pager/pager-in-grid.vue
View File

@ -30,7 +30,7 @@
:page-sizes="[5, 10, 20, 50]"
@current-change="currentChange"
@size-change="sizeChange"
layout="total, prev, pager, next, jumper, sizes"
layout="total, sizes, prev, pager, next, jumper"
></tiny-pager>
</div>
</template>

2
examples/sites/demos/pc/app/grid/pager/show-save-msg-composition-api.vue
View File

@ -29,7 +29,7 @@ const pagerConfig = ref({
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/pager/show-save-msg.vue
View File

@ -35,7 +35,7 @@ export default {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/renderer/async-colunm-render-composition-api.vue
View File

@ -40,7 +40,7 @@ const pagerConfig = ref({
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/renderer/async-colunm-render.vue
View File

@ -48,7 +48,7 @@ export default {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/serial-column/start-index-composition-api.vue
View File

@ -11,7 +11,7 @@
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
}"
>

2
examples/sites/demos/pc/app/grid/serial-column/start-index.vue
View File

@ -11,7 +11,7 @@
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
}"
>

2
examples/sites/demos/pc/app/grid/size/auto-height-composition-api.vue
View File

@ -30,7 +30,7 @@ const pagerConfig = ref({
pageSize: 10,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/size/auto-height.vue
View File

@ -37,7 +37,7 @@ export default {
pageSize: 10,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/size/column-width-composition-api.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-grid :column-width="200" :data="tableData">
<tiny-grid :column-width="250" :data="tableData">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>

6
examples/sites/demos/pc/app/grid/size/column-width.spec.js
View File

@ -5,9 +5,9 @@ test('设置所有列宽度', async ({ page }) => {
await page.goto('grid-size#size-column-width')
const { width: width1 } = await page.getByRole('cell', { name: '所属区域' }).boundingBox()
await expect(width1).toEqual(200)
await expect(width1).toEqual(250)
const { width: width2 } = await page.getByRole('cell', { name: '地址' }).boundingBox()
await expect(width2).toEqual(200)
await expect(width2).toEqual(250)
const { width: width3 } = await page.getByRole('cell', { name: '公司简介' }).boundingBox()
await expect(width3).toEqual(200)
await expect(width3).toEqual(250)
})

2
examples/sites/demos/pc/app/grid/size/column-width.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-grid :column-width="200" :data="tableData">
<tiny-grid :column-width="250" :data="tableData">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>

25
examples/sites/demos/pc/app/grid/size/grid-size-composition-api.vue
View File

@ -2,8 +2,7 @@
<tiny-tabs v-model="activeName" tab-style="card">
<tiny-tab-item title="medium" name="medium">
<tiny-grid :data="tableData" size="medium" :auto-resize="true">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
@ -11,8 +10,7 @@
</tiny-tab-item>
<tiny-tab-item title="small" name="small">
<tiny-grid :data="tableData" size="small" :auto-resize="true">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
@ -20,8 +18,7 @@
</tiny-tab-item>
<tiny-tab-item title="mini" name="mini">
<tiny-grid :data="tableData" size="mini" :auto-resize="true">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
@ -103,3 +100,19 @@ const tableData = ref([
}
])
</script>
<style scoped lang="less">
:deep(.tiny-grid) {
&-header__column,
&-body__column {
&.col__selection,
&.col__radio {
padding: 0 8px 0 16px;
& + th,
+ td {
padding-left: 0;
}
}
}
}
</style>

25
examples/sites/demos/pc/app/grid/size/grid-size.vue
View File

@ -2,8 +2,7 @@
<tiny-tabs v-model="activeName" tab-style="card">
<tiny-tab-item title="medium" name="medium">
<tiny-grid :data="tableData" size="medium" :auto-resize="true">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
@ -11,8 +10,7 @@
</tiny-tab-item>
<tiny-tab-item title="small" name="small">
<tiny-grid :data="tableData" size="small" :auto-resize="true">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
@ -20,8 +18,7 @@
</tiny-tab-item>
<tiny-tab-item title="mini" name="mini">
<tiny-grid :data="tableData" size="mini" :auto-resize="true">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
@ -114,3 +111,19 @@ export default {
}
}
</script>
<style scoped lang="less">
:deep(.tiny-grid) {
&-header__column,
&-body__column {
&.col__selection,
&.col__radio {
padding: 0 8px 0 16px;
& + th,
+ td {
padding-left: 0;
}
}
}
}
</style>

2
examples/sites/demos/pc/app/grid/size/max-min-grid-height.spec.js
View File

@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
test('设置 maxHeight 最大高度', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-size#size-max-min-grid-height')
await expect(page.locator('.tiny-grid__body-wrapper').nth(0)).toHaveCSS('max-height', '172px')
await expect(page.locator('.tiny-grid__body-wrapper').nth(0)).toHaveCSS('max-height', '165px')
await expect(page.locator('.tiny-grid__body-wrapper').nth(1)).toHaveCSS('min-height', '300px')
})

2
examples/sites/demos/pc/app/grid/sort/server-sort-composition-api.vue
View File

@ -20,7 +20,7 @@ const pager = ref({
pageSize: 15,
total: 0,
pageSizes: [5, 10, 15, 20],
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/sort/server-sort.vue
View File

@ -26,7 +26,7 @@ export default {
pageSize: 15,
total: 0,
pageSizes: [5, 10, 15, 20],
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/toolbar/cancel-delete-composition-api.vue
View File

@ -39,7 +39,7 @@ const pagerConfig = ref({
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const fetchData = ref({

2
examples/sites/demos/pc/app/grid/toolbar/cancel-delete.vue
View File

@ -46,7 +46,7 @@ export default {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/toolbar/custom-toolbar-composition-api.vue
View File

@ -54,7 +54,7 @@ const pagerConfig = ref({
currentPage: 1,
pageSize: 10,
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
})
const options = ref([

2
examples/sites/demos/pc/app/grid/toolbar/custom-toolbar.vue
View File

@ -56,7 +56,7 @@ export default {
currentPage: 1,
pageSize: 10,
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
options: [

2
examples/sites/demos/pc/app/grid/toolbar/refresh-grid-composition-api.vue
View File

@ -30,7 +30,7 @@ const pagerConfig = {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
}

2
examples/sites/demos/pc/app/grid/toolbar/refresh-grid.vue
View File

@ -35,7 +35,7 @@ export default {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/toolbar/save-data-composition-api.vue
View File

@ -39,7 +39,7 @@ const pagerConfig = {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
}

2
examples/sites/demos/pc/app/grid/toolbar/save-data.vue
View File

@ -46,7 +46,7 @@ export default {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
fetchData: {

2
examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-composition-api.vue
View File

@ -48,7 +48,7 @@ const op = ref({
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
columns: [

2
examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots-composition-api.vue
View File

@ -56,7 +56,7 @@ const op = {
pageSize: 3,
pageSizes: [3, 5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
columns: [

2
examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots.vue
View File

@ -48,7 +48,7 @@ export default {
pageSize: 3,
pageSizes: [3, 5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
columns: [

2
examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config.vue
View File

@ -53,7 +53,7 @@ export default {
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
layout: 'total, sizes, prev, pager, next, jumper'
}
},
columns: [

18
examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion-composition-api.vue
View File

@ -7,7 +7,7 @@
</div>
<br />
<tiny-grid :data="tableData" ref="grid" :tree-config="{ children: 'children' }">
<tiny-grid-column type="selection" width="100"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
<tiny-grid-column field="area" title="区域"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
@ -136,3 +136,19 @@ const toggleTreeExpansion = () => {
grid.value.toggleTreeExpansion(tableData.value[1])
}
</script>
<style scoped lang="less">
:deep(.tiny-grid) {
&-header__column,
&-body__column {
&.col__selection,
&.col__radio {
padding: 0 8px 0 16px;
& + th,
+ td {
padding-left: 0;
}
}
}
}
</style>

Some files were not shown because too many files have changed in this diff Show More