【简介】：本文将介绍一个基于Vue框架和elementUi的自定义表格组件ByTable，通过阅读本文，你将了解到ByTable组件的使用方式、属性和插槽的配置方法，以及如何通过自动请求接口获取表格数据和实现分页功能。
1. 组件介绍
ByTable是一个通用的Vue表格组件，用于展示数据并提供分页功能。它具有灵活的配置选项和插槽，可以满足不同场景下的表格需求。
2. 组件用法
在使用ByTable组件时，你可能需要传递以下几个属性：
-
column：表头配置数组，用于定义表格的列和相关属性。 -
showPage：是否显示分页，默认为true。 -
params：请求参数对象，用于发送网络请求时传递参数。 -
requestUrl：请求数据的接口路径，应该是一个函数。 -
isRequest：是否自动请求接口，默认为true。 -
data：传递给表格的数据数组。 -
border：是否显示表格边框，默认为true。 -
dataAttrs：自定义配置数据和总数的字段，默认为['list', 'total']。 -
page：自定义页数的字段，默认为'pageNum'。 -
total：数据总数。
除了以上属性，ByTable组件还提供了以下两个插槽：
-
slotKey：用于自定义表格单元格数据的插槽。 -
slotHeaderKey：用于自定义表头的插槽。
并且by-table支持大部分elementui中table组件的属性，如果是设置Table-column Attributes可以直接通过column这个属性中的对象进行传递，例如
[{
prop: 'name',
label: '姓名',
align: 'center',
slotKey: 'name',
slotHeaderKey: 'nameHearder'
}]3. 组件源代码
<template>
<div class="by-table">
<el-table
v-bind="$attrs"
v-on="$listeners"
header-row-class-name="by-table-header"
v-loading="loading"
:border="border"
:data="isRequest ? tableData : data"
>
<template v-for="columnItem in column">
<!-- 序号 -->
<el-table-column
v-if="columnItem.type === 'index'"
:resizable="false"
:key="columnItem.type + 'xuhao'"
v-bind="columnItem"
></el-table-column>
<!-- 不是序号的走这里 -->
<el-table-column
:key="columnItem.prop"
v-bind="columnItem"
v-else
:resizable="false"
>
<!-- 表格里面的数据 -->
<template slot-scope="{ row }">
<slot
:row="row"
v-if="columnItem.slotKey"
:name="columnItem.slotKey"
>
</slot>
<template v-else>
{{ row[columnItem.prop] || "-" }}
</template>
</template>
<!-- 自定义表头 -->
<slot slot="header" :name="columnItem.slotHeaderKey"></slot>
</el-table-column>
</template>
</el-table>
<!-- 分页 -->
<template v-if="showPage">
<by-pagination
:total=" isRequest ? tableTotal : total"
v-model="current"
@currentChange="currentChange"
></by-pagination>
</template>
</div>
</template>
<script>
export default {
name: 'ByTable',
props: {
// 表头
column: {
type: Array,
default: () => [],
},
// 显示分页
showPage: {
type: Boolean,
default: true,
},
// 请求的参数
params: {
type: Object,
default: () => {},
},
// 请求路径
requestUrl: {
type: Function,
default: () => {},
},
// 是否自动请求接口 默认是自动请求
isRequest: {
type: Boolean,
default: true,
},
// 传递过来的表格数据
data: {
type: Array,
default: () => [],
},
// 是否有边框 默认是有边框的
border: {
type: Boolean,
default: true,
},
// 自定义配置数据和总数的字段，默认是list、total
dataAttrs: {
type: Array,
default: () => {
return ['list', 'total']
},
},
// 自定义页数的字段
page: {
type: String,
default: 'pageNum',
},
// 总数
total: {
type: [Number, String],
default: 0
}
},
data() {
return {
current: 1,
loading: false,
tableData: [],
tableTotal: 0,
}
},
mounted() {
// 这是自动请求接口的判断
if (this.isRequest) {
this.loading = true
this.requestData()
}
},
methods: {
// 分页
currentChange(val) {
// 如果是配置了自动请求接口走这里
if (this.isRequest) {
this.params[this.page] = val
this.requestData()
return
}
// 没有就走这里
this.$emit('currentChange', val)
},
// 请求数据
requestData() {
// pre 请求数据前做的一些处理
this.$emit('pre')
this.requestUrl(this.params)
.then((res) => {
if (res?.success) {
// postpose请求数据后对数据做处理可以走这里，因为对象地址没有变，所以你在父组件修改了数据，by-table的数据页会跟着改变的
this.$emit('postpose', res.data)
this.tableData = res.data[this.dataAttrs[0]]
this.tableTotal = res.data[this.dataAttrs[1]]
}
})
.finally(() => {
this.loading = false
})
},
},
}
</script>
<style>
.by-table-header th.el-table__cell {
background-color: #f5f5f5;
}
</style>
4. 示例代码
下面是一个示例代码，演示了如何使用ByTable组件：
<template>
<by-table :data="tableData" :column="columnList" :isRequest="false">
<!-- 自定义表格单元格数据插槽 -->
<template #name="{row}">
{{ row }}
</template>
<!-- 自定义表头插槽 -->
<template #nameHeader>
123456
</template>
</by-table>
</template>
<script>
export default {
data() {
return {
tableData: [],
columnList: [
{
prop: 'name',
label: '姓名',
align: 'center',
slotKey: 'name',
slotHeaderKey: 'nameHeader'
},
// 其他列配置...
]
}
}
}
</script>在上面的示例中，我们传递了表格数据tableData和表头配置数组columnList给ByTable组件。同时，通过插槽的方式，自定义了表格单元格数据和表头的显示内容。
5. 自动请求接口和分页功能
如果需要通过接口获取数据并实现分页功能，可以使用ByTable组件提供的自动请求接口功能。通过配置requestUrl和params属性，以及自定义的数据字段和总数字段，可以轻松实现自动请求接口和分页功能。下面是相应的代码示例和解释：
<template>
<by-table :column="columnList" :requestUrl="getUserAnalysis" :params="params" ref="byTable"></by-table>
</template>
<script>
export default {
data() {
return {
columnList: [
// 表头配置...
],
params: {
// 请求参数...
},
columnList: [
{
prop: 'name',
label: '姓名',
align: 'center',
slotKey: 'name',
slotHeaderKey: 'nameHeader'
},
// 其他列配置...
]
}
},
methods: {
getUserAnalysis(params) {
// 这里是发送网络请求的函数，根据实际情况进行实现
return axios.get('/api/user/analysis', { params })
}
},
mounted() {
}
}
</script>
在上面的示例中，我们传递了请求接口的函数getUserAnalysis给ByTable组件的requestUrl属性，以及请求参数params。组件会触发自动请求接口。
当分页发生变化时，ByTable组件会自动更新params中的pageNum字段，并重新请求数据。
这样，ByTable组件会自动发送网络请求，获取数据，并根据返回的数据更新表格和分页。
通过上述代码，你可以轻松实现自动请求接口和分页功能，无需手动处理数据和分页逻辑。
5. 总结
本文介绍了Vue组件ByTable的用法和属性配置，以及如何通过自动请求接口和分页功能实现数据的获取和展示。通过合理配置表头、插槽和相关属性，你可以根据具体需求创建灵活的表格组件。文章来源：https://www.toymoban.com/news/detail-496820.html
下一篇：Vue组件解析：自定义弹窗组件ByDialog详解文章来源地址https://www.toymoban.com/news/detail-496820.html
到了这里，关于Vue组件解析：自定义表格组件ByTable详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
