自定义类/样式
表头行自定义
源码
vue
<template>
<div class="base-view">
<div style="width: 100%; height: 600px; border: 2px solid var(--el-color-border)">
<Grid
:columns="columns"
:list="list"
:header-row-class-name="getCustomHeaderClass"
:header-row-style="getCustomHeaderStyle"
></Grid>
</div>
</div>
</template>
<script setup lang="ts">
import { Grid, type Column, type ListItem } from 'kita-grid';
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
field: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 200,
}));
const generateList = (columns: ReturnType<typeof generateColumns>, length = 200, prefix = 'row-') =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.field] = `Row ${rowIndex} - Col ${columnIndex}`;
return rowData;
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
},
);
});
const columns: Column[] = [...generateColumns(6)];
const list: ListItem[] = generateList(columns, 10);
const getCustomHeaderClass = () => {
return 'custom-header-row';
};
const getCustomHeaderStyle = () => {
return 'height: 50px; color: red;';
};
</script>
<style lang="scss">
.base-view {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.custom-header-row {
background-color: #f8f8f8;
}
</style>
表头单元格自定义
源码
vue
<template>
<div class="base-view">
<div style="width: 100%; height: 600px; border: 2px solid var(--el-color-border)">
<Grid
:columns="columns"
:list="list"
:header-cell-class-name="getCustomHeaderClass"
:header-cell-style="getCustomHeaderStyle"
></Grid>
</div>
</div>
</template>
<script setup lang="ts">
import { Grid, type Column, type ListItem } from 'kita-grid';
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
field: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 200,
}));
const generateList = (columns: ReturnType<typeof generateColumns>, length = 200, prefix = 'row-') =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.field] = `Row ${rowIndex} - Col ${columnIndex}`;
return rowData;
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
},
);
});
const columns: Column[] = [...generateColumns(8)];
const list: ListItem[] = generateList(columns, 10);
const getCustomHeaderClass = () => {
return 'custom-header-cell';
};
const getCustomHeaderStyle = ({ columnIndex }) => {
if (columnIndex === 0) {
return 'color: red';
}
return '';
};
</script>
<style lang="scss">
.base-view {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.custom-header-cell:nth-child(odd) {
background-color: #f8f8f8;
}
</style>
表内行自定义
源码
vue
<template>
<div class="base-view">
<div style="width: 100%; height: 600px; border: 2px solid var(--el-color-border)">
<Grid
:columns="columns"
:list="list"
:row-class-name="getRowClass"
:row-style="getRowStyle"
></Grid>
</div>
</div>
</template>
<script setup lang="ts">
import { Grid, type Column, type ListItem } from 'kita-grid';
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
field: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 200,
}));
const generateList = (columns: ReturnType<typeof generateColumns>, length = 200, prefix = 'row-') =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.field] = `Row ${rowIndex} - Col ${columnIndex}`;
return rowData;
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
},
);
});
const columns: Column[] = [...generateColumns(8)];
const list: ListItem[] = generateList(columns, 20);
const getRowClass = ({ rowIndex }) => {
if (rowIndex === 2) {
return 'success-row';
}
if (rowIndex === 4) {
return 'warning-row';
}
return '';
};
const getRowStyle = ({ rowIndex }) => {
if (rowIndex === 3) {
return 'color: red';
}
return '';
};
</script>
<style lang="scss">
.base-view {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.success-row {
background-color: #fdf6ec !important;
}
.warning-row {
background-color: #f0f9eb !important;
}
</style>
表内单元格自定义
源码
vue
<template>
<div class="base-view">
<div style="width: 100%; height: 600px; border: 2px solid var(--el-color-border)">
<Grid
:columns="columns"
:list="list"
:cell-class-name="getCellClass"
:cell-style="getCellStyle"
></Grid>
</div>
</div>
</template>
<script setup lang="ts">
import { Grid, type Column, type ListItem } from 'kita-grid';
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
field: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 200,
}));
const generateList = (columns: ReturnType<typeof generateColumns>, length = 200, prefix = 'row-') =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.field] = `Row ${rowIndex} - Col ${columnIndex}`;
return rowData;
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
},
);
});
const columns: Column[] = [...generateColumns(8)];
const list: ListItem[] = generateList(columns, 20);
const getCellClass = ({ columnIndex }) => {
if (columnIndex === 1) {
return 'success-col';
}
if (columnIndex === 3) {
return 'warning-col';
}
return '';
};
const getCellStyle = ({ columnIndex }) => {
if (columnIndex === 2) {
return 'color: red';
}
return '';
};
</script>
<style lang="scss">
.base-view {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.success-col {
background-color: #fdf6ec !important;
}
.warning-col {
background-color: #f0f9eb !important;
}
</style>