docs(grid): [grid] update grid docs (#762)
* fix(docs): [grid] update custom style docs * fix(docs): [grid] update operation data souce docs * fix(docs): [grid] update toolbar and edit docs * fix(docs): [grid] update size docs * fix(docs): [grid] update appearance docs * fix(docs): [grid] update align docs * fix(docs): [grid] update group docs * fix(docs): [grid] update context menu docs * fix(docs): [grid] update editor docs * fix(docs): [grid] update validate docs * fix(docs): [grid] update validate docs * fix(docs): [grid] update tree-table docs * fix(docs): [grid] update keyboard docs * fix(docs): [grid] update loading docs * fix(docs): [grid] delete useless files docs
This commit is contained in:
ajaxzheng
GitHub
parent
5cc46bb283
commit
531a43ae56
|
|
@ -1,74 +0,0 @@
|
|||
<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 field="name" title="公司名称(默认为左对齐)"></tiny-grid-column>
|
||||
<tiny-grid-column field="employees" title="员工数(左对齐)" align="left"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期(右对齐)" align="right"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市(居中对齐)" align="center"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
city: '福州',
|
||||
employees: 800,
|
||||
createdDate: '2014-04-30 00:56:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
city: '深圳',
|
||||
employees: 300,
|
||||
createdDate: '2016-07-08 12:36:22'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
city: '中山',
|
||||
employees: 1300,
|
||||
createdDate: '2014-02-14 14:14:14'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB科技YX公司',
|
||||
city: '龙岩',
|
||||
employees: 360,
|
||||
createdDate: '2013-01-13 13:13:13'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
city: '韶关',
|
||||
employees: 810,
|
||||
createdDate: '2012-12-12 12:12:12'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'WSX科技YX公司',
|
||||
city: '黄冈',
|
||||
employees: 800,
|
||||
createdDate: '2011-11-11 11:11:11'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
employees: 400,
|
||||
createdDate: '2016-04-30 23:56:00'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
city: '厦门',
|
||||
employees: 540,
|
||||
createdDate: '2016-06-03 13:53:25'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('列对齐', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('grid-align#align-column-align')
|
||||
await expect(page.getByRole('cell', { name: '创建日期(右对齐)' })).toHaveCSS('text-align', 'right')
|
||||
await expect(page.getByRole('cell', { name: '2014-04-30 00:56:00' })).toHaveCSS('text-align', 'right')
|
||||
await expect(page.getByRole('cell', { name: '福州' })).toHaveCSS('text-align', 'center')
|
||||
await expect(page.getByRole('cell', { name: '城市(居中对齐)' })).toHaveCSS('text-align', 'center')
|
||||
})
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<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 field="name" title="公司名称(默认为左对齐)"></tiny-grid-column>
|
||||
<tiny-grid-column field="employees" title="员工数(左对齐)" align="left"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期(右对齐)" align="right"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市(居中对齐)" align="center"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGrid: Grid,
|
||||
TinyGridColumn: GridColumn
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
city: '福州',
|
||||
employees: 800,
|
||||
createdDate: '2014-04-30 00:56:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
city: '深圳',
|
||||
employees: 300,
|
||||
createdDate: '2016-07-08 12:36:22'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
city: '中山',
|
||||
employees: 1300,
|
||||
createdDate: '2014-02-14 14:14:14'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB科技YX公司',
|
||||
city: '龙岩',
|
||||
employees: 360,
|
||||
createdDate: '2013-01-13 13:13:13'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
city: '韶关',
|
||||
employees: 810,
|
||||
createdDate: '2012-12-12 12:12:12'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'WSX科技YX公司',
|
||||
city: '黄冈',
|
||||
employees: 800,
|
||||
createdDate: '2011-11-11 11:11:11'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
employees: 400,
|
||||
createdDate: '2016-04-30 23:56:00'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
city: '厦门',
|
||||
employees: 540,
|
||||
createdDate: '2016-06-03 13:53:25'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<div>
|
||||
<h4>自定义表体行样式：</h4>
|
||||
<tiny-grid class="grid-row-style" :data="tableData" :row-class-name="rowClassName">
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
<h4>自定义表体单元格样式：</h4>
|
||||
<tiny-grid class="grid-cell-style" :data="tableData" :cell-class-name="cellClassName">
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
city: '福州',
|
||||
employees: 800,
|
||||
createdDate: '2014-04-30 00:56:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
city: '深圳',
|
||||
employees: 300,
|
||||
createdDate: '2016-07-08 12:36:22'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
city: '中山',
|
||||
employees: 1300,
|
||||
createdDate: '2014-02-14 14:14:14'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB科技YX公司',
|
||||
city: '龙岩',
|
||||
employees: 360,
|
||||
createdDate: '2013-01-13 13:13:13'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
city: '韶关',
|
||||
employees: 810,
|
||||
createdDate: '2012-12-12 12:12:12'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'WSX科技YX公司',
|
||||
city: '黄冈',
|
||||
employees: 800,
|
||||
createdDate: '2011-11-11 11:11:11'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
employees: 400,
|
||||
createdDate: '2016-04-30 23:56:00'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
city: '厦门',
|
||||
employees: 540,
|
||||
createdDate: '2016-06-03 13:53:25'
|
||||
}
|
||||
])
|
||||
|
||||
const rowClassName = ({ rowIndex }) => {
|
||||
if (rowIndex & 1) {
|
||||
return 'row__word--red'
|
||||
}
|
||||
}
|
||||
|
||||
const cellClassName = ({ rowIndex, columnIndex }) => {
|
||||
if (rowIndex & 1 && !(columnIndex & 1)) {
|
||||
return 'col-orange'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-row-style .tiny-grid__body .row__word--red {
|
||||
color: palevioletred;
|
||||
}
|
||||
.grid-cell-style .tiny-grid-body__column.col-orange {
|
||||
background-color: #f60;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +1,27 @@
|
|||
<template>
|
||||
<tiny-grid class="grid-cell-style" :data="tableData" :cell-class-name="cellClassName">
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
<div>
|
||||
<h4>自定义表体行样式：</h4>
|
||||
<tiny-grid class="grid-row-style" :data="tableData" :row-class-name="rowClassName">
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
<h4>自定义表体单元格样式：</h4>
|
||||
<tiny-grid class="grid-cell-style" :data="tableData" :cell-class-name="cellClassName">
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -80,6 +92,11 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
rowClassName({ rowIndex }) {
|
||||
if (rowIndex & 1) {
|
||||
return 'row__word--red'
|
||||
}
|
||||
},
|
||||
cellClassName({ rowIndex, columnIndex }) {
|
||||
if (rowIndex & 1 && !(columnIndex & 1)) {
|
||||
return 'col-orange'
|
||||
|
|
@ -90,8 +107,11 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.grid-row-style .tiny-grid__body .row__word--red {
|
||||
color: palevioletred;
|
||||
}
|
||||
.grid-cell-style .tiny-grid-body__column.col-orange {
|
||||
background-color: #f60;
|
||||
background-color: pink;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
<template>
|
||||
<tiny-grid class="grid-cell-style" :data="tableData" :cell-class-name="cellClassName">
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
city: '福州',
|
||||
employees: 800,
|
||||
createdDate: '2014-04-30 00:56:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
city: '深圳',
|
||||
employees: 300,
|
||||
createdDate: '2016-07-08 12:36:22'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
city: '中山',
|
||||
employees: 1300,
|
||||
createdDate: '2014-02-14 14:14:14'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB科技YX公司',
|
||||
city: '龙岩',
|
||||
employees: 360,
|
||||
createdDate: '2013-01-13 13:13:13'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
city: '韶关',
|
||||
employees: 810,
|
||||
createdDate: '2012-12-12 12:12:12'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'WSX科技YX公司',
|
||||
city: '黄冈',
|
||||
employees: 800,
|
||||
createdDate: '2011-11-11 11:11:11'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
employees: 400,
|
||||
createdDate: '2016-04-30 23:56:00'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
city: '厦门',
|
||||
employees: 540,
|
||||
createdDate: '2016-06-03 13:53:25'
|
||||
}
|
||||
])
|
||||
|
||||
function cellClassName({ rowIndex, columnIndex }) {
|
||||
if (rowIndex & 1 && !(columnIndex & 1)) {
|
||||
return 'col-orange'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-cell-style .tiny-grid-body__column.col-orange {
|
||||
background-color: #f60;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('单元格样式', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('grid-custom-style#custom-style-cell-style')
|
||||
await expect(page.getByRole('cell', { name: '2016-07-08 12:36:22' })).toHaveCSS(
|
||||
'background-color',
|
||||
'rgb(255, 102, 0)'
|
||||
)
|
||||
await expect(page.getByRole('cell', { name: 'TGB科技YX公司' })).toHaveCSS('background-color', 'rgb(255, 102, 0)')
|
||||
await expect(page.getByRole('cell', { name: '深圳市福德宝网络技术YX公司' })).toHaveCSS(
|
||||
'background-color',
|
||||
'rgb(255, 102, 0)'
|
||||
)
|
||||
})
|
||||
|
|
@ -1,19 +1,38 @@
|
|||
<template>
|
||||
<tiny-grid
|
||||
class="grid-footer-row-style"
|
||||
:data="tableData"
|
||||
show-footer
|
||||
:footer-method="footerMethod"
|
||||
border
|
||||
:footer-row-class-name="footerRowClassName"
|
||||
>
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
<div>
|
||||
<h4>自定义表尾行样式：</h4>
|
||||
<tiny-grid
|
||||
class="grid-footer-row-style"
|
||||
:data="tableData"
|
||||
show-footer
|
||||
:footer-method="footerMethod"
|
||||
border
|
||||
:footer-row-class-name="footerRowClassName"
|
||||
>
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
<h4>自定义表尾单元格样式：</h4>
|
||||
<tiny-grid
|
||||
class="grid-footer-cell-style"
|
||||
:data="tableData"
|
||||
show-footer
|
||||
:footer-method="footerMethod"
|
||||
border
|
||||
:footer-cell-class-name="footerCellClassName"
|
||||
>
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
|
|
@ -113,6 +132,11 @@ export default {
|
|||
})
|
||||
]
|
||||
},
|
||||
footerCellClassName({ column, $rowIndex }) {
|
||||
if ($rowIndex === 0 && column.property === 'employees') {
|
||||
return 'footer__cell--blue'
|
||||
}
|
||||
},
|
||||
footerRowClassName({ $rowIndex }) {
|
||||
if ($rowIndex === 0) {
|
||||
return 'footer__row--red'
|
||||
|
|
@ -127,8 +151,13 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.grid-footer-cell-style .tiny-grid-footer__column.footer__cell--blue {
|
||||
background-color: #2db7f5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grid-footer-row-style .tiny-grid-footer__row.footer__row--red {
|
||||
background-color: red;
|
||||
background-color: palevioletred;
|
||||
color: #fff;
|
||||
}
|
||||
.grid-footer-row-style .tiny-grid-footer__row.footer__row--green {
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
<template>
|
||||
<tiny-grid
|
||||
class="grid-footer-cell-style"
|
||||
:data="tableData"
|
||||
show-footer
|
||||
:footer-method="footerMethod"
|
||||
border
|
||||
:footer-cell-class-name="footerCellClassName"
|
||||
>
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGrid: Grid,
|
||||
TinyGridColumn: GridColumn
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
city: '福州',
|
||||
employees: 800,
|
||||
createdDate: '2014-04-30 00:56:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
city: '深圳',
|
||||
employees: 300,
|
||||
createdDate: '2016-07-08 12:36:22'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
city: '中山',
|
||||
employees: 1300,
|
||||
createdDate: '2014-02-14 14:14:14'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB科技YX公司',
|
||||
city: '龙岩',
|
||||
employees: 360,
|
||||
createdDate: '2013-01-13 13:13:13'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
city: '韶关',
|
||||
employees: 810,
|
||||
createdDate: '2012-12-12 12:12:12'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'WSX科技YX公司',
|
||||
city: '黄冈',
|
||||
employees: 800,
|
||||
createdDate: '2011-11-11 11:11:11'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
employees: 400,
|
||||
createdDate: '2016-04-30 23:56:00'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
city: '厦门',
|
||||
employees: 540,
|
||||
createdDate: '2016-06-03 13:53:25'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
footerMethod({ columns, data }) {
|
||||
return [
|
||||
columns.map((column, columnIndex) => {
|
||||
if (columnIndex === 0) {
|
||||
return '平均'
|
||||
}
|
||||
|
||||
if (column.property === 'employees') {
|
||||
return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
|
||||
}
|
||||
|
||||
return null
|
||||
}),
|
||||
columns.map((column, columnIndex) => {
|
||||
if (columnIndex === 0) {
|
||||
return '和值'
|
||||
}
|
||||
|
||||
if (column.property === 'employees') {
|
||||
return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
|
||||
}
|
||||
|
||||
return null
|
||||
})
|
||||
]
|
||||
},
|
||||
footerCellClassName({ $rowIndex }) {
|
||||
if ($rowIndex === 0) {
|
||||
return 'footer__cell--blue'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-footer-cell-style .tiny-grid-footer__column.footer__cell--blue {
|
||||
background-color: #2db7f5;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
<template>
|
||||
<tiny-grid
|
||||
class="grid-footer-row-style"
|
||||
:data="tableData"
|
||||
show-footer
|
||||
:footer-method="footerMethod"
|
||||
border
|
||||
:footer-row-class-name="footerRowClassName"
|
||||
>
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
city: '福州',
|
||||
employees: 800,
|
||||
createdDate: '2014-04-30 00:56:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
city: '深圳',
|
||||
employees: 300,
|
||||
createdDate: '2016-07-08 12:36:22'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
city: '中山',
|
||||
employees: 1300,
|
||||
createdDate: '2014-02-14 14:14:14'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB科技YX公司',
|
||||
city: '龙岩',
|
||||
employees: 360,
|
||||
createdDate: '2013-01-13 13:13:13'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
city: '韶关',
|
||||
employees: 810,
|
||||
createdDate: '2012-12-12 12:12:12'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'WSX科技YX公司',
|
||||
city: '黄冈',
|
||||
employees: 800,
|
||||
createdDate: '2011-11-11 11:11:11'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
employees: 400,
|
||||
createdDate: '2016-04-30 23:56:00'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
city: '厦门',
|
||||
employees: 540,
|
||||
createdDate: '2016-06-03 13:53:25'
|
||||
}
|
||||
])
|
||||
|
||||
function footerMethod({ columns, data }) {
|
||||
return [
|
||||
columns.map((column, columnIndex) => {
|
||||
if (columnIndex === 0) {
|
||||
return '平均'
|
||||
}
|
||||
|
||||
if (column.property === 'employees') {
|
||||
return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
|
||||
}
|
||||
|
||||
return null
|
||||
}),
|
||||
columns.map((column, columnIndex) => {
|
||||
if (columnIndex === 0) {
|
||||
return '和值'
|
||||
}
|
||||
|
||||
if (column.property === 'employees') {
|
||||
return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
|
||||
}
|
||||
|
||||
return null
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
function footerRowClassName({ $rowIndex }) {
|
||||
if ($rowIndex === 0) {
|
||||
return 'footer__row--red'
|
||||
}
|
||||
|
||||
if ($rowIndex === 1) {
|
||||
return 'footer__row--green'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-footer-row-style .tiny-grid-footer__row.footer__row--red {
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
}
|
||||
.grid-footer-row-style .tiny-grid-footer__row.footer__row--green {
|
||||
background-color: green;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('表尾样式(自定义表尾单元格样式)', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('grid-custom-style#custom-style-footer-style-footer-row-style')
|
||||
await expect(page.locator('.footer__row--red')).toBeVisible()
|
||||
await expect(page.locator('.footer__row--green')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<div>
|
||||
<h4>自定义表头行样式：</h4>
|
||||
<tiny-grid class="grid-header-row-style" :data="tableData" :header-row-class-name="headerRowClassName">
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
<h4>自定义表头单元格样式：</h4>
|
||||
<tiny-grid class="grid-header-cell-style" :data="tableData" :header-cell-class-name="headerCellClassName">
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
city: '福州',
|
||||
employees: 800,
|
||||
createdDate: '2014-04-30 00:56:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
city: '深圳',
|
||||
employees: 300,
|
||||
createdDate: '2016-07-08 12:36:22'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
city: '中山',
|
||||
employees: 1300,
|
||||
createdDate: '2014-02-14 14:14:14'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB科技YX公司',
|
||||
city: '龙岩',
|
||||
employees: 360,
|
||||
createdDate: '2013-01-13 13:13:13'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
city: '韶关',
|
||||
employees: 810,
|
||||
createdDate: '2012-12-12 12:12:12'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'WSX科技YX公司',
|
||||
city: '黄冈',
|
||||
employees: 800,
|
||||
createdDate: '2011-11-11 11:11:11'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
employees: 400,
|
||||
createdDate: '2016-04-30 23:56:00'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
city: '厦门',
|
||||
employees: 540,
|
||||
createdDate: '2016-06-03 13:53:25'
|
||||
}
|
||||
])
|
||||
|
||||
const headerRowClassName = ({ $rowIndex }) => {
|
||||
if ($rowIndex === 0) {
|
||||
return 'header__row--red'
|
||||
}
|
||||
}
|
||||
|
||||
const headerCellClassName = ({ column }) => {
|
||||
if (column.property === 'name') {
|
||||
return 'header__cell--blue'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-header-row-style .tiny-grid-header__row.header__row--red {
|
||||
background-color: palevioletred;
|
||||
}
|
||||
.grid-header-cell-style .tiny-grid-header__column.header__cell--blue {
|
||||
background-color: #2db7f5;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +1,27 @@
|
|||
<template>
|
||||
<tiny-grid class="grid-header-cell-style" :data="tableData" :header-cell-class-name="headerCellClassName">
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
<div>
|
||||
<h4>自定义表头行样式：</h4>
|
||||
<tiny-grid class="grid-header-row-style" :data="tableData" :header-row-class-name="headerRowClassName">
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
<h4>自定义表头单元格样式：</h4>
|
||||
<tiny-grid class="grid-header-cell-style" :data="tableData" :header-cell-class-name="headerCellClassName">
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -80,6 +92,11 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
headerRowClassName({ $rowIndex }) {
|
||||
if ($rowIndex === 0) {
|
||||
return 'header__row--red'
|
||||
}
|
||||
},
|
||||
headerCellClassName({ column }) {
|
||||
if (column.property === 'name') {
|
||||
return 'header__cell--blue'
|
||||
|
|
@ -90,6 +107,9 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.grid-header-row-style .tiny-grid-header__row.header__row--red {
|
||||
background-color: palevioletred;
|
||||
}
|
||||
.grid-header-cell-style .tiny-grid-header__column.header__cell--blue {
|
||||
background-color: #2db7f5;
|
||||
color: #fff;
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
<template>
|
||||
<tiny-grid class="grid-header-cell-style" :data="tableData" :header-cell-class-name="headerCellClassName">
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
city: '福州',
|
||||
employees: 800,
|
||||
createdDate: '2014-04-30 00:56:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
city: '深圳',
|
||||
employees: 300,
|
||||
createdDate: '2016-07-08 12:36:22'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
city: '中山',
|
||||
employees: 1300,
|
||||
createdDate: '2014-02-14 14:14:14'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB科技YX公司',
|
||||
city: '龙岩',
|
||||
employees: 360,
|
||||
createdDate: '2013-01-13 13:13:13'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
city: '韶关',
|
||||
employees: 810,
|
||||
createdDate: '2012-12-12 12:12:12'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'WSX科技YX公司',
|
||||
city: '黄冈',
|
||||
employees: 800,
|
||||
createdDate: '2011-11-11 11:11:11'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
employees: 400,
|
||||
createdDate: '2016-04-30 23:56:00'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
city: '厦门',
|
||||
employees: 540,
|
||||
createdDate: '2016-06-03 13:53:25'
|
||||
}
|
||||
])
|
||||
|
||||
function headerCellClassName({ column }) {
|
||||
if (column.property === 'name') {
|
||||
return 'header__cell--blue'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-header-cell-style .tiny-grid-header__column.header__cell--blue {
|
||||
background-color: #2db7f5;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('设置表头样式', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('grid-custom-style#custom-style-header-style-header-cell-style')
|
||||
await expect(page.getByRole('cell', { name: '公司名称' })).toHaveCSS('background-color', 'rgb(45, 183, 245)')
|
||||
})
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
<template>
|
||||
<tiny-grid class="grid-header-row-style" :data="tableData" :header-row-class-name="headerRowClassName">
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
city: '福州',
|
||||
employees: 800,
|
||||
createdDate: '2014-04-30 00:56:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
city: '深圳',
|
||||
employees: 300,
|
||||
createdDate: '2016-07-08 12:36:22'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
city: '中山',
|
||||
employees: 1300,
|
||||
createdDate: '2014-02-14 14:14:14'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB科技YX公司',
|
||||
city: '龙岩',
|
||||
employees: 360,
|
||||
createdDate: '2013-01-13 13:13:13'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
city: '韶关',
|
||||
employees: 810,
|
||||
createdDate: '2012-12-12 12:12:12'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'WSX科技YX公司',
|
||||
city: '黄冈',
|
||||
employees: 800,
|
||||
createdDate: '2011-11-11 11:11:11'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
employees: 400,
|
||||
createdDate: '2016-04-30 23:56:00'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
city: '厦门',
|
||||
employees: 540,
|
||||
createdDate: '2016-06-03 13:53:25'
|
||||
}
|
||||
])
|
||||
|
||||
function headerRowClassName({ $rowIndex }) {
|
||||
if ($rowIndex === 0) {
|
||||
return 'header__row--red'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-header-row-style .tiny-grid-header__row.header__row--red {
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
<template>
|
||||
<tiny-grid class="grid-header-row-style" :data="tableData" :header-row-class-name="headerRowClassName">
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGrid: Grid,
|
||||
TinyGridColumn: GridColumn
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
city: '福州',
|
||||
employees: 800,
|
||||
createdDate: '2014-04-30 00:56:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
city: '深圳',
|
||||
employees: 300,
|
||||
createdDate: '2016-07-08 12:36:22'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
city: '中山',
|
||||
employees: 1300,
|
||||
createdDate: '2014-02-14 14:14:14'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB科技YX公司',
|
||||
city: '龙岩',
|
||||
employees: 360,
|
||||
createdDate: '2013-01-13 13:13:13'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
city: '韶关',
|
||||
employees: 810,
|
||||
createdDate: '2012-12-12 12:12:12'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'WSX科技YX公司',
|
||||
city: '黄冈',
|
||||
employees: 800,
|
||||
createdDate: '2011-11-11 11:11:11'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
employees: 400,
|
||||
createdDate: '2016-04-30 23:56:00'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
city: '厦门',
|
||||
employees: 540,
|
||||
createdDate: '2016-06-03 13:53:25'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
headerRowClassName({ $rowIndex }) {
|
||||
if ($rowIndex === 0) {
|
||||
return 'header__row--red'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-header-row-style .tiny-grid-header__row.header__row--red {
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
<template>
|
||||
<tiny-grid class="grid-row-style" :data="tableData" :row-class-name="rowClassName">
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
city: '福州',
|
||||
employees: 800,
|
||||
createdDate: '2014-04-30 00:56:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
city: '深圳',
|
||||
employees: 300,
|
||||
createdDate: '2016-07-08 12:36:22'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
city: '中山',
|
||||
employees: 1300,
|
||||
createdDate: '2014-02-14 14:14:14'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB科技YX公司',
|
||||
city: '龙岩',
|
||||
employees: 360,
|
||||
createdDate: '2013-01-13 13:13:13'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
city: '韶关',
|
||||
employees: 810,
|
||||
createdDate: '2012-12-12 12:12:12'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'WSX科技YX公司',
|
||||
city: '黄冈',
|
||||
employees: 800,
|
||||
createdDate: '2011-11-11 11:11:11'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
employees: 400,
|
||||
createdDate: '2016-04-30 23:56:00'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
city: '厦门',
|
||||
employees: 540,
|
||||
createdDate: '2016-06-03 13:53:25'
|
||||
}
|
||||
])
|
||||
|
||||
function rowClassName({ rowIndex }) {
|
||||
if (rowIndex & 1) {
|
||||
return 'row__word--red'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-row-style .tiny-grid__body .row__word--red {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
<template>
|
||||
<tiny-grid class="grid-row-style" :data="tableData" :row-class-name="rowClassName">
|
||||
<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="employees" title="员工数"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGrid: Grid,
|
||||
TinyGridColumn: GridColumn
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
city: '福州',
|
||||
employees: 800,
|
||||
createdDate: '2014-04-30 00:56:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
city: '深圳',
|
||||
employees: 300,
|
||||
createdDate: '2016-07-08 12:36:22'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
city: '中山',
|
||||
employees: 1300,
|
||||
createdDate: '2014-02-14 14:14:14'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB科技YX公司',
|
||||
city: '龙岩',
|
||||
employees: 360,
|
||||
createdDate: '2013-01-13 13:13:13'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
city: '韶关',
|
||||
employees: 810,
|
||||
createdDate: '2012-12-12 12:12:12'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'WSX科技YX公司',
|
||||
city: '黄冈',
|
||||
employees: 800,
|
||||
createdDate: '2011-11-11 11:11:11'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
employees: 400,
|
||||
createdDate: '2016-04-30 23:56:00'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
city: '厦门',
|
||||
employees: 540,
|
||||
createdDate: '2016-06-03 13:53:25'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
rowClassName({ rowIndex }) {
|
||||
if (rowIndex & 1) {
|
||||
return 'row__word--red'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-row-style .tiny-grid__body .row__word--red {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<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="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>
|
||||
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
|
||||
|
||||
const radioConfigData = ref({
|
||||
checkMethod({ rowIndex }) {
|
||||
return rowIndex % 2 === 0
|
||||
}
|
||||
})
|
||||
const tableData = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
area: '华东区',
|
||||
address: '福州',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWWW科技YX公司',
|
||||
area: '华南区',
|
||||
address: '深圳福田区',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
area: '华南区',
|
||||
address: '中山市',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGBYX公司',
|
||||
area: '华北区',
|
||||
address: '梅州',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
area: '华南区',
|
||||
address: '韶关',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: '康康物业YX公司',
|
||||
area: '华北区',
|
||||
address: '广州天河区',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('单选禁用', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('grid-operation-column#disable-radio')
|
||||
await expect(page.locator('tr:nth-child(2) > td:nth-child(2) input')).toBeDisabled()
|
||||
await expect(page.locator('tr:nth-child(4) > td:nth-child(2) input')).toBeDisabled()
|
||||
await expect(page.locator('tr:nth-child(6) > td:nth-child(2) input')).toBeDisabled()
|
||||
})
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<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="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>
|
||||
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGrid: Grid,
|
||||
TinyGridColumn: GridColumn
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
radioConfigData: {
|
||||
checkMethod({ rowIndex }) {
|
||||
return rowIndex % 2 === 0
|
||||
}
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
area: '华东区',
|
||||
address: '福州',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWWW科技YX公司',
|
||||
area: '华南区',
|
||||
address: '深圳福田区',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
area: '华南区',
|
||||
address: '中山市',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGBYX公司',
|
||||
area: '华北区',
|
||||
address: '梅州',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
area: '华南区',
|
||||
address: '韶关',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: '康康物业YX公司',
|
||||
area: '华北区',
|
||||
address: '广州天河区',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<template>
|
||||
<tiny-grid ref="mytableRef" :select-config="selectConfigData" :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>
|
||||
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
|
||||
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
|
||||
|
||||
const selectConfigData = ref({
|
||||
checkMethod({ rowIndex }) {
|
||||
return rowIndex % 2 === 0
|
||||
}
|
||||
})
|
||||
const tableData = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
area: '华东区',
|
||||
address: '福州',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWWW科技YX公司',
|
||||
area: '华南区',
|
||||
address: '深圳福田区',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
area: '华南区',
|
||||
address: '中山市',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGBYX公司',
|
||||
area: '华北区',
|
||||
address: '梅州',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
area: '华南区',
|
||||
address: '韶关',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: '康康物业YX公司',
|
||||
area: '华北区',
|
||||
address: '广州天河区',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('手动切换指定行选中状态', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('grid-operation-column#disable-selection')
|
||||
await expect(page.locator('tr:nth-child(2) > td:nth-child(2) input')).toBeDisabled()
|
||||
await expect(page.locator('tr:nth-child(4) > td:nth-child(2) input')).toBeDisabled()
|
||||
await expect(page.locator('tr:nth-child(6) > td:nth-child(2) input')).toBeDisabled()
|
||||
})
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<template>
|
||||
<tiny-grid ref="mytable" :select-config="selectConfigData" :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>
|
||||
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
|
||||
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGrid: Grid,
|
||||
TinyGridColumn: GridColumn
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectConfigData: {
|
||||
checkMethod({ rowIndex }) {
|
||||
return rowIndex % 2 === 0
|
||||
}
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
area: '华东区',
|
||||
address: '福州',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWWW科技YX公司',
|
||||
area: '华南区',
|
||||
address: '深圳福田区',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
area: '华南区',
|
||||
address: '中山市',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGBYX公司',
|
||||
area: '华北区',
|
||||
address: '梅州',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
area: '华南区',
|
||||
address: '韶关',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: '康康物业YX公司',
|
||||
area: '华北区',
|
||||
address: '广州天河区',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue