代码之家 › 专栏 › 技术社区 › Nancy

如何使用Laravel-Vue.js和元素ui在v-for中设置水平行中的标记

element-ui vue.js laravel

0

Nancy · 技术社区 · 5 年前

我试着展示菜谱的种类 <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;
}

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

1 回复 | 直到 5 年前

1

2

Mike Ross B.Kocis 5 年前

使用以下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>