随着前后端分离开发的流行，前端框架及工具也逐渐发展成为一个相对独立的体系，其中vue.js作为其中的佼佼者吸引了越来越多的开发者的关注与使用。本文将基于vue.js 3.x版本，介绍如何使用vue.js插件来封装一个table组件。
确定需求
在使用Vue.js来封装一个table组件之前，首先需要确定该组件的需求及功能。我们可以列出下面的需求：
- 支持动态输入数据，并根据数据生成table
- 支持根据table头部信息进行列排序
- 支持搜索功能，并根据关键字筛选出目标数据
- 支持分页功能
在明确了需求及功能后，我们开始进入正式的开发阶段。
编写Vue.js插件
在Vue.js中，插件是一个拥有install方法的javascript对象。当插件被注册后，该install方法将会被调用，我们可以在该方法中进行全局组件、指令或者添加实例方法等。
我们将该插件命名为VueTablePlugin，下面就来创建这个vue插件吧。
立即学习“前端免费学习笔记（深入）”；
const VueTablePlugin = {
install: function (Vue) {
// 全局组件
Vue.component('vue-table', {
// 组件选项
})
}
}好的，现在我们已经创建完成了vue插件，下面我们来添加组件选项。
编写table组件
由于table组件需要支持动态数据显示及搜索、排序、分页等功能，因此我们需要在组件内部进行一系列的处理。首先，我们可以定义组件的一些选项及props:
Vue.component('vue-table', {
props: {
data: Array, // 父组件传入的数据
columns: Array // table头部信息
},
data () {
return {
searchKey: '', // 搜索关键字
sortKey: '', // 排序关键字
current: 1, // 当前页
pageSize: 5, // 每页显示数量
}
},
computed: {
filteredData: function () {
return this.data.filter((row) => {
return Object.values(row).some(val => {
return String(val).includes(this.searchKey)
})
})
},
sortedData: function () {
if (!this.sortKey) {
return this.filteredData
}
return this.filteredData.sort((a, b) => {
a = a[this.sortKey]
b = b[this.sortKey]
return a === b ? 0 : a > b ? 1 : -1
})
},
pageCount: function () {
return Math.ceil(this.filteredData.length / this.pageSize)
},
paginatedData: function () {
const start = (this.current - 1) * this.pageSize
return this.sortedData.slice(start, start + this.pageSize)
}
},
methods: {
sortBy (key) {
this.sortKey = key
this.current = 1
},
prevPage () {
this.current--
if (this.current < 1) this.current = 1
},
nextPage () {
this.current++
if (this.current > this.pageCount) this.current = this.pageCount
}
},
template: `
| {{ col.name }} |
|---|
| {{ row[col.key] }} |
由于我们在插件中编写table组件，因此在使用该组件时不需要在引入任何的组件，我们只需要在任意vue实例下注册该插件即可使用该组件。
ReportPlust意在打造一套精美的数据报表模板，里面高度封装日历组件、表格组件、排行榜组件、条形进度条组件、文本块组件以及ucharts的多个图表组件，用户只需要按照虚拟数据的格式，传特定数据即可方便、快捷地打造出属于自己的报表页面。该小程序主要使用了ucharts和wyb-table两插件实现的数据报表功能。 特点使用的是uni-app中最受欢迎的图表uCharts插件完成图表展示，该插件
使用table组件
在上面创建了我们的vue插件及table组件后，我们就可以轻松地在任意vue实例中使用该组件了，具体操作如下：
在使用该组件的vue实例中引入vue-table-plugin：
import VueTablePlugin from './path/to/vue-table-plugin.js'
然后在vue实例中注册插件：
Vue.use(VueTablePlugin)
这样，在该vue实例下就可以轻松地使用vue-table组件了：
这样，我们就完成了一个简单的vue-table组件的封装，并且使用vue插件的方式进行了使用。在实际生产环境中，我们可以对其进行一定的优化及扩展，开发出更加灵活实用的table组件。
总结
本文其中的vue插件及table组件只是一个初步的封装，实际开发中还需要根据需求进行定制及拓展，才能最终达到效果。建议在实际开发中进行实践及拓展，不断打磨你自己的组件库，提高自身的开发能力。
