实现效果：
封装组件：
<template>
<div>
<el-table
ref="multipleTable"
v-loading="loading"
:data="data"
:size="size || 'medium'"
:fit="fit || false"
:border="border || false"
:highlight-current-row="highlight || false"
:header-cell-style="{height: '40px',padding: '0','font-size': '12px',color: '#8590a6'}"
:row-style="{'font-size': '12px',color: '#212121'}"
@sort-change="handleSort"
@current-change="handleSingleChange"
@selection-change="handleSelection"
>
<el-table-column
v-if="tableSelect"
type="selection"
/>
<el-table-column
v-for="(item, key) in column"
:key="key"
:prop="item.prop"
:label="item.label"
:width="item.width"
:align="item.align || 'center'"
:sortable="item.sortable"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<ex-slot
v-if="item.render"
:render="item.render"
:row="scope.row"
:index="scope.$index"
:column="item"
/>
<span v-else-if="item.text">{{item.text(data[scope.$index][item.prop],scope.row) || '--'}}</span>
<span v-else>{{ scope.row[item.prop] || '--' }}</span>
</template>
</el-table-column>
<slot></slot>
</el-table>
<el-pagination
v-show="isPagination && newPage.total > 0"
:page-size.sync="newPage.limit"
:current-page.sync="newPage.currentPage"
:total="newPage.total"
:background="newPage.background"
:page-sizes="newPage.sizes"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
style="text-align: center;margin:20px 0;"
:layout="newPage.isShowPager == true || newPage.isShowPager == undefined ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
/>
</div>
</template>
<script>
var exSlot = {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null,
},
},
render: (h, data) => {
const params = {
row: data.props.row,
index: data.props.index,
}
if (data.props.column) {
params.column = data.props.column
}
return data.props.render(h, params)
},
}
export default {
components: { exSlot },
props: {
data: Array,
column: Array,
loading: Boolean,
isPagination: Boolean,
isSingle: Boolean,
tableSelect: Boolean,
size: String,
fit: Boolean,
border: Boolean,
highlight: Boolean,
page: {
type: Object,
default: function () {
return {}
},
},
},
computed: {
newPage() {
let resultPage = this.page ? { ...this.defaultPage, ...this.page } : this.defaultPage
return resultPage
},
},
data() {
return {
defaultPage: {
total: 0,
limit: 10,
sizes: [5, 10, 20, 30, 50],
background: true,
currentPage: 1,
isShowPager: true,
},
}
},
methods: {
handleSelection(selection) {
this.$emit('handleSelection', selection)
},
handleSort(column) {
this.$emit('handleSort', column)
},
handleSingleChange(currentRow) {
if (this.isSingle) {
this.$emit('handleSingleChange', currentRow)
} else {
return false
}
},
handleCurrentChange(val) {
this.$emit('pagination', { current: val, size: this.page.limit })
},
handleSizeChange(val) {
this.$emit('pagination', { current: this.page.currentPage, size: val })
},
},
}
</script>
引用组件：
<template>
<dynamic-table
:loading="loading"
:data="dataDynamic"
:column="column"
:size="size"
:page="page"
:fit="true"
:border="true"
:highlight="true"
:tableSelect="true"
:isPagination="true"
:isSingle="false"
@handleSort="changeSort"
@pagination="opportunityPage"
@handleSelection="handleSelection"
@handleSingleChange="handleSingleChange"
>
<el-table-column
label="操作"
width="150"
fixed="right"
align="center"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
style="font-size:14px;"
@click="view(scope.row)"
>查看</el-button>
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
更多<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{ key: 'edit', data: scope.row }">编辑</el-dropdown-item>
<el-dropdown-item :command="{ key: 'delete', data: scope.row }">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</dynamic-table>
</template>
<script>
import DynamicTable from '@/components/dxmh/DynamicTable.vue'
export default {
components: {
DynamicTable,
},
data() {
return {
dataDynamic: [],
stripe: true,
border: true,
fit: true,
size: 'small',
highlight: true,
isPagination: true,
loading:false,
page: {
currentPage: 1,
limit: 10,
sizes: [5, 10, 20, 30, 50],
total: 0,
background: true,
isShowPager: false,
},
tableSelect: false,
column: [
{
prop: 'novel',
label: '小说名',
align: 'center',
width: '180px',
text: (text, row) => {
return '《' + row.novel + '》' || '--'
},
},
{ prop: 'name', label: '主角名称', align: 'center', width: '180px' },
{
prop: 'totalWords',
label: '网文字数',
align: 'center',
width: '180px',
sortable:true,
render: (h, param) => {
let greenText = 'greenText',
green = '#D9001B',
elem
elem = (
<span class={greenText} style={{ color: green }}>
{param.row.totalWords}万
</span>
)
return elem
},
},
{ prop: 'dec', label: '简介', align: 'center' },
],
}
},
mounted() {
this.dataDynamic = [
{
novel: '斗破苍穹',
name: '萧炎',
totalWords: '532',
dec: '讲述了天才少年萧炎在创造了家族空前绝后的修炼纪录后突然成了废人，种种打击接踵而至。就在他即将绝望的时候，一缕灵魂从他手上的戒指里浮现，一扇全新的大门在面前开启，经过艰苦修炼最终成就辉煌的故事。',
},
{
novel: '完美世界',
name: '石昊',
totalWords: '658',
dec: '本书男主角，为天生至尊，却被族兄石毅及其母夺取至尊骨，导致重病垂死，后被父母寄养在石族祖地。少年出大荒，登临九天，横扫帝关，创造人体秘境修炼体系，平定黑暗动乱之源，一剑独断万古为后世留下相对和平的环境后登天而去。',
},
{
novel: '吞噬星空',
name: '罗峰',
totalWords: '477',
dec: '小说主要讲述了地球经历一场大灾难后引发了各物种的变异，优胜劣汰，主角罗峰得到陨墨星主人传承，成为地球三强者之一，与星空吞噬巨兽一战后失去肉身，夺舍成为星空吞噬兽，在体内世界育出人类分身，之后迈出地球，走向宇宙。',
},
]
this.page.total = this.dataDynamic.length
},
methods: {
opportunityPage(){},
handleSelection(selection) {
console.log('选中选择框触发', selection)
},
changeSort(column) {
console.log('排序', column)
},
handleSingleChange(currentRow) {
console.log('单选触发', currentRow)
},
handleCommand(data) {
switch (data.key) {
case 'edit':
this.changeData(data.data)
break
case 'delete':
this.deleteData(data.data)
break
default:
break
}
},
changeData(data) {
console.log('编辑', data)
},
deleteData(data) {
console.log('删除', data)
},
view(data) {
console.log('查看', data)
},
},
}
</script>
封装组件参数表：
