SOURCE

console 命令行工具 X clear

                    
>
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");