列宽拖拽
开启列宽拖拽
ts
interface Column {
resizable: boolean;
}
源码
vue
<template>
<div class="base-view">
<div style="width: 100%; height: 600px; border: 2px solid var(--el-color-border)">
<Grid :columns="columns" :list="list" border></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,
resizable: true,
}));
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(15)];
const list: ListItem[] = generateList(columns, 20);
</script>
支持设置最大最小宽
ts
interface Column {
resizable: boolean;
minWidth: number;
maxWidth: number;
}
源码
vue
<template>
<div style="width: 100%; height: 600px; border: 2px solid var(--el-color-border)">
<Grid :columns="columns" :list="list"></Grid>
</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,
resizable: true,
minWidth: 100,
maxWidth: 300,
}));
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(10)];
const list: ListItem[] = generateList(columns, 20);
</script>