css - 样式未对齐使用和在一个关于材料 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
属性的类。或者您可以阅读他们的文档并使用他们的列语法。他们可能有某种类来添加列。
推荐阅读
- python-3.x - 如何使用 TensorFlow 训练两塔模型?
- algorithm - NIce Subsequence - 最长递增子序列的变体
- redux - 登录后不导航到经过身份验证的页面
- r - 通过列选择将数据帧拆分为多个数据帧
- c++ - 为什么这个合并排序实现不能正常工作?
- r - 选择嵌套列表的一个元素并将其转换为 R 中的数据框
- r - 需要用固定均值 25 和 st 2 替换年龄中的 NA
- reactjs - lit-element 和 React 的主要区别
- javascript - 无法加载通过 React App 中的父组件作为道具传递给子组件的图像
- mysql - 如何在 SQL 上创建显示订单行的新列