[英]Style unaligned using <md-button> with <md-icon> on a <md-table-cell> on Material VueJS
我想将这些动作放在同一数据行上,我有两个动作,要做到这一点,我使用一个按钮和一个图标作为下面的代码。
<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>
颜色?
您可以使用自己的CSS并应用包含display: flex
属性的类。 或者,您可以阅读其文档并使用其列语法。 他们可能有某种添加列的类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.