在 Material VueJS 上的 <md-table-cell> 上使用 <md-button> 和 <md-icon> 的样式未对齐

Question

我想将操作放在同一个数据行上，我有两个操作，我使用一个按钮和一个图标来实现它，如下代码所示。

    <md-table v-model="gruposDeInsumos" md-sort="codigo" md-sort-order="asc" md-card>
        <md-table-row slot="md-table-row" slot-scope="{item}">
            <md-table-cell class="item-codigo" md-label="Código" md-sort-by="codigo"> {{item.codigo}}</md-table-cell>
            <md-table-cell class="item-nome" md-label="Nome" md-sort-by="nome"> {{item.nome}}</md-table-cell>
            <md-table-cell md-label="Tipo" md-sort-by="tipo"> {{item.tipo === 'products' ? 'Produtos' : 'Serviços'}}</md-table-cell>
            <md-table-cell md-label="Ações"> 
                <md-button>
                    <md-icon>edit</md-icon>
                </md-button>
                <md-button>
                    <md-icon>delete</md-icon>
                </md-button>
            </md-table-cell>
        </md-table-row>
    </md-table>

结果如下：

如您所见，我在同一表格行上有两行，这发生在我添加了两个操作按钮（编辑和删除）之后。那么，我如何修复它以使这些组件保持在同一行？

除此之外，如果有人知道，我该如何选择<md-icon> 颜色？

Answer 1

您可以使用自己的 CSS 并应用包含 display: flex 属性的类。或者您可以阅读他们的文档并使用他们的列语法。他们可能有某种类来添加列。