forked from opentiny/tiny-vue
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
GitHub
parent
58f7654c29
commit
93f956a576
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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()])
|
||||
|
|
|
|||
|
|
@ -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,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,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>
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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,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>
|
||||
|
|
|
|||
|
|
@ -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,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>
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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,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,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,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,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,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({
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
}"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
}"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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([
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
|
|
|
|||
|
|
@ -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
Loading…
Reference in New Issue