这年头，不用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()
}