141 lines
3.9 KiB
Vue
141 lines
3.9 KiB
Vue
<!-- 这里单纯的配置表格就好了-->
|
|
<template>
|
|
<div class="base-list-table w-full">
|
|
<el-table
|
|
:data="tableData"
|
|
v-bind="tableConfig"
|
|
ref="base-list-table"
|
|
:cell-style="{ padding: 0 }"
|
|
:header-cell-style="/** 重写表格样式 **/ {
|
|
padding: '5px 0',
|
|
}"
|
|
row-key="id"
|
|
:lazy="true"
|
|
:load="loadSubClassFn"
|
|
border>
|
|
<!-- @cell-mouse-enter="(row, col, cell, event) => $emit('cell-mouse-enter', row, col, cell, event)"> -->
|
|
<!-- @cell-mouse-leave="(row, col, cell, event) => $emit('cell-mouse-leave', row, col, cell, event)"> -->
|
|
<!-- 表格头定义 -->
|
|
<template v-for="(head, idx) in columnConfig">
|
|
<!-- 索引列 -->
|
|
<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"
|
|
:index="
|
|
head.type === 'index'
|
|
? (val) => {
|
|
return val + 1 + (page - 1) * size;
|
|
}
|
|
: null
|
|
"
|
|
v-bind="head.more"></el-table-column>
|
|
<!-- 普通的表头 -->
|
|
<el-table-column
|
|
v-else
|
|
:key="idx + 'else'"
|
|
:label="head.label ? head.label : head.name"
|
|
:prop="head.prop || null"
|
|
:width="head.width || null"
|
|
:min-width="head.minWidth || null"
|
|
:fixed="head.fixed || null"
|
|
:tooltip-effect="head.tooltipEffect || 'light'"
|
|
filter-placement="top"
|
|
:align="head.align || null"
|
|
v-bind="head.more"
|
|
:show-overflow-tooltip="head.showOverflowTooltip || !(head.prop === 'operations')">
|
|
<!-- :show-overflow-tooltip="head.showOverflowTooltip || true" -->
|
|
<!-- 子组件 -->
|
|
<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>
|
|
|
|
<!-- 多级表头 -->
|
|
<template v-if="!head.prop && head.children">
|
|
<TableHead
|
|
v-for="(subhead, subindex) in head.children"
|
|
:key="'subhead-' + idx + '-subindex-' + subindex"
|
|
:opt="subhead" />
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TableHead from "@/components/TableHead.vue";
|
|
// 1. 表格拖拽开启/关闭
|
|
// 2. 表格的样式'
|
|
// 3. more...
|
|
|
|
export default {
|
|
name: "BaseListTable",
|
|
components: { TableHead },
|
|
filters: {
|
|
commonFilter: (source, filterType = (a) => a) => {
|
|
return filterType(source);
|
|
},
|
|
},
|
|
props: {
|
|
tableConfig: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
columnConfig: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
tableData: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
refreshLayoutKey: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
page: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
size: {
|
|
type: Number,
|
|
default: 20,
|
|
},
|
|
},
|
|
inject: ["urls"],
|
|
data() {
|
|
return {
|
|
dataList: [],
|
|
};
|
|
},
|
|
watch: {
|
|
refreshLayoutKey(val) {
|
|
this.$refs["base-list-table"].doLayout();
|
|
},
|
|
},
|
|
methods: {
|
|
handleSubEmitData(payload) {
|
|
console.log("[component] BaseListTable handleSubEmitData(): ", payload);
|
|
this.$emit("operate-event", payload);
|
|
},
|
|
loadSubClassFn(tree, treeNode, resolve) {
|
|
this.$emit("load-sub", { tree, treeNode, resolve });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|