看了uniapp官网没有对table进行封装,就自己写了一个,分享给大家。
废话不多说直接贴代码,仅供参考(写的比较简单)
<template>
<view class="mytable">
<uni-table ref="table" :loading="loading" stripe :emptyText="emptyText" :stripe="stripe">
<uni-tr :style="[tdStyle]">
<uni-th :width="v.width || 40" :align="v.align || 'center'" v-for="(v,i) in Columns" :key="v.key">
<text :style="[v.ColumnsStyle]">{{v.title}}</text>
</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in tableData" :key="index">
<uni-td v-for="(v,i) in Columns" :key="i" :align="v.align || 'center'">
<view @click="tdClick(item)">
<template v-if="v.slot">
<slot :value="item[v.key]" :item="item" :index="index" :v="v" :name="v.key" />
</template>
<template v-else>
<text :style="[v?.tableDataStyle]">{{Processing (item[v.key],index,item,v)}}</text>
</template>
</view>
</uni-td>
</uni-tr>
</uni-table>
<view class="pagination-box" v-if="pagination">
<uni-pagination v-model="innerPage.page" :page-size="innerPage.size" :total="innterTotal"
:show-icon="defaultPagination.showIcon || true" :prev-text="defaultPagination.prevText"
:next-text="defaultPagination.nextText" @change="pageChange" />
</view>
</view>
</template>
<script setup>
/**
* 自定义表格
* tableData:表格数据
* Columns:表头
*
*/
import {
defineProps,
defineExpose,
ref,
defineEmits
} from 'vue'
const props = defineProps({
tdStyle: {
type: Object,
default: {
background: 'rgba(239,239,239,0.49)',
},
},
tableData: {
type: Array,
required: true,
},
Columns: {
type: Array,
required: true,
},
emptyText: {
type: String,
default: '暂无更多数据',
},
loading: {
type: Boolean,
default: false,
},
stripe: {
type: Boolean,
default: true,
},
pagination: {
type: Boolean,
default: false,
},
})
const emits = defineEmits(['tdClick'])
//处理数据
/**
* val:项数据
* index:索引
* item:tableData
* v:Columns
*/
const Processing = (val, index, item, v) => {
let data
if (!val && val !== 0) {
data = '-'
if (v.key === 'index') {
data = index + 1
}
} else {
data = val
if (v.key === 'index') {
data = index + 1
}
if (data === null || data === '' || data === undefined) {
data = '-'
}
}
return data
}
const tdClick = (item) => {
console.log(item)
emits('tdClick', item)
}
//分页
const innterTotal = ref(0)
const innerPage = ref({
page: 1,
size: 10,
})
const defaultPagination = ref({
showIcon: true,
prevText: '上一页',
nextText: '下一页',
})
</script>
<style lang="less" scoped>
.mytable {
width: 100%;
height: 100%;
overflow: auto;
box-sizing: border-box;
}
.pagination-box {
margin-top: 10px;
}
</style>