vue数据表中让列的内容左对齐

Question

我的 vue 组件中有一个数据表。

以下是我的 header 数组。

HeaderArray() {
            return [
                {text: 'Document', value: 'document',classList: 'w-1/3'},
                {text: 'Added by', value: 'added_user_name',classList: 'w-1/3'},
                {text: 'Expiration', value: 'valid_date'},
                {text: 'Validity', value: 'validity_status',classList: 'w-1/3', align:'start'},
                {text: '', value: 'actions'},
            ];
        },

Validity 列的单元格内容居中，但我希望它们左对齐。

尽管我尝试了align:'start'内容显示中心...

如何让它们左对齐？

第 header 列左对齐...

Answer 1

默认情况下，vue-data-table 中的列数据左对齐。因此，所有列都已经左对齐，但是如果您想让其他列居中对齐并且 validity 左对齐，那么您必须在所有其他列中应用 align: 'center' 属性 headers object 而不是更改 validity 列。

演示：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
                {text: 'Document', value: 'document',classList: 'w-1/3', align:'center'},
                {text: 'Added by', value: 'added_user_name',classList: 'w-1/3', align:'center'},
                {text: 'Expiration', value: 'valid_date', align:'center'},
                {text: 'Validity', value: 'validity_status',classList: 'w-1/3'},
                {text: 'Actions', value: 'actions', align:'center'},
            ],
      documentDetails: [
        {
          document: 'Document 1',
          added_user_name: 'user 1',
          valid_date: '04-12-2022',
          validity_status: 'valid',
          actions: 'Edit'
        },
        {
          document: 'Document 2',
          added_user_name: 'user 2',
          valid_date: '05-12-2022',
          validity_status: 'invalid',
          actions: 'Edit'
        }
      ],
    }
  },
})

<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="documentDetails"
      class="elevation-1"
    ></v-data-table>
  </v-app>
</div>

vue数据表中让列的内容左对齐

Make the content of the column align left in vue datatable

vue.js

vuetify.js

tailwind-css