如何使用 Laravel - Vue.js 和 Element-ui 在 v-for 中设置水平线标签答案

【问题标题】：How to set tags in horizontal line in a v-for using Laravel - Vue.js and Element-ui如何使用 Laravel - Vue.js 和 Element-ui 在 v-for 中设置水平线标签
【发布时间】：2020-03-04 13:25:16
【问题描述】：

我正在尝试使用 <el-tag> 显示食谱的类别，但是它们都显示为一个在另一个之下：

我希望他们更像这样

这些标签位于具有这种结构的<el-table> 中

<el-table>
    <el-table-column
        prop="name"
        label="Name">
    </el-table-column>
    <el-table-column
        label="Category">
        <template slot-scope="scope">
            <div class="tag-container" v-for="cat in scope.row.categories">
                <el-tag type="success">{{cat.name}}</el-tag>
            </div>
        </template>
    </el-table-column>
    <el-table-column
        align="right">
        <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                size="medium"
                placeholder="Search"/>
        </template>

        <template slot-scope="scope">
            <div class="btn-link-edit action-button" @click="edit(scope.row)">
                <i class="fas fa-pencil-alt"></i>
            </div>
            <div class="btn-link-delete action-button" @click="remove(scope.row)">
                <i class="fas fa-trash"></i>
            </div>
        </template>
    </el-table-column>
</el-table>

我也创建了类

.tag-container {
    display: flex;
    flex-direction: row;
}

有没有办法让它们看起来像我展示的示例？

【问题讨论】：

使用flex box
@MikeRoss 这些在表格行中，还可以在那里使用吗？
添加更多代码或小提琴，以便我们提供更多帮助。
@MikeRoss 我已经添加了表结构
我用的是Element-ui表格组件element.eleme.io/#/en-US/component/table

标签： laravel vue.js element-ui

【解决方案1】：

使用下面的css类

.container {
  display: flex; /* or inline-flex */
  flex-direction: row
}

原来你不需要 flex

结帐this codepen

<el-table-column
    label="Category">
    <template slot-scope="scope">
        <template v-for="cat in scope.row.categories">
            <el-tag type="success">{{cat.name}}</el-tag>
        </div>
    </template>
</el-table-column>

【讨论】：

我最终用另一个 div 包装了 div，并将这个类设置为那个，并为标签类添加了一个边距，这给了我想要的结果，谢谢你的建议！

【解决方案2】：

我知道我回答这个问题已经很晚了，但我自己也遇到了这个问题，发现问题在于您在容器元素上使用了v-for。这就是为什么您的代码要创建多个包含子容器的容器，但实际上您只想在一个容器中创建多个子容器。此外，最好始终将 key 属性添加到您为 Vue.js 使用 v-for 的同一行

您的代码

<div class="tag-container" v-for="cat in scope.row.categories">
    <el-tag type="success">{{cat.name}}</el-tag>
</div>

可以解决您的问题的代码

<div class="tag-container">
    <el-tag type="success" v-for="cat in scope.row.categories">{{cat.name}}</el-tag>
</div>

【讨论】：