vue封装表格组件(vue3)

这年头，不用ui框架，还自己封装组件，也是有点稀奇（苦啊）
封装一个表格组件，带排序筛选(掉接口排序，不是本地物理排序)，一行点击

<template>
  <div>
    <table class="table">
      <thead>
        <tr class="table-head">
          <th v-for="item in column" :key="item['label']" :class="{ 'gray-head': grayHead }">
            <div @click="sort(item)">
              <span>{{ item['label'] }}</span>
              <i v-if="item['sort']" class="sort-icon"
                :class="[item['sortUp'] === 1 ? 'sort-icon-up' : (item['sortUp'] === 2 ? 'sort-icon-down' : '')]"></i>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <template v-if="datas.length">
          <tr v-for="dataItem in datas" @click="toUser(dataItem)" class="cursor-pointer rank-row">
            <td v-for="item in column" :key="item['label']" >
              <img v-if="item['label'] === '等级'" :src="`/img/levels/${dataItem[item['keyValue']]}.png`" alt="" height="40"
                class="level-img" />
              <template v-else>{{ dataItem[item['keyValue']] }}</template>
            </td>
          </tr>
        </template>
        <tr v-else>
          <td :colspan="column.length" rowspan="3">暂无数据</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  column: { type: Array, required: true },
  datas: { type: Array, required: true },
  grayHead: { type: Boolean, required: false }
})
const emit = defineEmits(['sortData', 'rowClick'])
// 一行点击
const toUser = (rowItem) => {
  emit('rowClick', rowItem)
}
// 排序
const sort = (item) => {
  if (!item.sort) {
    return false
  }
  emit('sortData', item)
}
</script>

<style lang="scss">
.rank-row:hover {
  background: #F7F7F7;
}

.table {
  width: 100%;
  border: none;

  th {
    background: transparent;
    border: 0;
    border-bottom: 2px solid #E6E6E6;
    height: 41px !important;
    line-height: 41px;
    padding: 10px;
    color: #333333;
    cursor: pointer;

    &.gray-head {
      background-color: #f5f5f5;
      font-size: 16px;
      font-weight: normal;
      border-bottom: none;
    }
  }

  td {
    border: 0;
    border-bottom: 1px solid #F7F7F7;
    height: 37px;
    line-height: 37px;
    padding: 10px;
    text-align: center;
    color: #333;

    .iconunfocus {
      width: 24px;
      height: 24px;
      cursor: pointer;
      margin: auto;
    }

    .level-img {
      height: 40px;
      margin: auto;
    }

    &.gray {
      color: #999;
    }

    .text-green {
      color: #348C37;
    }

    .text-red {
      color: #DD3C3C;
    }
  }
}
/* 排序三角 */
 .sort-icon {
   display: inline-block;
   height: 20px;
   width: 16px;
   line-height: 16px;
   font-weight: inherit;
   background: url('~/assets/img/sort_icons.png') no-repeat;
   vertical-align: middle;
   background-size: 44px;
   background-position: 1px 1px;
 }
 .sort-icon-up {
   background-position: -13px 0;
 }
 .sort-icon-down {
   background-position: -28px 0;
 }
</style>
// 使用---------------------------------------------------------------------------------------------------------
<Ttable :column=column :datas="dataList" @sort-data="sortData" @row-click="rowClick" />
const column = ref([
  { label: '11', sort: true, sortUp: 0, keyValue: 'aa', sortKey: 'a1' },
  { label: '22', sort: false, sortUp: 0, keyValue: 'bb' },
  { label: '33', sort: true, sortUp: 0, keyValue: 'cc', sortKey: 'a2' },
  { label: '44', sort: true, sortUp: 0, keyValue: 'dd', sortKey: 'a3' },
  { label: '55', sort: true, sortUp: 0, keyValue: 'ee', sortKey: 'a4' },
  { label: '66', sort: true, sortUp: 0, keyValue: 'ff', sortKey: 'a5' },
  { label: '77', sort: false, sortUp: 0, keyValue: 'score' },
  { label: '88', sort: false, sortUp: 0, keyValue: 'date' }
])
const dataList = ref([])
const sortData = (cur) => {
  let columTemp = column.value.map(item => {
    if (item.keyValue === cur.keyValue) {
      item.sortUp = item.sortUp + 1
      if (item.sortUp === 3) {
        item.sortUp = 1
      }
      sortVal.value = item['sortUp'] === 1 ? cur?.sortKey : `-${cur?.sortKey}`
    } else {
      item.sortUp = 0
    }
    return item
  })
  column.value = columTemp
  fetchData()
}