Closed
Description
🏷 Version
Package | Version |
---|---|
@antv/s2 | 2.0.0-next.28 |
@antv/s2-react | |
@antv/s2-vue |
Sheet Type
- PivotSheet
- TableSheet
- GridAnalysisSheet
- StrategySheet
- EditableSheet
🖋 Description
⌨️ Code Snapshots
使用官网的例子https://s2.antv.antgroup.com/examples/layout/custom#custom-table-size 可以进行复现
精简下代码
import { S2DataConfig, S2Options, TableSheet } from '@antv/s2';
fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
.then((res) => res.json())
.then(async (data) => {
// 详情请查看: https://s2.antv.antgroup.com/zh/docs/manual/advanced/custom/cell-size
const container = document.getElementById('container');
const s2DataConfig: S2DataConfig = {
fields: {
columns: ['type', 'province', 'city', 'price', 'cost'],
},
meta: [
{
field: 'province',
name: '省份',
},
{
field: 'city',
name: '城市',
},
{
field: 'type',
name: '商品类别',
},
{
field: 'price',
name: '价格',
},
{
field: 'cost',
name: '成本',
},
],
data,
};
const s2Options: S2Options = {
width: 600,
height: 480,
style: {
// 列头宽高配置 (优先级: colCell.widthByField > colCell.width > dataCell.width)
colCell: {
width: 60,
},
},
};
const s2 = new TableSheet(container, s2DataConfig, s2Options);
await s2.render();
});
使用s2 v1.x 版本
import { TableSheet } from '@antv/s2';
fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
.then((res) => res.json())
.then((data) => {
// 详情请查看: https://s2-v1.antv.antgroup.com/zh/docs/manual/advanced/custom/cell-size
const container = document.getElementById('container');
const s2DataConfig = {
fields: {
columns: ['type', 'province', 'city', 'price', 'cost'],
},
meta: [
{
field: 'province',
name: '省份',
},
{
field: 'city',
name: '城市',
},
{
field: 'type',
name: '商品类别',
},
{
field: 'price',
name: '价格',
},
{
field: 'cost',
name: '成本',
},
],
data,
};
const s2Options = {
width: 600,
height: 480,
style: {
colCfg: {
width: 60,
},
},
};
const s2 = new TableSheet(container, s2DataConfig, s2Options);
s2.render();
});
补充:后面查官方文档和代码,发现next版本加了一个新的配置 colResizeType
🔗 Reproduce Link
🤔 Steps to Reproduce
😊 Expected Behavior
希望在自定义了列宽之后,拖动列宽只有对应的列发生变化
😅 Current Behavior
💻 System information
Environment | Info |
---|---|
System | |
Browser |