最近一直在做公司的后台管理系统。就想着整理一些相关组件，方便自己方便他人。

我这里整理两个版本，都觉得挺好用。很常见，也是借鉴。然后整理后贴出来。代码我尽力贴全一些。

先发一个简单版的。

这里是组件主题部分，简单来说就是把el-table中的属性数据显示都是用父组件传进来，都可以自定义。这样不同页面不同风格列表都适用。配合分页组件一起封装，可显示可隐藏

下面是组件propsprops: {

tableTitleData: { // 表头数据 文案和绑定值，以及需要特殊处理的slot

type: Array,

default: () => []

},

tableData: {

type: Array, // 后台数据

default: () => []

},

pageValue: { // 分页数据

type: Object,

default: () => {

return {

pageNum: 1,

pageSize: 10,

total: 0

}

}

},

configFlag: {// 配置  其他table配置依次添加

type: Object,

default: () => {

return {

needPage: false, // 是否需要排序

selection: false, // 是否需要多选

index: false // 是否需要序号

// 这里不全面，可根据实际情况添加

}

}

},

tableHeight: { // 可以监听屏幕高度获取。

// 高度

type: Number,

default: () => null

}

},

还有几个方法，简单带过// 翻页

sizeChange(val) {

this.$emit('handleChange', { pageSize: val })

},

// 设置条数

currentChange(val) {

this.$emit('handleChange', { pageNum: val })

},

// 多选

handleSelectionChange(val) {

this.$emit('handleSelectionChange', val)

}

到这里组件就封装完了..接着来使用

这里是使用在父组件的table组件,根据我们的业务需求.现在看起来这个html也没少写多少,不过也简洁很多,对于大多初学者来说,个人觉得还是挺好用的.简单易懂.下一篇会写一个更好用的.不多说,把这个先写完.接下来就是处理data数据,组件引入就自己来吧configFlag: { //根据需求设置

needPage: true, // 需要分页

index: true // 需要序号

// 其他table配置依次添加

},

tableTitleData: [ //我们需要绑定的数据表头 只是举例~~~

{

value: 'type',// 匹配字段

label: '类型', // 表头文案

slotname: 'typeName' // 特殊处理列 使用在上面

},

{

value: 'name',

label: '名称'

},

{

value: 'status',

label: '状态',

slotname: 'statusName'

},

{

label: '操作',

width: '240px',

slotname: 'testAction'

}

],

tableData: [], // 请求后数据.

现在使用就结束了..相对应的方法就不写了,个人比较懒.自己补充吧..相比较是不是简洁了一些,实际使用起来比较简单,组件的意义在于可高效复用,这样简单的封装也做到了,可是我感觉对性能上没多大提高,因为vue类框架主导的就是数据改变视图,操作数据才能更好发挥性能,不过可以自己按照这样的写一写,对于初学者的建议吧.

下一期二次封装的还是el-table,更多的是操作数据,template中也就只需要几行代码就ok,用的数据render函数...render更贴合底层吧.

文笔一般,还望海涵...我知道这个组件还有很多的可优化地方,随时可以指教.