文章目录
- 项目场景：
- 实现效果
- 创建表格组件文件
- 页面中使用
- 实现方法
项目场景：
在实际的应用场景中，表格是一个非常常见的需求，如果每一个的表格都自己去手写的话非常的浪费时间，并且当中的代码冗余量非常大，所以很有必要进行封装。
实现效果
这里测试数据并没有放太多，大概看个效果就可以了
这里的表头、表体、以及操作都是动态的，主要实现的方法在后续会进行讲解。
创建表格组件文件
tableList.js
<template>
<view class="uni-container">
<uni-table ref="table" :loading="loading" border emptyText="暂无更多数据">
<!-- 表头 -->
<uni-tr>
<uni-th v-for="(item,index) in tableConfig" :width="item.width" :align="item.align" :key="index" class="tableHeader">{{ item.label }}</uni-th>
</uni-tr>
<!-- 表体 -->
<uni-tr v-for="(item, index) in tableData" :key="index">
<uni-td v-for="(items, indexs) in item" align="center">{{ items }}</uni-td>
<uni-td v-if="tableOperate.length != 0" align="center">
<button class="tableBut" size="mini" v-for="(itemBut) in tableOperate">{{ itemBut }}</button>
</uni-td>
</uni-tr>
</uni-table>
</view>
</template>
<script>
export default {
data() {
return {
}
},
props:{
tableData:{
default(){
return[]
}
},
tableConfig:{
default(){
return[]
}
},
loading:{
default(){
return[]
}
},
tableOperate:{
default(){
return[]
}
},
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.tableHeader{
font-size: 11px;
padding: 0px;
background-color: #eee;
font-weight: 500;
}
.tableBut{
font-size: 11px;
}
.uni-table-td{
padding: 6px 8px;
}
</style>
使用说明：
tableData ： 表格数据
tableConfig ： 表格配置
loading ：是否在加载中
tableOperate ：操作
tableData：[
{
"name": "张三",
"age": "21",
"gender": "男"
},
{
"name": "李四",
"age": "23",
"gender": "女"
},
{
"name": "王五",
"age": "22",
"gender": "男"
}
]
taleConfig: [
{
"label": "姓名",
"align": "center",
"width": 90,
"key": "name"
},
{
"label": "年龄",
"align": "center",
"width": 55,
"key": "age"
},
{
"label": "性别",
"align": "center",
"width": 55,
"key": "gender"
},
{
"label": "详情",
"align": "center",
"width": 50
}
]
loading: true : 加载中，false : 未加载
tableOperate: [
"查看","编辑"
]
页面中使用
<template>
<view>
<tableList :tableData="tableData" :tableConfig="tableConfig" :loading='tableLoading' :tableOperate='tableOperate'></tableList>
</view>
</template>
//引入并在component中注册组件
<script>
import tableList from '../components/tableList.vue'
export default {
components:{
tableList
},
data(){
return{
tableData:[
{
"name": "张三",
"age": "21",
"gender": "男"
},
{
"name": "李四",
"age": "23",
"gender": "女"
},
{
"name": "王五",
"age": "22",
"gender": "男"
}
], //列表数据
tableOperate:['查看','编辑'], //列表操作
tableConfig: [
{
"label": "姓名", //显示名称
"align": "center", //位置
"width": 90, //宽度
"key": "name" //值
},
{
"label": "年龄",
"align": "center",
"width": 55,
"key": "age"
},
{
"label": "性别",
"align": "center",
"width": 55,
"key": "gender"
},
{
"label": "详情",
"align": "center",
"width": 50
}
], //列表配置
tableLoading:false, //列表加载
}
}
}
</script>
实现方法
通过父组件调用时传入的数据、配置、操作、加载状态，子组件进行接收。
首先先通过第一个<uni-tr></uni-tr>来作为表头，在表头中利用v-for循环渲染表头的每一列，这里的话表头就完成渲染了。
除了第一行<uni-tr></uni-tr>为表头外其余的都为表体，也是通过v-for循环进行渲染<uni-tr></uni-tr>，这样子就完成渲染每一行了，但是此时内容都是为空的因为<uni-tr></uni-tr>中还有<uni-td><</uni-td>所以还需要在每一个<uni-tr></uni-tr>中循环渲染<uni-td><</uni-td>。
此时基本就完成了表格的渲染，但是假如还需要操作列时，这个时候每一行的操作列都是空的，因为这里v-for循环渲染的源数据是tableData，而tableData中是不会保存操作列的数据的，所以需要传入一个tableOperate，当tableOperate不为空时就会多渲染一列出来，而这里面的按钮之所以要用v-for进行循环是考虑到有些时候有多个操作所以依旧需要循环去渲染。
到这里的话基本上的表格封装就完成了，如果说还有其他的需求的话我这里没有写到也可以自行根据需求进行改造。
