vue组件封装——公用基础table组件

ui框架用的element-ui；vue版本为vue2（2.5.17）

baseTable组件
table+pagination

<template><div class="table-container"><!-- 表格 --><el-table:data="tableData"style="width: 100%":header-cell-class-name="headerBg ? 'headerCell' : ''":row-key="rowKey"@selection-change="handleSelectionChange":stripe="stripe":max-height="maxHeight":show-summary="summary":border="border":size="size":summary-method="summaryMethod":span-method="spanMethod"><!-- 展开行 --><el-table-column v-if="expand" type="expand" width="70" align="center"><template slot-scope="scope"><!-- 作用域插槽， scope：拿到这一行的数据--><slot name="expand" :row="scope.row" :index="scope.$index" :column="scope.column"> </slot></template></el-table-column><!-- 多选 --><el-table-columnv-if="selection"type="selection"width="70"align="center":selectable="selectBox"/><!-- 序列号 --><el-table-column v-if="index" type="index" width="70" :label="indexLabel" align="center" /><!-- 数据 --><el-table-columnv-for="column in columns":prop="column.prop":label="column.label":width="column.width || 'auto'":key="column.prop":show-overflow-tooltip="column.tooltip ? true : column.tooltip":type="column.type || ''":sortable="column.sortable || false":fixed="column.prop == 'operation' ? 'right' : column.fixed || false":align="column.prop == 'operation' ? 'left' : column.align || 'center'"><!-- table自带的作用域插槽 --><template slot-scope="scope"><!-- 作用域插槽， scope：拿到这一行的数据--><slot :name="column.prop" :row="scope.row" :index="scope.$index" :column="scope.column"><!-- 默认显示 --><span>{{ scope.row[column.prop] }}</span></slot></template></el-table-column></el-table><!-- 分页 --><template v-if="hasPage"><el-paginationalign="left"@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pagination.pageNo":page-sizes="[20, 50, 100]":page-size="pagination.pageSize"layout="total, sizes, prev, pager, next, jumper":total="pagination.total"></el-pagination></template></div>
</template>
<script>
export default {props: {columns: {//表格column配置项type: Array,default: () => [],},dataList: {//表格展示数据type: Array,default: () => [],},pagina: {//分页数据type: Object,default: () => {return {pageNo: 1,pageSize: 1,total: 0,};},},maxHeight: {//最大高度type: String,default: '550',},stripe: {//是否显示斑马纹type: Boolean,default: true,},border: {//是否显示纵向的边框type: Boolean,default: true,},selection: {//是否可多选type: Boolean,default: false,},index: {//是否显示序列号type: Boolean,default: true,},expand: {//是否展开行type: Boolean,default: false,},hasPage: {// 是否显示分页组件type: Boolean,default: true,},rowKey: {//行数据的keytype: String,default: '',},indexLabel: {type: String,default: '序号',},headerBg: {//表头行是否有背景色type: Boolean,default: true,},size: {type: String,default: 'mini',},summary: {// 是否显示合计项type: Boolean,default: false,},selectBox: {//复选框可用/禁用状态处理函数type: Function,default: null,},summaryMethod: {//合计行处理函数type: Function,default: null,},spanMethod: {//合计行处理函数type: Function,default: null,},},data() {return {tableData: null,pagination: {pageNo: 1,pageSize: 1,total: 0,},};},methods: {// 多选handleSelectionChange(selection) {this.$emit('selectionChange', selection);},handleSizeChange(pageSize) {this.pagination.pageSize = pageSize;this.$emit('pageChange', this.pagination);},handleCurrentChange(pageNo) {this.pagination.pageNo = pageNo;this.$emit('pageChange', this.pagination);},},watch: {dataList: {handler(newVal) {this.tableData = JSON.parse(JSON.stringify(newVal));},immediate: true,deep: true,},pagina: {handler(newVal) {this.pagination = JSON.parse(JSON.stringify(newVal));},immediate: true,deep: true,},},
};
</script>
<style lang="scss">
.table-container {.el-table {margin-bottom: 20px;}.headerCell {background: #edeeee;color: #333;}.el-button {margin-bottom: 10px !important;}
}
</style>

组件引用

<baseTable :columns="columns" :dataList="tableData" :index="true" indexLabel="排名"maxHeight="500" >//使用插槽,使用的2.6之前的语法<template slot="processed" slot-scope="scope">{{ numHandle(scope.row.processed) }}</template><template slot="rejected" slot-scope="scope">{{ numHandle(scope.row.rejected) }}</template><template slot="operation" slot-scope="scope"><el-button type="text" @click="getDetails(scope.row)">详情</el-button></template>
</baseTable>import baseTable from "../../components/BaseTable";components: { baseTable}columns: columns:[{prop:'service',label:'名称',width:180,},{prop:'reviewed',label:'已审核',width:180,},{prop:'processed',label:'已处理',width:180,},{prop:'rejected',label:'已拒绝',width:180,},{prop:'operation',label:'操作',},],
tableData: [{serviceId:'001',service:'苏无名',processed:'1500',rejected:'100',},{serviceId:'002',service:'卢凌风',processed:'1500',rejected:'100',},{serviceId:'003',service:'裴喜君',processed:'1500',rejected:'100',},{serviceId:'004',service:'费鸡师',processed:'1500',rejected:'100',},{serviceId:'005',service:'薛环',processed:'1500',rejected:'100',},{serviceId:'006',service:'裴坚',processed:'1500',rejected:'100',},{serviceId:'007',service:'太平公主',processed:'1500',rejected:'100',},{serviceId:'008',service:'太子',processed:'1500',rejected:'100',},{serviceId:'009',service:'大将军',processed:'1500',rejected:'100',},{serviceId:'010',service:'李樱桃',processed:'1500',rejected:'100',},],

vue组件封装——公用基础table组件相关推荐

Vue Tooltip封装全局问号提示组件
前言我们经常在网站看到一个小问号鼠标放上去会出现一段文字,移开文字消失.起到一个提示功能. 它其实是Tooltip + icon 实现的,但是有一个小问题,就是修改背景颜色和文字颜色不生效. 其实是 ...
使用NG-ZORRO（Angular 组件库）中Table组件，通过columnTable属性固定列，结果每行数据内容穿透了两遍的固定列；鼠标滑过该条数据时，两侧固定列的背景色不跟着改变～
[问题] 使用NG-ZORRO(Angular 组件库)中Table组件,通过#columnTable属性固定列,结果每行数据内容穿透了两遍的固定列(因为是刚开始做这个项目,所以盲猜是之前某位同仁搞个 ...
初探 amaze-vue（基于vue.js封装的Amaze UI 组件库）
Amaze UI 是以移动优先(Mobile first)为理念,面向 HTML5 开发的国产优秀组件库.因官方未提供vue.js版本,而且民间一直对vue.js版本的 Amaze UI 组件库呼声很 ...
vue 手风琴组件_Vue 使用Element-ui table组件实现手风琴效果
利用Element-UI提供的表格组件做成手风琴效果, 即同时只能有一个行展开效果展示手风琴效果版本说明 "vue": "^2.6.11", " ...
原生html使用element组件,使用element-ui的table组件时，渲染为html格式
背景今天在做vue的项目时,使用到 element-ui 的 table 组件,使用富文本编辑器进行新增操作后,发现 html格式并没有被识别原因在 element-ui 中,table组件默 ...
组件封装 - 轮播图组件
轮播图组件封装, 我们主要分为三大步来完成: 1. 基本布局 2. 渲染结构 3. 逻辑封装我们这里封装的轮播图组件和 Element UI 所封装的走马灯组件有所不同 Element UI 是直接 ...
微信小程序父级之间的传值_微信小程序自定义组件封装及父子间组件传值的方法...
首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议wxzx-xxx命名例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml 正在 ...
vue中用table_element-ui中的 table 组件在vue中的使用
经常使用 element-ui 的小伙伴应该对 el-table 组件非常熟悉,通常它长下面这个样子: 但是我们可以使用使用 v-for 来优化模版中的 el-table-column v-for=& ...
笔记三 vue中封装复用过滤器自定义组件 vue中component选项
题外话: npm install -g express-generator npm安装express框架封装复用 Vue中关于封装复用的内容,属于Vue中的进阶知识,在实战中对开发者的抽象和泛化能力 ...

vue组件封装——公用基础table组件

vue组件封装——公用基础table组件相关推荐

最新文章

热门文章