vue使用element-ui table表格二次封装 方便基本表格展示数据 不需要在每个页面当中都写很多的html代码。
下面上代码：
components中创建v-table.vue
<template>
<div v-loading="tableLoading" class="table" :class="{'table-padding': pageinationPosition}">
<el-table ref="multipleTable" :data="data" :tooltip-effect="tooltipEffect ? 'dark' : ''" :max-height="maxHeight != null ? maxHeight : null" :height="height!=null ? height : null" :highlight-current-row="highlightCurrentRow" style="width: 100%" :header-row-style="{color: '#333333', fontSize: '16px', fontWeight: 600}" @selection-change="handleSelectionChange" @current-change="handleCurrentChange">
<el-table-column v-if="tooltipEffect" type="selection" width="55">
</el-table-column>
<el-table-column v-for="(item, index) in cloumns" :key="index" :prop="item.prop" :label="item.label" :width="item.width" :align="item.align ? item.align : ''" :fixed="item.fixed ? item.fixed : null">
<template slot-scope="scope">
<div v-if="item.type == 'text'" class="table-text">
{{ scope.row[item.prop }}
</div>
<div v-else-if="item.type == 'popover'" class="table-btns">
<el-popover placement="top-start" :title="item.title ? item.title : ''" width="200" :trigger="item.trigger ? item.trigger : 'hover'" :content="scope.row[item.prop]">
<p slot="reference" class="text-overflow">{{ scope.row[item.prop] }}</p>
</el-popover>
</div>
<div v-else-if="item.type == 'options'" class="table-btns">
<el-button v-for="(btn, btnKey) in item.options" :key="btnKey" :type="btn.type && btn.type !== '' ? btn.type : 'primary'" :icon="btn.icon ? btn.icon : ''" @click="btn.clickEvent(scope.row)">{{ btn.text }}</el-button>
</div>
<div v-else-if="item.type == 'router'" class="table-router">
<el-button type="text" $router.push({ path: item.path, query: {} })>{{ item.text }}</el-button>
</div>
<div v-else-if="item.type == 'slot'" class="table-slot">
<slot :name="item.slot" :row="scope.row" :column="item.prop" :index="scope.$index"></slot>
</div>
</template>
<template v-if="isShowRefresh && index === (cloumns.length - 1)" slot="header">
<div class="header-option flex-item-center">
<p>{{ item.label }}</p>
<i class="el-icon-refresh" @click="refresh"></i>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination v-if="showpagination" :page-sizes="[10, 50, 100]" class="pageination" :class="{'position-fixed': pageinationPosition}" :layout="pageination" :current-page="page" :page-size="size" :total="total" @size-change="currentSizeChange" @current-change="currentChange">
</el-pagination>
</div>
</template>
<script>
export default {
props: {
// 表格数据
data: {
type: Array,
default: () => [],
require: true
},
// 表头数组
cloumns: {
type: Array,
default: () => [],
require: true
},
// 总条数
total: {
type: Number,
default: () => 0,
require: true
},
// 分页默认功能
pageination: {
type: String,
default: () => 'total, prev, pager, next, jumper'
},
// 每页显示条数
size: {
type: Number,
default: () => 10
},
// 当前页
page: {
type: Number,
default: () => 1,
require: true
},
// 是否显示分页
showpagination: {
type: Boolean,
default: () => true
},
// 是否显示表格多选
tooltipEffect: {
type: Boolean,
default: () => false
},
// 固定分页到页面底部 默认不固定
pageinationPosition: {
type: Boolean,
default: () => false
},
// 是否单选
highlightCurrentRow: {
type: Boolean,
default: () => false
},
// 列表加载状态
tableLoading: {
type: Boolean,
default: () => false
},
// 表格高度
height: {
type: String,
default: () => null
},
// 表格最大高度
maxHeight: {
type: String,
default: () => null
},
// 是否显示刷新列表按钮
isShowRefresh: {
type: Boolean,
default: () => false
}
},
methods: {
// 表头样式
headerRowStyle() {
return 'font-size: 16px;font-weight: 600;color: #333333'
},
// 切换当前页
currentChange(page) {
this.$emit('handleChange', page)
},
// 选中表格数据
handleSelectionChange(arr) {
this.$emit('handleSelectionChange', arr)
},
// 当前页显示条数
currentSizeChange(size) {
this.$emit('handleSizeChange', size)
},
// 跳转到第几页
handleCurrentChange(currentRow) {
this.$emit('currentChange', [currentRow, true])
},
// 刷新表格数据
refresh() {
this.$emit('tableRefresh', true)
}
}
}
</script>
<style lang="scss">
.table {
position: relative;
text-align: right;
&.table-padding {
padding-bottom: 26px;
}
}
.pageination {
&.position-fixed {
position: fixed;
right: 15px;
bottom: 15px;
background: #ffffff;
}
}
.header-option {
i {
margin-left: auto;
font-size: 20px;
cursor: pointer;
color: #409eff;
}
}
</style>可以在main.js中全局引入
import Vue from 'vue'
import VTable from '@/components/v-table'
Vue.component('v-table', VTable)然后在页面中使用
1.基本的使用
在使用中可以根据表格要展示的类型进行不同的显示
如果比较复杂的显示 可以使用slot类型进行特殊逻辑的处理
<template>
<div class="page">
<v-table :data="list" :cloumns="cloumns" :size="size" :total="total" :tooltip-effect="true" :page="page" is-show-refresh @handleSelectionChange="handleSelectionChange" @handleChange="handleChange" @tableRefresh="refresh">
<template slot="sex" slot-scope="scope">
{{ scope.row.sex == 1 ? '男' : '女' }}
</template>
</v-table>
</div>
</template>
<script>
export default {
data() {
return {
page: 1,
size: 10,
list: [],
total: 0,
cloumns: [{
prop: 'name',
label: '姓名',
type: 'text'
}, {
prop: '',
label: '性别',
type: 'slot',
slot: 'sex'
}, {
prop: 'age',
label: '年龄',
type: 'text'
}, {
prop: '',
label: '操作',
type: 'options',
width: 100,
align: 'center',
options: [{
text: '详情',
icon: 'el-icon-edit',
type: 'primary',
clickEvent: (row) => {
console.log(row)
}
}],
fixed: 'right'
}],
tableSelectArr: []
}
},
mounted() {
this.getData()
},
methods: {
getData () {
// 获取数据的代码逻辑 这里就不写了
this.list = [{
name: '小明',
sex: 1,
age: 25
},{
name: '小红',
sex: 2,
age: 23
},{
name: '小李',
sex: 1,
age: 26
}]
this.total = 30
},
handleChange (page) {
this.page = page
this.getData()
},
handleSelectionChange(arr) {
console.log(arr)
this.tableSelectArr = arr
},
refresh() {
this.page = 1
this.getData()
}
}
}
</script>
<style>
</style>部分功能就不演示了 大家也可以自己补充一些常用的功能
欢迎大家评论区指点
