1

在我的 React 项目中，我使用的是Shopify Polaris DataTable。它看起来像这样：

在此处输入图像描述

当我单击一行的铅笔按钮时，徽章会发生变化，看起来像这样：

在此处输入图像描述

这里的问题是，当更改那个徽章时，所有的列和它们的元素都会调整一点，那个短动画并不漂亮。

如果列不改变，我会更喜欢，但由于这不是一个普通的 html 表，我不知道该怎么做。

相关代码是这样的：

<Card>
    <Card.Section>
        <DataTable
            columnContentTypes={[
                'text',
                'text',
                'text'
            ]}
            headings={[
                'Category',
                'Enabled',
                'Actions'
            ]}
            rows={categories}
            verticalAlign="middle"
       />
    </Card.Section>
</Card>

要为行创建数据，我使用的是：

for (let category of allCategories.data) {
    let tempArray = [
        category.name, 
        enabledOrDisabledTag(category.visibility),
        <ButtonGroup spacing="extraTight"><Button onClick={() => editCategory(category)} icon={<Icon source={EditMajor} color="base" />}></Button><Button onClick={() => deleteCategory(category.uuid)} destructive icon={<Icon source={DeleteMajor} color="base" />}></Button></ButtonGroup>      
    ];

    convertedData.push(tempArray);
 }

 setCategories(convertedData);

有谁知道如何阻止表格调整大小？或者阻止行元素改变位置？

我感谢每一个帮助！

4

0 回答 0