效果图呈上
表格组件封装eltable.vue
<!--region 封装的分页 table-->
<template>
<div class="table">
<!-- <el-card shadow="always" class="card-table"> -->
<el-table
id="iTable"
ref="mutipleTable"
v-loading.iTable="options.loading"
highlight-current-row
:data="list"
:stripe="options.stripe"
:row-class-name="rowClassName"
:header-cell-style="{'text-align':'center',background:'#0E1233',color:'#EBEBEB','font-weight':'400'}"
@row-click="rowClick"
@selection-change="handleSelectionChange"
>
>
<!--region 选择框-->
<el-table-column
v-if="options.mutiSelect"
type="selection"
:resizable="false"
/>
<!--endregion-->
<!--region 数据列-->
<template v-for="(column, index) in columns">
<el-table-column
:key="column.label"
:resizable="false"
:prop="column.prop"
:label="column.label"
:align="column.align?column.align:'center'"
:width="column.width"
:show-overflow-tooltip="column.showOverflowTooltip"
>
<template slot-scope="scope">
<template v-if="!column.render">
{{ column.render }}
<template v-if="column.formatter">
<span v-html="column.formatter(scope.row, column)" />
</template>
<template v-else>
<span>{{ scope.row[column.prop]?scope.row[column.prop]:'-'&&scope.row[column.prop]===0?scope.row[column.prop]:'-' }}</span>
</template>
</template>
<template v-else>
<expand-dom
:column="column"
:row="scope.row"
:render="column.render"
:index="index"
/>
</template>
</template>
</el-table-column>
</template>
<!--endregion-->
<!--region 按钮操作组-->
<el-table-column
v-if="operates.list.length > 0"
ref="fixedColumn"
:resizable="false"
label="操作"
align="center"
:width="operates.width"
:fixed="operates.fixed"
>
<template slot-scope="scope">
<div class="operate-group">
<template v-for="btn in operates.list">
<div v-if="!btn.show || btn.show(scope.row)" :key="btn.label" class="item">
<!-- v-if="!btn.isAuth || btn.isAuth()" -->
<el-button
round
:type="btn.type"
size="mini"
:icon="btn.icon"
:disabled="btn.disabled && btn.disabled(scope.row)"
:plain="btn.plain"
@click.native.prevent="btn.method(scope.row)"
>
{{ btn.label }}
</el-button>
</div>
</template>
</div>
</template>
</el-table-column>
<!--endregion-->
</el-table>
<!-- </el-card> -->
<!--region 分页-->
<el-pagination
v-show="showPagination"
v-if="pagination"
:page-size="tableCurrentPagination.pageSize"
:page-sizes="tableCurrentPagination.pageArray"
:current-page="tableCurrentPagination.page"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleIndexChange"
/>
<!--endregion-->
</div>
</template>
<!--endregion-->
<script>
const _pageArray = [10, 20, 50] // 每页展示条数的控制集合
export default {
name: 'Table',
components: {
expandDom: {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null
}
},
render: (h, ctx) => {
const params = {
row: ctx.props.row,
index: ctx.props.index
}
if (ctx.props.column) params.column = ctx.props.column
return ctx.props.render(h, params)
}
}
},
props: {
list: {
type: Array,
default: () => [] // prop:表头绑定的地段,label:表头名称,align:每列数据展示形式(left, center, right),width:列宽
}, // 数据列表
columns: {
type: Array,
default: () => [] // 需要展示的列 === prop:列数据对应的属性,label:列名,align:对齐方式,width:列宽
},
rowKey: {
type: Boolean,
required: false
},
operates: {
type: Object,
default: () => {} // width:按钮列宽,fixed:是否固定(left,right),按钮集合 === label: 文本,type :类型(primary / success / warning / danger / info / text),show:是否显示,icon:按钮图标,plain:是否朴素按钮,disabled:是否禁用,method:回调方法
},
options: {
type: Object,
// eslint-disable-next-line vue/require-valid-default-prop
default: {
stripe: true, // 是否为斑马纹 table
loading: true, // 是否添加表格loading加载动画
highlightCurrentRow: true, // 是否支持当前行高亮显示
mutiSelect: false // 是否支持列表项选中功能
}
},
showPagination: {
type: Boolean,
default: true
},
// pagination: {
// type: Object,
// default: {
// page: 1,
// pageSize: 10
// }
// },
total: {
type: Number,
default: 0
},
// 总数
otherHeight: {
type: Number,
default: 160
} // 计算表格的高度
},
data() {
return {
tableCurrentPagination: {},
multipleSelection: [] // 多行选中
}
},
computed: {},
created() {},
mounted() {
if (this.pagination && !this.pagination.pageSizes) {
this.tableCurrentPagination.pageArray = _pageArray // 每页展示条数控制
}
this.tableCurrentPagination = this.pagination || {
pageSize: this.total,
page: 1
} // 判断是否需要分页
},
methods: {
// 添加序号列
rowClassName({ row, rowIndex }) {
row.xvhao = rowIndex + 1
},
rowClick(row) {
this.$emit('rowClick', row)
},
// 切换每页显示的数量
handleSizeChange(size) {
if (this.pagination) {
this.tableCurrentPagination = {
page: 1,
pageSize: size
}
this.$emit('handleSizeChange', this.tableCurrentPagination)
// 跳转页面后回页面顶部
this.$nextTick(() => {
this.$refs.mutipleTable.bodyWrapper.scrollTop = 0
window.scroll(0, 0)
})
}
},
// 切换页码
handleIndexChange(currnet) {
if (this.pagination) {
this.tableCurrentPagination.page = currnet
this.$emit('handleIndexChange', this.tableCurrentPagination)
// 跳转页面后回页面顶部
this.$nextTick(() => {
this.$refs.mutipleTable.bodyWrapper.scrollTop = 0
window.scroll(0, 0)
})
}
},
// 多行选中
handleSelectionChange(val) {
this.multipleSelection = val
this.$emit('handleSelectionChange', val)
},
// 显示 筛选弹窗
showfilterDataDialog() {
this.$emit('handleFilter')
},
// 显示 表格操作弹窗
showActionTableDialog() {
this.$emit('handelAction')
}
}
}
</script>
main.js文件全局引用
import baseList from '@/components/el-table' // 基础列表
Vue.component('BaseList', baseList)
文件直接引用
<template>
<base-list
:list="list"
:total="total"
:options="options"
:pagination="pagination"
:columns="columns"
:operates="operates"
@handleSizeChange="handleSizeChange"
@handleIndexChange="handleIndexChange"
/>
</template>
<script>
export default{
data(){
return {
// table参数
list: [
{ id: 1,
cameranumber: '001',
service: '上行(北区)',
cameraname: '小吃通道',
cameraIp: '张三',
cameraport: '18888888888',
camerauser: '11',
camerapsd: 'admin',
camerabrand: '大华',
cameraposition: '室内其他区域',
photourl: 'https://img2.baidu.com/it/u=2328204195,3953168763&fm=26&fmt=auto&gp=0.jpg',
addTime: '2021/6/29 16:58'
},
{ id: 2,
cameranumber: '002',
service: '上行(北区)',
cameraname: '小吃通道',
cameraIp: '张三',
cameraport: '18888888888',
camerauser: '11',
camerapsd: 'admin',
camerabrand: '大华',
cameraposition: '室内其他区域',
addTime: '2021/6/29 16:58'
},
{ id: 3,
cameranumber: '003',
cameraname: '张三',
service: '上行(北区)',
cameraIp: '张三',
photourl: '',
cameraport: '18888888888',
camerauser: '11',
camerapsd: 'admin',
camerabrand: '大华',
cameraposition: '室内其他区域',
addTime: '2021/6/29 16:58'
},
{ id: 4,
cameranumber: '004',
cameraname: '张三',
service: '上行(北区)',
cameraIp: '张三',
cameraport: '18888888888',
camerauser: '11',
camerapsd: 'admin',
camerabrand: '大华',
cameraposition: '室内其他区域',
photourl: 'https://img2.baidu.com/it/u=2328204195,3953168763&fm=26&fmt=auto&gp=0.jpg',
addTime: '2021/6/29 16:58'
},
{ id: 5,
cameranumber: '005',
cameraname: '张三',
service: '上行(北区)',
cameraIp: '张三',
cameraport: '18888888888',
camerauser: '11',
camerapsd: 'admin',
camerabrand: '大华',
cameraposition: '室内其他区域',
photourl: 'https://img2.baidu.com/it/u=2328204195,3953168763&fm=26&fmt=auto&gp=0.jpg',
addTime: '2021/6/29 16:58'
}
],
pageSize: 10,
total: 0,
options: {},
columns: [
{
prop: 'cameranumber',
label: '所在服务区'
},
{
prop: 'service',
label: '餐饮店名称'
},
{
prop: 'cameraname',
label: '餐饮店类型'
},
{
prop: 'cameraIp',
label: '餐饮店标签'
},
{
prop: 'cameraport',
label: '支付方式'
},
{
prop: 'photourl',
label: '门头照',
render: (h, params) => {
console.log(h)
console.log(params)
if (params.row.photourl && params.row.photourl !== '') {
return h('el-link', {
props: {
type: 'primary',
target: '_blank',
href: params.row.photourl
}
}, '查看')
} else {
return h('el-link', {
props: {
type: 'info',
underline: false,
href: params.row.photourl
}
}, '-')
}
}
},
{
prop: 'addTime',
label: '添加日期',
showOverflowTooltip: true
}
],
operates: {
width: 160,
fixed: 'right',
list: [
{
label: '编辑',
type: 'primary',
show: () => {
return true
},
isAuth: () => {
},
method: (row) => {
this.addOrUpdateHandle(row.id)
}
},
{
label: '删除',
type: 'danger',
show: () => {
return true
},
isAuth: () => {
// return this.isAuth('fms:syscamera:del')
},
method: (row) => {
this.deleteHandle(row)
}
}
]
}
}
}
}
</script>