文章/答案/技术大牛

发布

社区首页 >问答首页 >是否可以在列表中创建网格布局？

问是否可以在列表中创建网格布局？
EN

Stack Overflow用户

提问于 2021-07-26 16:07:51

回答 1查看 299关注 0票数 1

免责声明:我只是在学习vue.js和vuetify，我对javascript不太熟悉。我正在编写我的第一个vue.js应用程序。

我用的是vue 2.x和vuetify 2.x。

我需要创建一个可滚动的项目列表，用户可以对其执行操作。现在，我只关心列表项的布局。

该项目由两个可见信息组成，一个数字和一个文本(如清单)应显示在两列中。数字应在其列中右对齐，文本左对齐。

这就是我到目前为止所拥有的。

<template>
  <v-list dense>
    <template v-for="(item, index) in items">
      <v-list-item :key="item.r">
        <v-list-item-content class="font-weight-bold">
          <v-list-item-title> 
            {{ item.n }} {{ item.t }}
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-divider :key="index"></v-divider>
    </template>
  </v-list>
</template>

<script>
export default {
  name: "itemList",
  data() {
    return {
      items: this.$store.state.currentItems,
    };
  },
};
</script>

是否可以在列表项中使用布局？如果没有，如何创建所需的列对齐方式？

如果它可能影响实现，这些操作是

使项目成为具有多个可选操作的滑动按钮
或使数字和文本单独单击可弹出菜单的平面按钮
手动重新排序拖放的列表项目。

一个替代滑动按钮(如果不可能)是使数字和文本平按钮与弹出菜单。我想这可能会影响如何定义布局。

vue.js

vuetify.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-26 18:03:14

通常，通过使用v-row和v-col，您可以实现布局，这在v-list-item-content内部是正确的，例如，检查下面的代码(我不确定我是否理解了您所要求的布局，但它必须给您一个提示)

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    items: [{
        t: 'title one',
        n: 1
      },
      {
        t: 'title two',
        n: 2
      },
      {
        t: 'title three',
        n: 3
      },
      {
        t: 'title four',
        n: 4
      },
    ],
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-list dense>
          <template v-for="(item, index) in items">
            <v-list-item :key="item.n">
              <v-list-item-content class="font-weight-bold">
                <v-row>
                  <v-col cols="6">
                    <v-row no-gutters justify="end">{{ item.n }}</v-row>
                  </v-col>
                  
                  <v-col cols="6">
                    <v-row no-gutters>{{ item.t }}</v-row>
                  </v-col>
                </v-row>
              </v-list-item-content>
            </v-list-item>
            <v-divider :key="`divider-${item.n}`"></v-divider>
          </template>
        </v-list>
      </v-container>
    </v-main>
  </v-app>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68533152

复制

相似问题

问是否可以在列表中创建网格布局？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以在列表中创建网格布局？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以在列表中创建网格布局？
EN