Question

免责声明：我只是在学习 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>

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

如果可能影响实施，采取的措施是

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

滑动按钮的替代方法（如果不可能）是使用弹出菜单制作数字和文本按钮。我想这可能会影响如何定义布局。

Answer 1

通常使用 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 个答案: