vuetify 表展开箭头出现在左边而不是右边

Question

使用 vuetifyexpanded table但展开箭头显示在左侧作为第一项。如可扩展行示例中所示，如何在最后（右侧）显示它？

 <template>
      <v-row justify="center">
        <v-dialog
          v-model="dialog"
          fullscreen
          hide-overlay
          transition="dialog-bottom-transition"
        >
          <template v-slot:activator="{ on, attrs }">
            <v-col align="center">
              <v-btn large light outlined v-bind="attrs" v-on="on">
                Add more to inventory
                <v-icon right dark>mdi-plus</v-icon>
              </v-btn>
              <p class="text-caption text-center">Want to sell more services?</p>
            </v-col>
          </template>
          <v-card>
            <v-toolbar light>
              <v-btn icon light @click="dialog = false">
                <v-icon>mdi-close</v-icon>
              </v-btn>
              <v-spacer></v-spacer>
              <v-toolbar-title>Select available services</v-toolbar-title>
                         </v-toolbar>
            <v-container>
              <v-col>
                <v-text-field
                  v-model="search"
                  append-icon="mdi-magnify"
                  label="Search"
                  single-line
                  hide-details
                  filled
                ></v-text-field>
              </v-col>
              <v-data-table
                v-model="selected"
                :headers="headers"
                :items="listings"
                :single-select="singleSelect"
                item-key="name"
                show-select
                :single-expand="true"
                :expanded.sync="expanded"
                show-expand
                class="elevation-1"
                :search="search"
              >
                <template v-slot:expanded-item="{ headers, item }">
                  <td :colspan="headers.length">
                    More info about {{ item.summary }}
                  </td>
                </template>
              </v-data-table>
            </v-container>
          </v-card>
        </v-dialog>
      </v-row>
    </template>
    
    <script>
    export default {
      data() {
        return {
          dialog: false,
          expanded: [],
          singleSelect: false,
          selected: [],
          search: '',
          headers: [
            {
              text: 'Service Name',
              align: 'start',
              sortable: false,
              value: 'name',
            },
            { text: 'Included items', value: 'subItems' },
            { text: 'Price', value: 'price' },
            { text: 'Status', value: 'status' },
          ],
          listings: [
            {
              name: 'First item',
              subTests: 159,
              price: 'Not set',
              summary:
                'Lorem ipsum',
              status: 'Inactive',
            },
            {
              name: Ssecond item',
              subTests: 159,
              price: 'Not set',
              summary:
                'Lorem ipsum',
              status: 'Inactive',
            },
            {
              name: 'Third item',
              subTests: 159,
              price: 'Not set',
              summary:
                'Lorem ipsum dolor',
              status: 'Inactive',
            },
          ],
        }
      },
    }
    </script>

Answer 1

在查看并测试了上面的代码后，我发现如果将对象添加{ text: '', value: 'data-table-expand' }到headers数组中它可以工作 。这个文档解释了原因。基本上将摘要字符串的名称从summaryto交换data-table-expand。