149 lines
3.3 KiB
Vue
149 lines
3.3 KiB
Vue
|
<template>
|
|||
|
|
<div class="base-table">
|
|||
|
|
<!-- 给内部表格添加ref，方便暴露 -->
|
|||
|
|
<el-table
|
|||
|
|
ref="internalTable"
|
|||
|
|
v-bind="$attrs"
|
|||
|
|
v-on="$listeners"
|
|||
|
|
:data="data"
|
|||
|
|
:loading="loading"
|
|||
|
|
>
|
|||
|
|
<!-- 通过配置数组渲染列 -->
|
|||
|
|
<template v-for="(column, index) in columns">
|
|||
|
|
<el-table-column
|
|||
|
|
v-if="column.visible !== false"
|
|||
|
|
v-bind="column"
|
|||
|
|
>
|
|||
|
|
<!-- 列的自定义内容插槽 -->
|
|||
|
|
<template v-if="column.slot" #default="scope">
|
|||
|
|
<slot :name="column.slot" :scope="scope"></slot>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 表头自定义内容 -->
|
|||
|
|
<template v-if="column.headerSlot" #header>
|
|||
|
|
<slot :name="column.headerSlot"></slot>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 操作列 -->
|
|||
|
|
<el-table-column
|
|||
|
|
v-if="showActionColumn"
|
|||
|
|
:label="actionColumnLabel"
|
|||
|
|
:width="actionColumnWidth"
|
|||
|
|
:fixed="actionColumnFixed"
|
|||
|
|
:align="actionColumnAlign"
|
|||
|
|
>
|
|||
|
|
<template #default="scope">
|
|||
|
|
<slot name="action" :scope="scope"></slot>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<!-- 原生插槽，支持直接写el-table-column -->
|
|||
|
|
<slot></slot>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'BaseTable',
|
|||
|
|
props: {
|
|||
|
|
// 表格数据
|
|||
|
|
data: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => []
|
|||
|
|
},
|
|||
|
|
// 列配置数组
|
|||
|
|
columns: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => []
|
|||
|
|
},
|
|||
|
|
// 是否显示加载状态
|
|||
|
|
loading: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 是否显示操作列
|
|||
|
|
showActionColumn: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 操作列标题
|
|||
|
|
actionColumnLabel: {
|
|||
|
|
type: String,
|
|||
|
|
default: '操作'
|
|||
|
|
},
|
|||
|
|
// 操作列宽度
|
|||
|
|
actionColumnWidth: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 150
|
|||
|
|
},
|
|||
|
|
// 操作列固定方式
|
|||
|
|
actionColumnFixed: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'right'
|
|||
|
|
},
|
|||
|
|
// 操作列内容对齐方式
|
|||
|
|
actionColumnAlign: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'center'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 暴露内部表格的方法和属性
|
|||
|
|
methods: {
|
|||
|
|
/**
|
|||
|
|
* 获取内部el-table实例
|
|||
|
|
*/
|
|||
|
|
getTableInstance() {
|
|||
|
|
return this.$refs.internalTable
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 代理el-table的常用方法，方便直接调用
|
|||
|
|
*/
|
|||
|
|
clearSelection() {
|
|||
|
|
if (this.$refs.internalTable) {
|
|||
|
|
this.$refs.internalTable.clearSelection()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
toggleRowSelection(row, selected) {
|
|||
|
|
if (this.$refs.internalTable) {
|
|||
|
|
this.$refs.internalTable.toggleRowSelection(row, selected)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
toggleAllSelection() {
|
|||
|
|
if (this.$refs.internalTable) {
|
|||
|
|
this.$refs.internalTable.toggleAllSelection()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
doLayout() {
|
|||
|
|
if (this.$refs.internalTable) {
|
|||
|
|
this.$refs.internalTable.doLayout()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
sort(prop, order) {
|
|||
|
|
if (this.$refs.internalTable) {
|
|||
|
|
this.$refs.internalTable.sort(prop, order)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 提供一个$refs的代理，方便访问内部表格
|
|||
|
|
mounted() {
|
|||
|
|
// 可以在这里添加一些初始化逻辑
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.base-table {
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
</style>
|