[Vuejs]-How can I define the v-data-table's footer like this way?

You have to customize the external footer & pagination. For example…

       <v-row class="text-center px-4 align-center">
            <v-col class="text-no-wrap shrink">
                Total {{ totalRecords }} records
            </v-col>
            <v-col>
                <v-pagination
                    v-model="page"
                    :length="pageCount">
                </v-pagination>
            </v-col>
            <v-col>
                <v-select
                    dense
                    outlined
                    hide-details
                    :value="itemsPerPage"
                    label="Items per page"
                    @change="itemsPerPage = parseInt($event, 10)"
                    :items="perPageChoices">
                </v-select>
            </v-col>
            <v-col>
                <v-text-field
                    v-model="page"
                    label="Go to page"
                    outlined
                    hide-details
                    dense
                    @input="page = parseInt($event, 10)"
                ></v-text-field>
            </v-col>
       </v-row>

Demo