- 定义table 的 scheme
table.js
export const manualOrderTable = {
hasSelect: false, // 是否展示选择框
hasIndex: false, // 是否展示序号
constomTableAttrs: { // table 中的自定义属性
"summary-method": (param) => { // 求和
debugger
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总价';
return;
}
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += ' 元';
} else {
sums[index] = 'N/A';
}
});
return sums;
}
// "span-method": ({ row, column, rowIndex, columnIndex })=>{ // 合并单元格
// if (rowIndex % 2 === 0) {
// if (columnIndex === 0) {
// return [1, 2];
// } else if (columnIndex === 1) {
// return [0, 0];
// }
// }
// }
},
columns: [
{ prop: 'createTime', label: '创建时间', width: '145', comstomProp: {} },
{ prop: 'title', label: '标题', comstomProp: {} },
{ prop: 'leadOrgName', label: '责任单位', width: '145', comstomProp: {} },
{ prop: 'createName', label: '创建人', width: '145', comstomProp: {} },
{ prop: 'orderStatusName',label: '问题单状态', comstomProp: {},children: [
{
prop: 'orderStatusName',label: '问题单状态1',
children: [
{ prop: 'orderStatusName',label: '问题单状态1-1'},
{ prop: 'orderStatusName',label: '问题单状态1-2'},
]
},
{
prop: 'orderStatusName',label: '问题单状态2',
children: [
{ prop: 'orderStatusName',label: '问题单状态2-1'},
{ prop: 'orderStatusName',label: '问题单状态2-2'},
]
},
]},
{ prop: 'content', label: '问题内容', comstomProp: {}},
{ prop: 'oper', label: '操作列', width: '145', comstomProp: {} }
]
}
- 封装的组件table.vue
<template>
<div>
<el-table
ref="RefCustomTable"
v-bind="{...$attrs,...constomTableAttrs}"
v-on="$listeners"
:data="data"
header-cell-class-name="table-header-cell"
header-row-class-name="table-header-class"
:row-key="rowKey"
style="width: 100%;"
>
<el-table-column
v-if="hasIndex"
:label="label||'序号'"
type="index"
:width="80"
></el-table-column>
<!-- TODO:多选点击事件还没绑定 -->
<el-table-column
v-if="hasSelect"
:selectable="selectable"
type="selection"
width="55"
></el-table-column>
<!-- 列表字段 -->
<slot v-for="item in columns" :name="item.prop" v-bind="item.constomProp">
<el-table-column
v-if="!item.children"
:key="item.prop"
:formatter="item.formatter"
:label="item.label"
:prop="item.prop"
:resizable="false"
:show-overflow-tooltip="true"
:sortable="item.sortable"
:width="item.width"
:align="item.align ||'center'"
>
</el-table-column>
<MultiColumn v-else :item="item"></MultiColumn>
</slot>
</el-table>
</div>
</template>
<script>
import MultiColumn from "./components/multi-column.vue"
export default {
components: {
MultiColumn
},
props: {
data: {
type: Array,
default: ()=>{
return []
}
},
constomTableAttrs: {
type: Object,
default: ()=>{}
},
rowKey: {
type: String,
default: 'id'
},
hasIndex: {
type: Boolean,
default: false
},
hasSelect: {
type: Boolean,
default: false
},
columns: {
type: Array,
default: ()=>{
return []
}
}
},
}
</script>
- 引入的多列递归组件MultiColumn.vue
<template>
<el-table-column
:key="item.prop"
:class-name="item.columnClass"
:formatter="item.formatter"
:label="item.label"
:min-width="item.minWidth"
:prop="item.prop"
:show-overflow-tooltip="true"
:sortable="item.sortable"
:width="item.width"
:align="item.align||'center'"
>
<template v-if="item.children">
<multi-column v-for="(col, index) in item.children" :key="index" :item="col"></multi-column>
</template>
</el-table-column>
</template>
<script>
export default {
name: "MultiColumn",
props: {
item: {
type: Object
}
}
};
</script>
- 实际使用
...代码片段
<custom-table
:data="tableData"
:border="true"
show-summary
:hasSelect="manualOrderTable.hasSelect"
:hasIndex="manualOrderTable.hasIndex"
@row-click="handleRowClick"
:constomTableAttrs="manualOrderTable.constomTableAttrs"
:columns="manualOrderTable.columns">
<template v-slot:oper>
<el-table-column align="center" label="操作列">
<template slot-scope="scope">
<el-button v-if="searchParams.type == 2" :disabled="scope.row.orderStatus != 1" type="text" @click.stop="approvalNode(scope, searchParams.type)">审核</el-button>
<el-button v-if="searchParams.type == 3" :disabled="scope.row.orderStatus != 2" type="text" @click.stop="approvalNode(scope, searchParams.type)">治理</el-button>
<el-button v-if="searchParams.type == 4" :disabled="scope.row.orderStatus != 3" type="text" @click.stop="approvalNode(scope, searchParams.type)">确认</el-button>
<el-button type="text" @click.stop="goDetail(scope.row, scope.row.orderStatus, true)">详情</el-button>
</template>
</el-table-column>
</template>
</custom-table>
...代码片段
<script>
import { manualOrderTable } from './table'
import customTable from '@/components/common/table'
export default {
name: 'manualOder',
components: {
customTable,
...代码片段
},
...代码片段
}
<script>
撒花