Vue混入mixins分发组件可复用功能

export default {
    methods: {
        transDict(list, status) {
        // 这里使用 try--catch 是防止有的时候后端返回的数据中式null或空的情况，也就是说此条数据无状态，我们只需要在catch中返回 --- 或者 无状态 等字眼即可
            try {
                return list.find(item => item.dictValue == status).dictLabel
            } catch (error) {
                return '---'
            }
        }
    }
}

<template>
	<div>
		<el-table>
			<!-- 方式一 -->
			<el-table-column label="状态" prop="status" align="center" width="60" :formatter="e => transDict(status_list, e.status)" show-overflow-tooltip />
			<!-- 方式二 -->
			<el-table-column label="性质" prop="customerType">
                <template slot-scope="{ row }">{{ transDict(nature, row.customerType) }}</template>
            </el-table-column>
		</el-table>
	</div>
</template>
<script>
import { mapGetters } from 'vuex';
import dataTrans from '@/mixins/dataTrans';
export default {
	name: 'Index',
	mixins: [dataTrans],
	computed: {
		...mapGetters(['status_list', 'nature'])
	}
}
</script>

export default {
    methods: {
    // 可传入字节流及想要的文件名。甚至可以传入文件后缀，进行多种文件类型下载，这里默认的是下载Excel表格
        filesExport(res, title) {
            if(res != null) {
                res.download = `${title}.xlsx`
                let url = window.URL.createObjectURL(new Blob([res]))
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.download = `${title}.xlsx`
                link.type = 'xls'
                document.body.appendChild(link)
                link.click()
            }else {
            	// 自定义的弹窗提示
                this.$commonJS.openNotify('导出失败', 'error')
            }
        }
    },
}

<script>
import tools from '@/mixins/tools';
export default {
	name: 'Index',
	mixins: [tools],
	methods: {
		exportSheet() {
			let title = ''
			this.$commonJS.showLoading('正在导出')
			exportInvoiceApply(id).then((res) => {
                this.$commonJS.hideLoading()
                // 直接通过 this 调用 混入中的方法，传入 字节流 及标题
                this.filesExport(res, title)
            }).catch(() => {
                this.$commonJS.hideLoading()
            });
		}
	}
}
</script>

export default {
    methods: {
    // params是el-table表格合计事件的默认参数，里面包含表格中每一列的属性和数据 
    // prop 是自定义的传入的一个数组，意思是需要计算哪个属性的合计
    // title 是合计列 第一格的文字描述
        getSummariesMixins(params,prop,title) {
            const { columns, data } = params
            const sums = []
            columns.forEach((column, index) => {
                if(index === 0) {
                    sums[index] = title
                    return;
                }
                if(prop.includes(column.property)) {
                    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;
        }
    }
}

<template>
	<div>
		<el-table
             :data="dataList"
             border
             show-summary
             :summary-method="getSummaries"
             style="margin-top: 20px"
            >  
                <el-table-column type="index" width="55"/>
                <el-table-column label="名称" prop="goodsName" show-overflow-tooltip/>
                <el-table-column label="型号" prop="goodsModel" show-overflow-tooltip/>
                <el-table-column label="单位" prop="unit" show-overflow-tooltip>
                    <template slot-scope="{row}">{{ row.unit || row.goodsUnit }}</template>
                </el-table-column>
                <el-table-column label="数量" prop="number" show-overflow-tooltip>
                    <template slot-scope="{row, $index}">
                        <el-input v-model="row.number" @input="changeNumber($event, $index)" size="mini" type="number"/>
                    </template>
                </el-table-column>
                <el-table-column label="单价（含税）" prop="unitPrice" show-overflow-tooltip/>
                <el-table-column label="金额（含税）" prop="amount" show-overflow-tooltip />
                <el-table-column label="操作" align="center" fixed="right" width="100">
                    <template slot-scope="scope">
                        <el-button @click="deleteItems(scope)" type="text" style="color: #F56C6C;">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
	</div>
</template>
<script>
import getSummaries from '@/mixins/getSummaries';
export default {
	name: 'Index',
	mixins: [getSummaries],
	methods: {
		getSummaries(params) {
		// ['number', 'amount'] 是表格中的 prop 属性，需要对哪个属性进行合计 就写进数组里即可。
            return this.getSummariesMixins(params, ['number', 'amount'], '合计')
        }
	}
}
</script>