Как установить теги в горизонтальной линии в v-for с помощью Laravel - Vue.js и Element-ui

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>

Я также создаюкласс

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

Есть ли способ заставить их выглядеть как пример, который я показал?

Answer 1

Используйте следующий класс css

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

Оказывается, вам не нужно flex

оформить заказ этот код ручки

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