forked from mt-fe-group/mt-yd-ui
75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
Vue
<template>
|
|
<div class="base-table">
|
|
<el-table :data="data" style="width: 100%" fit border :header-cell-style="{ background: '#FAFAFA', color: '#606266', height: '40px' }" :max-height="maxHeight">
|
|
<!-- 表格头定义 -->
|
|
<template v-for="(head, idx) in tableHeadConfigs">
|
|
<!-- 带type的表头 -->
|
|
<el-table-column
|
|
:key="idx"
|
|
v-if="head.type"
|
|
:type="head.type"
|
|
:label="head.label || head.name || ''"
|
|
:header-align="head.align || 'center'"
|
|
:align="head.align || 'center'"
|
|
:width="head.width || 50"
|
|
v-bind="head.more"
|
|
></el-table-column>
|
|
<!-- 普通的表头 -->
|
|
<el-table-column
|
|
v-else
|
|
:key="idx"
|
|
:label="head.label ? head.label : head.name"
|
|
:prop="head.prop"
|
|
:width="head.width"
|
|
:min-width="head.minWidth"
|
|
:fixed="head.fixed"
|
|
:show-overflow-tooltip="head.showOverflowTooltip || false"
|
|
filter-placement="top"
|
|
:align="head.align"
|
|
v-bind="head.more"
|
|
>
|
|
<!-- 子组件 -->
|
|
<template v-if="head.prop" slot-scope="scope">
|
|
<component v-if="head.subcomponent" :is="head.subcomponent" :key="idx + 'sub'" :inject-data="{ ...scope.row, head }" @emit-data="handleSubEmitData" />
|
|
<!-- 直接展示数据或应用过滤器 -->
|
|
<span v-else>{{ scope.row[head.prop] | commonFilter(head.filter) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'BaseTable',
|
|
props: {
|
|
tableHeadConfigs: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
data: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
maxHeight: {
|
|
type: Number,
|
|
default: 500
|
|
}
|
|
},
|
|
filters: {
|
|
commonFilter: (source, filterType = a => a) => {
|
|
return filterType(source)
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {
|
|
handleSubEmitData(payload) {
|
|
this.$emit('operate-event', payload)
|
|
}
|
|
}
|
|
}
|
|
</script>
|