menduner/src/views/enterprise/personnelManagement/components/table.vue

<template>
  <div>
    <div class="text-end">
      <v-btn color="primary" :disabled="selected.length ? false : true" variant="tonal" @click="handleInappropriate">不合适</v-btn>
    </div>
    <v-data-table
      v-model="selected"
      :items="items"
      class="mt-3"
      :headers="headers"
      show-select
      item-value="id"
      hover
      height="60vh"
      hide-default-footer
    >
      <template #bottom></template>
      <template v-slot:item.actions>
        <v-btn color="primary" variant="text">不合适</v-btn>
      </template>
    </v-data-table>
    <CtPagination
      v-if="total > 0"
      :total="total"
      :page="query.pageNo"
      :limit="query.pageSize"
      @handleChange="handleChangePage"
    ></CtPagination>
  </div>
</template>

<script setup>
defineOptions({ name: 'table-page'})
import { ref } from 'vue'

const selected = ref([])
const total = ref(3)
const query = ref({
  pageNo: 1,
  pageSize: 10
})
const headers = [
  { title: '牛人', value: 'name' },
  { title: '基本信息', value: 'info' },
  { title: '最近工作经历', value: 'work' },
  { title: '教育经历', key: 'school', value: item => `${item.startYear}-${item.endYear} ${item.school}` },
  { title: '应聘职位', value: 'jobName' },
  { title: '操作', value: 'actions' }
]
const items = [
  {
    name: '黄桐奕',
    info: '本科·21岁·25年应届生·5-8K',
    work: 'Java 江门市天天生活科技有限公司',
    school: '五邑大学',
    jobName: 'Java',
    startYear: '2021',
    id: 1,
    endYear: '2025'
  },
  {
    name: '黄桐奕',
    info: '本科·21岁·25年应届生·5-8K',
    work: 'Java 江门市天天生活科技有限公司',
    school: '五邑大学',
    jobName: 'Java',
    startYear: '2021',
    endYear: '2025',
    id: 2
  },
  {
    name: '黄桐奕',
    info: '本科·21岁·25年应届生·5-8K',
    work: 'Java 江门市天天生活科技有限公司',
    school: '五邑大学',
    jobName: 'Java',
    startYear: '2021',
    endYear: '2025',
    id: 3
  }
]

const handleChangePage = () => {}

const handleInappropriate = () => {
  console.log(selected.value, 'handleInappropriate')
}
</script>

<style scoped lang="scss">
:deep(.v-table > .v-table__wrapper > table > thead) {
  background-color: #f7f8fa !important;
}
:deep(.v-selection-control__input) {
  color: var(--v-primary-base) !important;
}
</style>