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

Question

我试图用 <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>

我还创建了 class

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

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

Answer 1

使用以下css class

.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>

Answer 2

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

的同一行

您的代码

<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>

如何使用 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