vue2+element-UI表格封装

针对表格进行封装在列表页面直接传入字段数组就可以展示数据表templatedivclasstable-container:class{ show-vertical-lines: showVerticalLines }!--数据表格--el-table reftableRef:datatableDataborder sizeministylewidth: 100%:max-heighttableHeightrow-keyid:row-class-namerowClassNamehighlight-current-row!--单选框列--el-table-column v-ifshowRadiowidth55aligncentertemplate slot-scopescopeel-radio v-modelradioSelection:labelscope.row.idchangehandleRadioChange(scope.row)nbsp;/el-radio/template/el-table-column!--多选框列--el-table-column v-ifshowSelectiontypeselectionwidth55aligncenter/el-table-column!--序号列--el-table-column v-ifshowIndextypeindexlabel序号width60aligncentertemplate slot-scopescope{{scope.$index1}}/template/el-table-column!--动态列--el-table-column v-for(column, index) in columns:keycolumn.prop || index:propcolumn.prop:labelcolumn.label:widthcolumn.width:min-widthcolumn.minWidth || 80:header-aligncolumn.headerAlign || left:aligncolumn.align || left:fixedcolumn.fixedtemplate slot-scopescope!--作用域插槽允许父组件自定义内容--slot:namecolumn.prop:rowscope.row:editableisRowEditable(scope.row)!--默认渲染逻辑--template v-ifisRowEditable(scope.row) column.editable trueel-input v-modelscope.row[column.prop]sizesmallblurhandleInputBlur(scope.row, column.prop)click.native.stop/el-input/templatetemplate v-else!--超长文本省略--el-tooltip v-ifscope.row[column.prop] scope.row[column.prop].toString().length 100:contentscope.row[column.prop]placementtopeffectdarkdivclassellipsis-text{{scope.row[column.prop]}}/div/el-tooltipspan v-else{{scope.row[column.prop]}}/span/template/slot/template/el-table-column/el-table!--分页--divclasspagination-fixedel-pagination size-change$emit(size-change, $event)current-change$emit(current-change, $event):current-pagecurrentPage:page-sizes[10, 20, 50, 100]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotalbackground styletext-align:right;/el-pagination/div/div/templatescriptexportdefault{name:TableContainer,props:{tableData:{type:Array,default:()[]},columns:{type:Array,default:()[]},currentPage:{type:Number,default:1},pageSize:{type:Number,default:10},total:{type:Number,default:0},showSelection:{type:Boolean,default:false},showRadio:{type:Boolean,default:false},showIndex:{type:Boolean,default:false},showVerticalLines:{type:Boolean,default:false},// 新增允许父组件传入表格距离顶部的偏移量默认 260pxoffsetTop:{type:Number,default:260}},data(){return{radioSelection:null,tempBackup:null,// 新增用于存储当前正在编辑行的快照tableHeight:400};},mounted(){this.$nextTick((){this.calculateTableHeight();});window.addEventListener(resize,this.calculateTableHeight);},beforeDestroy(){window.removeEventListener(resize,this.calculateTableHeight);},methods:{rowClassName({row}){returnthis.radioSelectionrow.id?radio-selected:;},isRowEditable(row){returnthis.radioSelectionrow.id;},// 核心逻辑处理单选框切换handleRadioChange(currentRow){// 1. 恢复上一行的数据 (如果存在上一行且备份存在)if(this.tempBackup){// 找到表格数据中对应的那一行对象constprevRowDatathis.tableData.find(itemitem.idthis.tempBackup.id);if(prevRowData){// 用备份的数据覆盖当前表格中的数据撤销修改Object.assign(prevRowData,JSON.parse(JSON.stringify(this.tempBackup)));}}// 2. 为当前点击的这一行创建新的备份// 注意这里必须深拷贝否则 tempBackup 会跟着表格数据一起变this.tempBackupJSON.parse(JSON.stringify(currentRow));// 3. 触发外部事件this.$emit(radio-change,currentRow);},handleInputBlur(row,prop){this.$emit(input-blur,row,prop);},calculateTableHeight(){// 方式一基于窗口高度减去固定偏移量简单粗暴// this.tableHeight window.innerHeight - this.offsetTop;// 方式二更精准的计算推荐// 获取表格容器相对于视口的位置constrectthis.$el.getBoundingClientRect();// 视口高度 - 表格顶部距离 - 分页高度(约50) - 底部留白(20)this.tableHeightwindow.innerHeight-rect.top-70;// 设置最小高度防止过小if(this.tableHeight200)this.tableHeight200;}},emits:[size-change,current-change,radio-change,input-blur]};/scriptstyle scoped.table-container{width:100%;position:relative;background-color:#fff;/* border-radius: 4px; *//* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); */overflow:hidden;}.el-table{width:100%;margin:0;}/* 核心调整行高缩小至 24px与文字大小一致 */.el-table__row{height:24px!important;}.el-table__cell{padding:012px;/* 上下padding设为0仅保留左右 */line-height:1.2;vertical-align:middle;/* 确保垂直居中 */}/* 确保表头高度也同步缩小 */::v-deep.el-table th{height:24px!important;line-height:24px!important;background-color:#f0f2f5!important;font-weight:600!important;user-select:text!important;}/* 消除单元格底部多余边框间距 */::v-deep.el-table--border::after,::v-deep.el-table--group::after,::v-deep.el-table::before{height:0;}.pagination-fixed{margin-top:0;display:flex;justify-content:flex-end;align-items:center;padding:6px0;background-color:#fff;}.banner-image{max-width:100px;max-height:50px;}.radio-selected{background-color:#f0f9eb!important;}.ellipsis-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;display:inline-block;}/* 隐藏表格竖线 */.table-container:not(.show-vertical-lines)::v-deep.el-table th,.table-container:not(.show-vertical-lines)::v-deep.el-table td{border-right:none!important;border-left:none!important;}.table-container:not(.show-vertical-lines)::v-deep.el-table--border,.table-container:not(.show-vertical-lines)::v-deep.el-table--group{border-right:none!important;border-left:none!important;}/style传入字段数组格式data(){return{tableData:[],columns:[{prop:title,label:标题,minWidth:80},{prop:introduction,label:内容简介,minWidth:200},{prop:publishTime,label:发布时间,minWidth:80},{prop:status,label:状态,minWidth:50},{prop:createTime,label:创建时间,minWidth:80},{prop:createBy,label:创建人,minWidth:80},{prop:action,label:操作,minWidth:80,headerAlign:center,align:center}],currentPage:1,pageSize:10,total:0,};},调用方式table-container:table-datatableData:columnscolumns:current-pagecurrentPage:page-sizepageSize:totaltotal:base-urlbaseUrl:show-selectionfalse:show-indextruesize-changehandleSizeChangecurrent-changehandleCurrentChangetemplate #status{ row }span v-ifrow.status 1stylecolor:#13ce66已发布/spanspan v-elsestylecolor:#ff4949未发布/span/templatetemplate #createBy{ row }span v-ifrow.createBy{{getCreateUser(row)}}/span/templatetemplate #action{ row }el-button v-ifrow.status 0typetextclickhandleEdit(row)编辑/el-buttonspan v-ifrow.status 0stylemargin:0 8px;color:#ddd|/spanel-button v-ifrow.status 0typetextclickhandlePublish(row)发布/el-buttonspan v-ifrow.status 0stylemargin:0 8px;color:#ddd|/spanel-button v-ifrow.status ! 0typetextclickhandlePreview(row)预览/el-buttonspan v-ifrow.status ! 0stylemargin:0 8px;color:#ddd|/spanel-button typetextclickhandleDelete(row.id)删除/el-button/template/table-container/div