console
var Main = {
data() {
return {
tableData: [
{ name: '真实数据', num: 1, patients: 2, fans: 10 },
{ name: '虚拟数据', num: 0, patients: 3, fans: 10 }
],
columns: [
{ id: 0, label: '', prop: 'name', width: '100px' },
{ id: 1, label: '在线问诊数', prop: 'num', width: '200px' },
{ id: 2, label: '服务患者', prop: 'patients', width: '200px' },
{ id: 3, label: '粉丝', prop: 'fans', width: '200px' }
],
};
},
methods: {
getSummaries(param) {
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;
}
}
};
var Ctor = Vue.extend(Main);
new Ctor().$mount("#app");
<script src="//unpkg.com/vue/dist/vue.js">
</script>
<script src="//unpkg.com/element-ui@2.15.6/lib/index.js">
</script>
<div id="app">
<template>
<el-table :data="tableData" border show-summary :summary-method="getSummaries">
<el-table-column v-for="(col, index) in columns" :key="col.id" :prop="col.prop" :label="col.label" :min-width="col.width">
<template slot-scope="scope">
<template v-if="index>0 && scope.$index>0">
<el-input v-model="scope.row[col.prop]" />
</template>
<span v-else>{{ scope.row[col.prop] }}</span>
</template>
</el-table-column>
</el-table>
</template>
</div>
@import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css");