下面我来详细讲解 "Vue的Table表格组件的封装方式"。
一、前言
Vue的Table表格组件在许多Web应用程序中都有着广泛的应用,Table组件可以方便地呈现大量的数据,并提供强大的过滤、搜索、分页等功能,十分受 Web 开发者的喜欢。因此,本文将为大家分享一种Vue的Table表格组件的封装方式。
二、封装方式
1、基本思路
Vue的Table表格组件主要有四个部分组成:表头(header)、表体(body)、表尾(footer)和分页(page)等,因此,我们可以将这四个部分组成的代码段封装成一个Vue子组件,供外部使用。
2、组件代码
下面是一个简单的代码片段,实现了Vue的Table表格组件的封装:
<template>
<div>
<table>
<thead>
<tr>
<th v-for="column in columns">{{ column }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(data, index) in tableData" :key="index">
<td v-for="(value, key) in data">{{ value }}</td>
</tr>
</tbody>
</table>
<div v-if="isShowPage">
<!-- 分页组件 -->
</div>
</div>
</template>
<script>
export default {
props: {
columns: {
type: Array,
default: () => [],
},
tableData: {
type: Array,
default: () => [],
},
isShowPage: {
type: Boolean,
default: false,
},
},
}
</script>
上述代码实现了一个最基本的Vue的Table表格组件,包括表头(header)、表体(body)和分页(page),共有三个 props:
columns
: 表示表格每个列的标题,是一个字符串数组。tableData
:表示表格的数据,是一个数组。isShowPage
: 是否显示分页组件,是一个 Boolean 类型。
这个代码片段可以通过在 父组件
中传递 props 参数来生成可用的 Table 组件。例如:
<template>
<div>
<table-component
:columns="columns"
:tableData="tableData"
:isShowPage="true"
/>
</div>
</template>
<script>
import TableComponent from './components/TableComponent.vue'
export default {
data() {
return {
columns: ['ID', 'Name', 'Age', 'Gender'],
tableData: [
{ id: 1, name: 'Tom', age: 20, gender: 'M' },
{ id: 2, name: 'Lucy', age: 21, gender: 'F' },
{ id: 3, name: 'Mike', age: 22, gender: 'M' },
{ id: 4, name: 'Lisa', age: 23, gender: 'F' },
],
}
},
components: {
TableComponent,
},
}
</script>
上述代码在父组件中引入TableComponent组件,并传入相应的props参数,以生成一个Table组件的实例。
3、高级用法
在实际使用Vue的Table表格组件的过程中,我们还可以根据不同的需求对其进行扩展,例如,自定义过滤器、排序、展开子表格等。
下面是一个示例代码片段,扩展了 Table 组件的自定义过滤器以及排序功能:
<template>
<div>
<table>
<thead>
<tr>
<th v-for="(column, index) in columns" :key="index">
<span
@click="handleSort(index)"
:class="{ active: sortColumn === index }"
>
{{ column.title }}
</span>
<input class="filter" type="text" v-model="column.filterText" />
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in filteredData" :key="index">
<td v-for="(column, k) in columns" :key="k">
{{ item[column.key] }}
</td>
</tr>
<tr v-if="!filteredData.length">
<td :colspan="columns.length" class="text-center">
<strong>No results found.</strong>
</td>
</tr>
</tbody>
</table>
<div v-if="isShowPage">
<!-- 分页组件 -->
</div>
</div>
</template>
<script>
export default {
props: {
columns: {
type: Array,
default: () => [],
},
tableData: {
type: Array,
default: () => [],
},
isShowPage: {
type: Boolean,
default: false,
},
},
data() {
return {
sortColumn: -1,
}
},
computed: {
filteredData() {
let data = [...this.tableData]
this.columns.forEach((column) => {
if (column.filterText) {
data = data.filter((item) => {
return (
item[column.key]
.toString()
.toLowerCase()
.indexOf(column.filterText.toLowerCase()) >= 0
)
})
}
})
if (this.sortColumn >= 0) {
data.sort((a, b) => {
const col = this.columns[this.sortColumn]
let d1 = a[col.key]
let d2 = b[col.key]
if (col.sortType === 'number') {
d1 = Number.parseFloat(d1)
d2 = Number.parseFloat(d2)
}
if (col.sortType === 'date') {
d1 = new Date(d1)
d2 = new Date(d2)
}
if (d1 < d2) {
return col.sortAsc ? -1 : 1
}
if (d1 > d2) {
return col.sortAsc ? 1 : -1
}
return 0
})
}
return data
},
},
methods: {
handleSort(index) {
if (index === this.sortColumn) {
this.columns[index].sortAsc = !this.columns[index].sortAsc
} else {
this.columns.forEach((column) => (column.sortAsc = true))
this.sortColumn = index
}
},
},
}
</script>
上述代码通过传递一个设置了自定义过滤器和排序的columns数组和tableData数组即可以生成扩展的Table组件,通过封装高级用法,使得我们的Table组件可以更加具有可扩展性。
三、总结
本文已经为大家介绍了Vue的Table表格组件的封装方式,主要内容包括了基本的Table组件结构和高级用法的封装方式。Vue的Table表格组件封装的思路基本上可以套用到其他组件的封装上。
附上一个使用 Element UI 的 Table 组件封装的示例代码:https://github.com/guxingyuan/Legends-camping-ground/blob/master/src/components/BaseTable/index.vue
希望对大家有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue的table表格组件的封装方式 - Python技术站