## TableUtil el-table 合并行列工具

### 导入使用
```code[javascript]
import TableUtil from "niceloo-vue2element-ui/service/TableUtil";
```

### 合并行表格,返回一个方法
TableUtil.getObjectSpanMethod(tableData,[{key:'key1'},{key:'key2',parentKey:"key1"},{key:'key3',parentKey:"key1"}])

```code[javascript]
    @param tableData: array  // 需要合并的表格数据
    @param array: 对象数组  // 需要合并列的key，及合并父级key
    @returns function

    例：this.baseObjectSpanMethod=TableUtil.getObjectSpanMethod(this.tableData,[
	        {key:"nameId"},
	        {key:"amount1",parentKey:"nameId"},
	        {key:"amount2",parentKey:"nameId"},
	        {key:"amount3",parentKey:"amount2"},
	    ]);
    输出    一个方法,供合并表格使用。具体可参考下例
```


:::demo
```html
<template>
	<div>
		<el-table :data="tableData" border row-key="id" :span-method="objectSpanMethod"
		:summary-method="getSummaries" :show-summary="true">
			<el-table-column prop="id" label="ID" width="180">
			</el-table-column>
			<el-table-column prop="name" label="姓名">
			</el-table-column>
			<el-table-column prop="amount1" label="数值 1（元）">
			</el-table-column>
			<el-table-column prop="amount2" label="数值 2（元）">
			</el-table-column>
			<el-table-column prop="amount3" label="数值 3（元）">
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
    // import TableUtil from "niceloo-vue2element-ui/service/TableUtil";
  export default {
    data () {
		return {
			tableData: [
            {
			    id: '12987122',
			    nameId: 'b',
			    name: '王小虎',
			    amount1: '234',
			    amount2: '3.2',
			    amount3: 10
			}, {
			    id: '12987123',
			    nameId: 'a',
			    name: '王小虎',
			    amount1: '165',
			    amount2: '4.43',
			    amount3: 12
			}, {
			    id: '12987124',
			    nameId: 'a',
			    name: '王小虎',
			    amount1: '324',
			    amount2: '1.9',
			    amount3: 9
			}, {
			    id: '12987125',
			    nameId: 'a',
			    name: '王小虎',
			    amount1: '621',
			    amount2: '2.2',
			    amount3: 17
			}, {
			    id: '12987126',
			    nameId: 'a',
			    name: '王小虎',
			    amount1: '539',
			    amount2: '4.1',
			    amount3: 15
			}]
		}
	},
	created(){
	    this.baseObjectSpanMethod=TableUtil.getObjectSpanMethod(this.tableData,[
	        {key:"nameId"},
	        {key:"amount1",parentKey:"nameId"},
	        {key:"amount2",parentKey:"nameId"},
	        {key:"amount3",parentKey:"amount2"},
	    ]);
	},
    methods: {
        objectSpanMethod({row, column, rowIndex, columnIndex}) {
            let key=column.property;
            key={
                "name":"nameId"
            }[key]||key;
            return this.baseObjectSpanMethod(row,key);
        },
        getSummaries(param) {
            console.log('getSummariesMethod')
            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;
        }
    }
  }
</script>
```
:::

### 合并列表格,返回一个方法
> TableUtil.getArraySpanMethod(tableData,["key1","key2","key3","key4"])

```code[javascript]
    @param tableData: array  // 需要合并的表格数据
    @param array: key数组  // 需要合并列的key
    @returns function

    例：this.baseArraySpanMethod=TableUtil.getArraySpanMethod(this.tableData,[
	        {key:"nameId"},
	        {key:"amount1",parentKey:"nameId"},
	        {key:"amount2",parentKey:"nameId"},
	        {key:"amount3",parentKey:"amount2"},
	    ]);
    输出    一个方法,供合并表格使用。具体可参考下例
```

:::demo
```html
<template>
	<div>
		<el-table :data="tableData" border row-key="id" :span-method="arraySpanMethod"
		:summary-method="getSummaries" :show-summary="true">
			<el-table-column prop="id" label="ID" width="180">
			</el-table-column>
			<el-table-column prop="name" label="姓名">
			</el-table-column>
			<el-table-column prop="amount1" label="数值 1（元）">
			</el-table-column>
			<el-table-column prop="amount2" label="数值 2（元）">
			</el-table-column>
			<el-table-column prop="amount3" label="数值 3（元）">
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
  export default {
    data () {
		return {
			tableData: [
            {
			    id: '12987122',
			    nameId: 'b',
			    name: '王小虎',
			    amount1: '234',
			    amount2: '234',
			    amount3: 10
			}, {
			    id: '12987123',
			    nameId: 'a',
			    name: '王小虎',
			    amount1: '4.43',
			    amount2: '4.43',
			    amount3: 12
			}, {
			    id: '12987124',
			    nameId: 'a',
			    name: '王小虎',
			    amount1: '324',
			    amount2: '1.9',
			    amount3: '1.9',
			}, {
			    id: '12987125',
			    nameId: 'a',
			    name: '王小虎',
			    amount1: '621',
			    amount2: '2.2',
			    amount3: 17
			}, {
			    id: '12987126',
			    nameId: 'a',
			    name: '王小虎',
			    amount1: '539',
			    amount2: '539',
			    amount3: '539',
			}]
		}
	},
	created(){
	    this.baseArraySpanMethod=TableUtil.getArraySpanMethod(this.tableData,[
	        "name","amount1","amount2","amount3"
	    ]);
	},
    methods: {
        arraySpanMethod({row, column, rowIndex, columnIndex}) {
            let key=column.property;
            key={
                "name":"nameId"
            }[key]||key;
            return this.baseArraySpanMethod(row,key);
        },
        getSummaries(param) {
            console.log('getSummariesMethod')
            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;
        }
    }
  }
</script>
```
:::