// 自定义组件
<template>
<div class="x__table>
<el-table
v-loading="tableLoading"
:data="tableData"
border
stripe>
<el-table-column
v-if="index"
type="index"
label="序号"
align="center"
width="50">
<template slot-scope="scope">
<span>{{ scope.$index + (page.current - 1) * page.size + 1 }}</span>
</template>
</el-table-column>
<template v-for="(item, index) in tableOption">
<el-table-column
:key="index"
:prop="item.prop"
:label="item.label"
:align="item.align || 'center'"
:show-overflow-tooltip="item.overHidden || true">
<template slot-scope="scope">
// 这里通过插槽实现自定义列
<slot
v-if="item.slot"
:name="scope.column.property"
:row="scope.row"
:$index="scope.$index"
/>
<span v-else>{{ scope.row[scope.column.property] }}</span> // 这里的property自己打印出来看看就明白了
</template>
</el-table-column>
</template>
<el-table-column
label="操作"
align="center">
<template slot-scope="scope">
<slot
name="menu"
:row="scope.row"
:$index="scope.$index"
/>
</template>
</el-table-column>
</el-table>
<!-- 分页器 --> // 这里的分页器也是封装的一个组件,主要是和序号关联起来
<Pagination
v-show="page.total>0"
:total="page.total"
:page.sync="page.current"
:limit.sync="page.size"
@pagination="pageChange"
/>
</div>
</template>
<script>
import Pagination from '@/components/Pagination/index' // 有需要的下次再贴代码
export default {
name: 'XTable',
components: {
Pagination
},
props: {
index: {
type: Boolean,
default: function() {
return true
}
},
tableLoading: {
type: Boolean,
default: function() {
return false
}
},
tableData: {
type: Array,
default: function() {
return []
}
},
tableOption: {
type: Array,
default: function() {
return []
}
},
page: {
type: Object,
default: function() {
return {
total: 0,
current: 1,
page: 10
}
}
}
},
methods: {
pageChange() {
this.$emit('page-change')
}
}
}
</script>