vuetify数据表的列宽如何固定

Question

我有一个 vuetify 数据表，我已经为每一列设置了宽度，并且我想固定表的列宽度，但由于它们的内容，它已经变大了，它们的宽度是多少并不重要。 如何固定列的宽度？

  <template>
    <v-data-table
        v-if="physicianAccountsLocalData"
        :headers="headers"
        :items="physicianAccountsLocalData"
        hide-default-footer
        class="data-table"
        :items-per-page="-1"
      >
        <template #[`item.isActive`]="props">
          <BaseSwitch
            v-model="props.item.isActive"
            class="switch-siam-table"
            @change="changeModel($event, props)"
          />
        </template>
        <template #[`item.location`]="props">
          <span
            class="location"
            :class="{'text-disable-state': !props.item.isActive}"
          >
            {{ props.item.location }}
          </span>
        </template>
        <template #[`item.name`]="props">
          <span
            class="name"
            :class="{'text-disable-state': !props.item.isActive}"
          >
            {{ props.item.name }}
          </span>
        </template>
      </v-data-table>
  </template>

  <script>
     data() {
    return {
         headers: [
          { text: 'فعال', value: 'isActive', sortable: false, width: '110px', align: 'right' },
          { text: 'نوع', value: 'location', sortable: false, width: '13%', align: 'start' },
          { text: 'نام', value: 'name', sortable: false, width: '200px' }
          ],
         }
      }
  </script>

Answer 1

我也面临着类似的问题。有解决办法吗？