您现在的位置是：网站首页> 编程资料编程资料

基于element-ui表格的二次封装实现_vue.js_

2023-05-24 375人已围观

简介基于element-ui表格的二次封装实现_vue.js_

在项目中经常会使用到element的表格，如果每次都cv,也确实有点麻烦，基于这个情况我对表格进行了二次封装

写一个Table组件

首先先写表格样式

tableData为当前显示的数据，tableProp为表头的名称，可以为多级也可以为单级，区别为data是否存在，headerStyle为表头样式，height为表的高度，sortable以该列为基准的排序，border是否显示边框,handleSelectionChange多选，selection是否显示多选，ishandle是否显示操作，这里使用插槽进行写操作

export default { props: { height: { type: Number, default: 220, }, ishandle:{ type: Boolean, default: false, }, border:{ type: Boolean, default: false, }, tableProp: { type: Array, default: () => [ { code: 'index', label: '指标', width: 100, }, { code: 'PAC', label: 'PAC', width: 120, data:{ code: 'PAB', label: 'PAB', width: 60, } }, { code: 'PAM', label: 'PAM', width: 60, code:true, }, { code: 'POWER_CONSUMPTION', label: '综合电耗(kW·h)', width: 50, }, { code: 'WATER_CONSUMPTION', label: '自用水率(%)', }, ], }, tableData: { type: Array, default:() => [ { index:1, PAC:'1' PAM:'1', POWER_CONSUMPTION:'1', WATER_CONSUMPTION:'1' } ] }, Style:{ type:String, default:'font-size: 12px;padding:0;line-height: inherit;font-weight: 500;color: #6A7474;' } }, data() { return { show: false, }; }, methods: { // 样式 headerStyle() { return this.Style; }, // 多选 handleSelectionChange(val){ this.$emit('SelectionChange',val) } }, };

第二步加分页

background背景是否显示，layout组件布局，子组件名用逗号分隔，total总条数，pageSizes每页显示个数选择器的选项设置，current当前页码，pageSize每页显示条目个数，singlepage只有一页时是否隐藏,handleSizeChangepageSize 改变时会触发,handleCurrentChange改变时会触发

export default { props: { background: { type: Boolean, default: false, }, layout:{ type: String, default: 'total, sizes, prev, pager, next, jumper', }, total:{ type: Number, default: 100, }, pageSize:{ type: Number, default: 10, }, pageSizes:{ type: Array, default: () => [10, 20, 30, 40, 50, 100], }, singlepage: { type: Boolean, default: false, }, current:{ type: Number, default: 1, }, }, methods: { // pageSize 改变时会触发 handleSizeChangepageSize (val) { this.$emit('handleSizeChangepageSize ',val) }, // currentPage 改变时会触发 handleCurrentChange(val){ this.$emit('handleCurrentChange',val) } }, };

在页面中使用

先引入Table.vue页面

//pageSize 改变时会触发 handleCurrentChange(val){ .... } // currentPage 改变时会触发 handleSizeChangepageSize (val){ .... } // 编辑方法 handleEdit(index,row){ .... }

更多的可以根据自己项目的需求进行修改，这只是一个大概的项目雏形

到此这篇关于基于element-ui表格的二次封装实现的文章就介绍到这了,更多相关element表格二次封装内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：vue项目中canvas实现截图功能_vue.js_

下一篇：Vue+canvas实现视频截图功能_vue.js_

您现在的位置是：网站首页> 编程资料编程资料

基于element-ui表格的二次封装实现_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢