后台系统,table被用的次数比较多,所以决定提出来作为组件
1.新建一个Table.vue文件
<!--region 封装的分页 table-->
<template>
<div class="table">
<el-table id="iTable" v-loading.iTable="options.loading" :data="list" :stripe="options.stripe"
ref="mutipleTable"
@selection-change="handleSelectionChange">
<!--region 选择框-->
<el-table-column v-if="options.mutiSelect" type="selection" style="width: 55px;">
</el-table-column>
<!--endregion-->
<!--region 数据列-->
<template v-for="(column, index) in columns">
<el-table-column :prop="column.prop"
:key='column.label'
:label="column.label"
:align="column.align"
:width="column.width">
<template slot-scope="scope">
<template v-if="!column.render">
<template v-if="column.formatter">
<span v-html="column.formatter(scope.row, column)"></span>
</template>
<template v-else>
<span>{{scope.row[column.prop]}}</span>
</template>
</template>
<template v-else>
<expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"></expand-dom>
</template>
</template>
</el-table-column>
</template>
<!--endregion-->
<!--region 按钮操作组-->
<el-table-column ref="fixedColumn" label="操作" align="center" :width="operates.width" :fixed="operates.fixed"
v-if="operates.list.filter(_x=>_x.show === true).length > 0">
<template slot-scope="scope">
<div class="operate-group">
<template v-for="(btn, key) in operates.list">
<div class="item" v-if="btn.show" :key='btn.id'>
<el-button :type="btn.type" size="mini" :icon="btn.icon" :disabled="btn.disabled"
:plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{ btn.label }}
</el-button>
</div>
</template>
</div>
</template>
</el-table-column>
<!--endregion-->
</el-table>
</div>
</template>
<!--endregion-->
<script>
export default {
props: {
list: {
type: Array,
default: []
}, // 数据列表
columns: {
type: Array,
default: []
}, // 需要展示的列 === prop:列数据对应的属性,label:列名,align:对齐方式,width:列宽
operates: {}, // 操作按钮组 === label: 文本,type :类型(primary / success / warning / danger / info / text),show:是否显示,icon:按钮图标,plain:是否朴素按钮,disabled:是否禁用,method:回调方法
options: {
type: Object,
default: {
stripe: false, // 是否为斑马纹 table
highlightCurrentRow: false // 是否要高亮当前行
},
} // 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)
}
}
},
// 数据
data () {
return {
pageIndex: 1,
multipleSelection: [] // 多行选中
}
},
mounted () {
},
computed: {
},
methods: {
// 多行选中
handleSelectionChange (val) {
this.multipleSelection = val
this.$emit('handleSelectionChange', val)
},
// 显示 表格操作弹窗
showActionTableDialog () {
console.log(4444)
this.$emit('handelAction')
}
}
}
</script>
<style lang="scss" >
</style>
2.调用组件
<template>
<div class="table-page">
<i-table :list="list"
@handleSelectionChange="handleSelectionChange"
:options="options"
:columns="columns"
:operates="operates"
>
</i-table>
</div>
</template>
<script>
import iTable from '../components/Table'
export default {
components: {iTable},
data () {
return {
list: [
{
id: '24',
title: '编号3',
state:0
},
{
id: '23',
title: '编号3',
state:1
},
{
id: '23',
title: '编号3',
state:2
},
{
id: '2',
title: '编号3',
state:0
},
{
id: '223',
title: '编号3',
state:1
},
{
id: '2444',
title: '编号3',
state:1
},
], // table数据
options: {
stripe: true, // 是否为斑马纹 table
loading: false, // 是否添加表格loading加载动画
highlightCurrentRow: true, // 是否支持当前行高亮显示
mutiSelect: true, // 是否支持列表项选中功能
}, // table 的参数
columns: [
{
prop: 'id',
label: '编号',
align: 'center',
},
{
prop: 'title',
label: '标题',
align: 'center',
formatter: (row, column, cellValue) => {
return `<span style="white-space: nowrap;color: dodgerblue;">${row.title}</span>`
}
},
{
prop: 'state',
label: '状态',
align: 'center',
render: (h, params) => {
return h('el-tag', {
props: {type: params.row.state === 0 ? 'success' : params.row.state === 1 ? 'info' : 'danger'} // 组件的props
}, params.row.state === 0 ? '上架' : params.row.state === 1 ? '下架' : '审核中')
}
},
], // 需要展示的列
operates: {
width: 200,
fixed: 'right',
list: [
{
id:'1',
label: '编辑',
type: 'warning',
show: true,
icon: 'el-icon-edit',
plain: true,
disabled: false,
method: (index, row) => {
this.handleEdit(index, row)
}
},
{
id:'2',
label: '删除',
type: 'danger',
icon: 'el-icon-delete',
show: true,
plain: false,
disabled: false,
method: (index, row) => {
this.handleDel(index, row)
}
}
]
} // 列操作按钮
}
},
methods: {
// 选中行
handleSelectionChange (val) {
console.log('val:', val)
},
// 编辑
handleEdit (index, row) {
console.log(' index:', index)
console.log(' row:', row)
},
// 删除
handleDel (index, row) {
console.log(' index:', index)
console.log(' row:', row)
}
}
}
</script>
https://juejin.im/post/5a6941dc518825732258e321