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

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

@ -440,7 +440,7 @@ interface IPagerOp {
currentPage: number currentPage: number
pageSize: number pageSize: number
pageSizes: 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { fetchData: {

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

@ -77,7 +77,7 @@ export default {
pageSize: 60, pageSize: 60,
pageSizes: [5, 10, 60], pageSizes: [5, 10, 60],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { 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, pageSize: 3,
total: 0, total: 0,
pageSizes: [3, 5, 10, 20], pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ const fetchData = ref({

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

@ -39,7 +39,7 @@ export default {
pageSize: 3, pageSize: 3,
total: 0, total: 0,
pageSizes: [3, 5, 10, 20], pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { 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, pageSize: 10,
total: 0, total: 0,
pageSizes: [3, 5, 10, 20], pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ const fetchData = ref({

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

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

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

@ -65,7 +65,7 @@ export default {
pageSize: 10, pageSize: 10,
total: 0, total: 0,
pageSizes: [3, 5, 10, 20], pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { 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, pageSize: 3,
total: 0, total: 0,
pageSizes: [3, 5, 10, 20], pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ const fetchData = ref({

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

@ -36,7 +36,7 @@ export default {
pageSize: 3, pageSize: 3,
total: 0, total: 0,
pageSizes: [3, 5, 10, 20], pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { 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, pageSize: 10,
total: 0, total: 0,
pageSizes: [3, 5, 10, 20], pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ const fetchData = ref({

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

@ -31,7 +31,7 @@ export default {
pageSize: 10, pageSize: 10,
total: 0, total: 0,
pageSizes: [3, 5, 10, 20], pageSizes: [3, 5, 10, 20],
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, 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()]) 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
value: [new Date(2020, 1), new Date()], 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> <template>
<tiny-grid :data="tableData" height="300"> <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="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="区域"></tiny-grid-column> <tiny-grid-column field="area" title="区域"></tiny-grid-column>
<tiny-grid-column field="address" 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> <template>
<tiny-grid :data="tableData" height="300"> <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="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="区域"></tiny-grid-column> <tiny-grid-column field="area" title="区域"></tiny-grid-column>
<tiny-grid-column field="address" 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { fetchData: {

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

@ -2,10 +2,10 @@
<tiny-grid <tiny-grid
:data="tableData" :data="tableData"
border border
table-layout="auto"
show-overflow show-overflow
show-header-overflow show-header-overflow
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
column-width="100"
> >
<tiny-grid-column title="操作" header-align="center"> <tiny-grid-column title="操作" header-align="center">
<tiny-grid-column type="index" width="40"></tiny-grid-column> <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 } = await firstThDom.boundingBox()
const { x: x1 } = await firstTdDom.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 <tiny-grid
:data="tableData" :data="tableData"
border border
table-layout="auto"
show-overflow show-overflow
show-header-overflow show-header-overflow
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
column-width="100"
> >
<tiny-grid-column title="操作" header-align="center"> <tiny-grid-column title="操作" header-align="center">
<tiny-grid-column type="index" width="40"></tiny-grid-column> <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, pageSize: 5,
total: 0, total: 0,
pageSizes: [5, 10, 15, 20], pageSizes: [5, 10, 15, 20],
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const cityFilter = ref({ 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, pageSize: 5,
total: 0, total: 0,
pageSizes: [5, 10, 15, 20], 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, pageSize: 5,
total: 0, total: 0,
pageSizes: [5, 10, 15, 20], pageSizes: [5, 10, 15, 20],
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
cityFilter: { cityFilter: {

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

@ -26,7 +26,7 @@ export default {
pageSize: 5, pageSize: 5,
total: 0, total: 0,
pageSizes: [5, 10, 15, 20], pageSizes: [5, 10, 15, 20],
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
cityFilter: { 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 :data="tableData" resizable :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
<tiny-grid-column title="操作" header-align="center"> <tiny-grid-column title="操作" header-align="center">
<tiny-grid-column type="index" width="40"></tiny-grid-column> <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 :renderer="rendererCellOperate" width="100"></tiny-grid-column>
</tiny-grid-column> </tiny-grid-column>
<tiny-grid-column :title="renderHeaderDescription" header-align="center"> <tiny-grid-column :title="renderHeaderDescription" header-align="center">
@ -100,7 +100,7 @@ const options = ref([
{ label: '华南区', value: '华南区' } { label: '华南区', value: '华南区' }
]) ])
function renderHeaderDescription(h) { function renderHeaderDescription() {
return ( return (
<span> <span>
{' '} {' '}
@ -110,7 +110,7 @@ function renderHeaderDescription(h) {
) )
} }
function renderHeaderRelation(h) { function renderHeaderRelation() {
return ( return (
<span> <span>
<IconVersiontree /> <IconVersiontree />
@ -118,8 +118,7 @@ function renderHeaderRelation(h) {
) )
} }
// eslint-disable-next-line function renderHeaderArea() {
function renderHeaderArea(h) {
return ( return (
<span> <span>
<IconMarkOn /> <IconMarkOn />
@ -128,7 +127,7 @@ function renderHeaderArea(h) {
) )
} }
function renderHeaderAddress(h) { function renderHeaderAddress() {
return ( return (
<span> <span>
<IconUser /> <IconUser />
@ -137,7 +136,7 @@ function renderHeaderAddress(h) {
) )
} }
function rendererCellOperate(h) { function rendererCellOperate() {
return ( return (
<div style="text-align: center; font-size: 16px;"> <div style="text-align: center; font-size: 16px;">
<IconHelpful /> <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 :data="tableData" resizable :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
<tiny-grid-column title="操作" header-align="center"> <tiny-grid-column title="操作" header-align="center">
<tiny-grid-column type="index" width="40"></tiny-grid-column> <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 :renderer="rendererCellOperate" width="100"></tiny-grid-column>
</tiny-grid-column> </tiny-grid-column>
<tiny-grid-column :title="renderHeaderDescription" header-align="center"> <tiny-grid-column :title="renderHeaderDescription" header-align="center">
@ -108,8 +108,7 @@ export default {
} }
}, },
methods: { methods: {
// eslint-disable-next-line renderHeaderDescription() {
renderHeaderDescription(h) {
const IconAdministrator = this.IconAdministrator const IconAdministrator = this.IconAdministrator
return ( return (
@ -120,7 +119,7 @@ export default {
</span> </span>
) )
}, },
renderHeaderRelation(h) { renderHeaderRelation() {
const IconVersiontree = this.IconVersiontree const IconVersiontree = this.IconVersiontree
return ( return (
@ -129,7 +128,6 @@ export default {
</span> </span>
) )
}, },
// eslint-disable-next-line
renderHeaderArea(h) { renderHeaderArea(h) {
const IconMarkOn = this.IconMarkOn const IconMarkOn = this.IconMarkOn
@ -140,8 +138,8 @@ export default {
</span> </span>
) )
}, },
// eslint-disable-next-line
renderHeaderAddress(h) { renderHeaderAddress() {
const IconUser = this.IconUser const IconUser = this.IconUser
return ( return (
@ -151,8 +149,8 @@ export default {
</span> </span>
) )
}, },
// eslint-disable-next-line
rendererCellOperate(h) { rendererCellOperate() {
const IconAssociation = this.IconAssociation const IconAssociation = this.IconAssociation
const IconHelpful = this.IconHelpful 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 :data="tableData" resizable :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
<tiny-grid-column title="操作" header-align="center"> <tiny-grid-column title="操作" header-align="center">
<tiny-grid-column type="index" width="60"></tiny-grid-column> <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 :renderer="rendererCellOperate" width="100" v-if="flag"></tiny-grid-column>
</tiny-grid-column> </tiny-grid-column>
<tiny-grid-column :title="renderHeaderDescription" header-align="center"> <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 :data="tableData" resizable :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
<tiny-grid-column title="操作" header-align="center"> <tiny-grid-column title="操作" header-align="center">
<tiny-grid-column type="index" width="60"></tiny-grid-column> <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 :renderer="rendererCellOperate" width="100" v-if="flag"></tiny-grid-column>
</tiny-grid-column> </tiny-grid-column>
<tiny-grid-column :title="renderHeaderDescription" header-align="center"> <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"> <tiny-grid-column header-align="center">
<template #header>操作</template> <template #header>操作</template>
<tiny-grid-column type="index" width="40"></tiny-grid-column> <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-grid-column width="100" align="center">
<tiny-icon-helpful style="text-align: center; font-size: 16px; fill"></tiny-icon-helpful> <tiny-icon-helpful style="text-align: center; font-size: 16px; fill"></tiny-icon-helpful>
&nbsp;&nbsp; &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"> <tiny-grid-column header-align="center">
<template #header>操作</template> <template #header>操作</template>
<tiny-grid-column type="index" width="40"></tiny-grid-column> <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-grid-column width="100" align="center">
<icon-helpful style="text-align: center; font-size: 16px; fill"></icon-helpful> <icon-helpful style="text-align: center; font-size: 16px; fill"></icon-helpful>
&nbsp;&nbsp; &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, pageSize: 3,
pageSizes: [3, 5, 10], pageSizes: [3, 5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = { api: getData } 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, pageSize: 3,
pageSizes: [3, 5, 10], pageSizes: [3, 5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { api: this.getData } 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() await page.locator('.tiny-grid__body').hover()
// 先滚动1000px // 先滚动1000px
await page.mouse.wheel(0, 1000) 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.waitForTimeout(500)
await page.locator('.tiny-grid__body').hover() await page.locator('.tiny-grid__body').hover()
// 先滚动4000px // 先滚动4000px
await page.mouse.wheel(0, 5000) await page.mouse.wheel(0, 5000)
await page.waitForTimeout(200) 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> <template #toolbar>
<tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar> <tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar>
</template> </template>
<tiny-grid-column type="index" width="60"></tiny-grid-column> <tiny-grid-column type="radio" width="40"></tiny-grid-column>
<tiny-grid-column type="radio" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></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="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column> <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@ -85,3 +84,18 @@ function toolbarButtonClickEvent({ code }) {
} }
} }
</script> </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> <template #toolbar>
<tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar> <tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar>
</template> </template>
<tiny-grid-column type="index" width="60"></tiny-grid-column> <tiny-grid-column type="radio" width="40"></tiny-grid-column>
<tiny-grid-column type="radio" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></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="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column> <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@ -95,3 +94,18 @@ export default {
} }
} }
</script> </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> <template>
<tiny-grid :data="tableData"> <tiny-grid :data="tableData">
<tiny-grid-column type="index" width="60"></tiny-grid-column> <tiny-grid-column type="selection" width="40"></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="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column> <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" 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) { .demo-custom-column svg:not(:last-child) {
margin-right: 8px; 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> </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( await expect(
page page
.getByRole('row', { .getByRole('row', {
name: '1 GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。' name: 'GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
}) })
.getByRole('img') .getByRole('img')
.nth(1) .nth(1)

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

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

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

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

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

@ -1,9 +1,8 @@
<template> <template>
<tiny-grid ref="grid" :data="tableData"> <tiny-grid ref="grid" :data="tableData">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="80"> <tiny-grid-column type="selection" width="80">
<template #dropdown> <template #dropdown>
<tiny-dropdown class="ml-6" title="" @item-click="itemClick"> <tiny-dropdown class="ml-12" title="" @item-click="itemClick">
<template #dropdown> <template #dropdown>
<tiny-dropdown-menu placement="top"> <tiny-dropdown-menu placement="top">
<tiny-dropdown-item :item-data="{ name: 'selectCurPage' }"> 选择本页数据 </tiny-dropdown-item> <tiny-dropdown-item :item-data="{ name: 'selectCurPage' }"> 选择本页数据 </tiny-dropdown-item>
@ -95,7 +94,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.ml-6 { .ml-12 {
left: 6px; left: 12px;
} }
</style> </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-change="selectedDevices"
:select-config="tableSelectConfigData" :select-config="tableSelectConfigData"
> >
<tiny-grid-column type="selection" width="60"></tiny-grid-column> <tiny-grid-column type="selection" width="40"></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="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column> <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column> <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@ -47,7 +46,7 @@ const pagerConfig = ref({
pageSize: 5, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ const fetchData = ref({
@ -159,3 +158,19 @@ function selectedDevices({ $table }) {
}) })
} }
</script> </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.goto('grid-operation-column#operation-column-grid-pager-reserve')
await page await page
.getByRole('row', { .getByRole('row', {
name: '1 GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。' name: 'GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
}) })
.locator('path') .locator('path')
.first() .first()
@ -13,7 +13,7 @@ test('翻页后保留选中状态', async ({ page }) => {
await page.getByRole('list').getByText('2').click() await page.getByRole('list').getByText('2').click()
await page await page
.getByRole('row', { .getByRole('row', {
name: '8 西安门福德宝网络技术YX公司 华东区 厦门 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。' name: '西安门福德宝网络技术YX公司 华东区 厦门 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
}) })
.locator('path') .locator('path')
.first() .first()

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

@ -11,8 +11,7 @@
@select-change="selectedDevices" @select-change="selectedDevices"
:select-config="tableSelectConfigData" :select-config="tableSelectConfigData"
> >
<tiny-grid-column type="selection" width="60"></tiny-grid-column> <tiny-grid-column type="selection" width="40"></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="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column> <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column> <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@ -47,7 +46,7 @@ export default {
pageSize: 5, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { fetchData: {
@ -158,3 +157,19 @@ export default {
} }
} }
</script> </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> <template>
<tiny-grid ref="mytableRef" :select-config="selectConfig" :data="tableData"> <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 type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></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="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> <template>
<tiny-grid ref="mytable" :select-config="selectConfig" :data="tableData"> <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 type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></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="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> <template>
<tiny-grid ref="mytableRef" :radio-config="radioConfigData" :data="tableData"> <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 type="radio" width="100"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></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="area" title="所属区域"></tiny-grid-column>

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

@ -1,6 +1,5 @@
<template> <template>
<tiny-grid ref="mytable" :radio-config="radioConfigData" :data="tableData"> <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 type="radio" width="100"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></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="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> <template #toolbar>
<tiny-grid-toolbar refresh></tiny-grid-toolbar> <tiny-grid-toolbar refresh></tiny-grid-toolbar>
</template> </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="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column> <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column> <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@ -33,7 +32,7 @@ const pagerConfig = ref({
pageSize: 5, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ const fetchData = ref({

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

@ -8,7 +8,6 @@
border border
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }" :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="60"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column> <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column <tiny-grid-column
@ -119,3 +118,19 @@ const checkboxEdit = (h, { row, column }) => {
) )
} }
</script> </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" ref="grid"
:select-config="selectConfig" :select-config="selectConfig"
highlight-current-row highlight-current-row
border
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
> >
<tiny-grid-column type="index" width="60"></tiny-grid-column> <tiny-grid-column type="selection" width="40"></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 field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column <tiny-grid-column
field="createdDate" field="createdDate"
@ -128,3 +126,19 @@ export default {
} }
} }
</script> </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> <template #toolbar>
<tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar> <tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar>
</template> </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="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column> <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column> <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@ -108,3 +108,19 @@ function toolbarButtonClickEvent({ code, $grid }) {
} }
} }
</script> </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> <template #toolbar>
<tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar> <tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar>
</template> </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="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column> <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column> <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@ -119,3 +119,19 @@ export default {
} }
} }
</script> </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], pageSizes: [5, 10],
total: 0, total: 0,
align: 'right', // 可选值：['left', 'center', 'right'] align: 'right', // 可选值：['left', 'center', 'right']
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ 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], pageSizes: [5, 10],
total: 0, total: 0,
align: 'right', // 可选值：['left', 'center', 'right'] align: 'right', // 可选值：['left', 'center', 'right']
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ const fetchData = ref({

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

@ -27,7 +27,7 @@ export default {
pageSize: 5, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { 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]" :page-sizes="[5, 10, 20, 50]"
@current-change="currentChange" @current-change="currentChange"
@size-change="sizeChange" @size-change="sizeChange"
layout="total, prev, pager, next, jumper, sizes" layout="total, sizes, prev, pager, next, jumper"
></tiny-pager> ></tiny-pager>
</div> </div>
</template> </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]" :page-sizes="[5, 10, 20, 50]"
@current-change="currentChange" @current-change="currentChange"
@size-change="sizeChange" @size-change="sizeChange"
layout="total, prev, pager, next, jumper, sizes" layout="total, sizes, prev, pager, next, jumper"
></tiny-pager> ></tiny-pager>
</div> </div>
</template> </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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { fetchData: {

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

@ -11,7 +11,7 @@
pageSize: 5, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, 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, pageSize: 10,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ const fetchData = ref({

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

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

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

@ -1,5 +1,5 @@
<template> <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 type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></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="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') await page.goto('grid-size#size-column-width')
const { width: width1 } = await page.getByRole('cell', { name: '所属区域' }).boundingBox() 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() 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() 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> <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 type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></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="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-tabs v-model="activeName" tab-style="card">
<tiny-tab-item title="medium" name="medium"> <tiny-tab-item title="medium" name="medium">
<tiny-grid :data="tableData" size="medium" :auto-resize="true"> <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="40"></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 field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column> <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column> <tiny-grid-column field="city" title="城市"></tiny-grid-column>
@ -11,8 +10,7 @@
</tiny-tab-item> </tiny-tab-item>
<tiny-tab-item title="small" name="small"> <tiny-tab-item title="small" name="small">
<tiny-grid :data="tableData" size="small" :auto-resize="true"> <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="40"></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 field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column> <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column> <tiny-grid-column field="city" title="城市"></tiny-grid-column>
@ -20,8 +18,7 @@
</tiny-tab-item> </tiny-tab-item>
<tiny-tab-item title="mini" name="mini"> <tiny-tab-item title="mini" name="mini">
<tiny-grid :data="tableData" size="mini" :auto-resize="true"> <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="40"></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 field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column> <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column> <tiny-grid-column field="city" title="城市"></tiny-grid-column>
@ -103,3 +100,19 @@ const tableData = ref([
} }
]) ])
</script> </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-tabs v-model="activeName" tab-style="card">
<tiny-tab-item title="medium" name="medium"> <tiny-tab-item title="medium" name="medium">
<tiny-grid :data="tableData" size="medium" :auto-resize="true"> <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="40"></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 field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column> <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column> <tiny-grid-column field="city" title="城市"></tiny-grid-column>
@ -11,8 +10,7 @@
</tiny-tab-item> </tiny-tab-item>
<tiny-tab-item title="small" name="small"> <tiny-tab-item title="small" name="small">
<tiny-grid :data="tableData" size="small" :auto-resize="true"> <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="40"></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 field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column> <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column> <tiny-grid-column field="city" title="城市"></tiny-grid-column>
@ -20,8 +18,7 @@
</tiny-tab-item> </tiny-tab-item>
<tiny-tab-item title="mini" name="mini"> <tiny-tab-item title="mini" name="mini">
<tiny-grid :data="tableData" size="mini" :auto-resize="true"> <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="40"></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 field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column> <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column> <tiny-grid-column field="city" title="城市"></tiny-grid-column>
@ -114,3 +111,19 @@ export default {
} }
} }
</script> </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 }) => { test('设置 maxHeight 最大高度', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull()) page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-size#size-max-min-grid-height') 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') 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, pageSize: 15,
total: 0, total: 0,
pageSizes: [5, 10, 15, 20], pageSizes: [5, 10, 15, 20],
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ const fetchData = ref({

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

@ -26,7 +26,7 @@ export default {
pageSize: 15, pageSize: 15,
total: 0, total: 0,
pageSizes: [5, 10, 15, 20], pageSizes: [5, 10, 15, 20],
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const fetchData = ref({ const fetchData = ref({

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

@ -46,7 +46,7 @@ export default {
pageSize: 5, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { 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, currentPage: 1,
pageSize: 10, pageSize: 10,
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}) })
const options = ref([ const options = ref([

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

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

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

@ -30,7 +30,7 @@ const pagerConfig = {
pageSize: 5, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { fetchData: {

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

@ -39,7 +39,7 @@ const pagerConfig = {
pageSize: 5, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
fetchData: { 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, pageSize: 5,
pageSizes: [5, 10], pageSizes: [5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
columns: [ 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, pageSize: 3,
pageSizes: [3, 5, 10], pageSizes: [3, 5, 10],
total: 0, total: 0,
layout: 'total, prev, pager, next, jumper, sizes' layout: 'total, sizes, prev, pager, next, jumper'
} }
}, },
columns: [ columns: [

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

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

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

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

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

@ -7,7 +7,7 @@
</div> </div>
<br /> <br />
<tiny-grid :data="tableData" ref="grid" :tree-config="{ children: 'children' }"> <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="name" title="公司名称" tree-node></tiny-grid-column>
<tiny-grid-column field="area" title="区域"></tiny-grid-column> <tiny-grid-column field="area" title="区域"></tiny-grid-column>
<tiny-grid-column field="employees" 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]) grid.value.toggleTreeExpansion(tableData.value[1])
} }
</script> </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