update 表格的序号列
This commit is contained in:
@@ -1,80 +1,74 @@
|
||||
<!-- 这里单纯的配置表格就好了-->
|
||||
<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: '8px 0',
|
||||
}"
|
||||
row-key="id"
|
||||
>
|
||||
<!-- @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"
|
||||
:show-overflow-tooltip="head.showOverflowTooltip || true"
|
||||
:tooltip-effect="head.tooltipEffect || 'light'"
|
||||
filter-placement="top"
|
||||
:align="head.align || null"
|
||||
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>
|
||||
<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: '8px 0',
|
||||
}"
|
||||
row-key="id"
|
||||
>
|
||||
<!-- @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 + (currentPage - 1) * currentSize;
|
||||
}
|
||||
: 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"
|
||||
:show-overflow-tooltip="head.showOverflowTooltip || true"
|
||||
:tooltip-effect="head.tooltipEffect || 'light'"
|
||||
filter-placement="top"
|
||||
:align="head.align || null"
|
||||
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>
|
||||
|
||||
<!-- 多级表头 -->
|
||||
<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 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>
|
||||
@@ -84,49 +78,49 @@ import TableHead from "./TableHead.vue";
|
||||
// 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: () => [],
|
||||
},
|
||||
},
|
||||
inject: ["urls"],
|
||||
data() {
|
||||
return {
|
||||
page: 1,
|
||||
size: 20, // 默认20
|
||||
dataList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 'props.tableData': {
|
||||
// handler: () => {
|
||||
// this.$refs['base-list-table'].doLayout();
|
||||
// },
|
||||
// immediate: true,
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
handleSubEmitData(payload) {
|
||||
console.log("[component] BaseListTable handleSubEmitData(): ", payload);
|
||||
this.$emit("operate-event", payload);
|
||||
},
|
||||
},
|
||||
name: "BaseListTable",
|
||||
components: { TableHead },
|
||||
filters: {
|
||||
commonFilter: (source, filterType = (a) => a) => {
|
||||
return filterType(source);
|
||||
},
|
||||
},
|
||||
props: {
|
||||
currentPage: { type: Number, default: 1 },
|
||||
currentSize: { type: Number, default: 20 },
|
||||
tableConfig: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
columnConfig: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
inject: ["urls"],
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 'props.tableData': {
|
||||
// handler: () => {
|
||||
// this.$refs['base-list-table'].doLayout();
|
||||
// },
|
||||
// immediate: true,
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
handleSubEmitData(payload) {
|
||||
console.log("[component] BaseListTable handleSubEmitData(): ", payload);
|
||||
this.$emit("operate-event", payload);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user