|
@@ -0,0 +1,255 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!-- :data="tableData"
|
|
|
+ :span-method="objectSpanMethod" -->
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
|
|
|
+ style="width: 100%;"
|
|
|
+ >
|
|
|
+ <template #append>
|
|
|
+ <table style="width: 100%;" cellspacing="0" cellpadding="0" border="0">
|
|
|
+ <colgroup>
|
|
|
+ <col name="el-table_5_column_1" width="180" />
|
|
|
+ <col name="el-table_5_column_2" width="151" />
|
|
|
+ <col name="el-table_5_column_3" width="105" />
|
|
|
+ <col name="el-table_5_column_4" width="105" />
|
|
|
+ <col name="el-table_5_column_5" width="105" />
|
|
|
+ <col name="el-table_5_column_6" width="105" />
|
|
|
+ <col name="el-table_5_column_7" width="105" />
|
|
|
+ <col name="el-table_5_column_8" width="105" />
|
|
|
+ <col name="gutter" width="8" />
|
|
|
+ </colgroup>
|
|
|
+ <thead class="has-gutter">
|
|
|
+ <tr>
|
|
|
+ <th class="is-center" style="background: #EDEEF0; color: #444">
|
|
|
+ 服务
|
|
|
+ </th>
|
|
|
+ <th class="is-center" style="background: #EDEEF0; color: #444">
|
|
|
+ 功能
|
|
|
+ </th>
|
|
|
+ <th colspan="3" class="is-center" style="background: #EDEEF0; color: #444">
|
|
|
+ 基础版
|
|
|
+ </th>
|
|
|
+ <th colspan="3" class="is-center" style="background: #EDEEF0; color: #444">
|
|
|
+ 专业版
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ </table>
|
|
|
+ <div style="height: 500px;overflow-y: auto;">
|
|
|
+ <table
|
|
|
+ style="width: 100%;"
|
|
|
+ cellspacing="0"
|
|
|
+ cellpadding="0"
|
|
|
+ border="0"
|
|
|
+ >
|
|
|
+ <colgroup>
|
|
|
+ <col name="el-table_5_column_1" width="180" />
|
|
|
+ <col name="el-table_5_column_2" width="151" />
|
|
|
+ <col name="el-table_5_column_3" width="105" />
|
|
|
+ <col name="el-table_5_column_4" width="105" />
|
|
|
+ <col name="el-table_5_column_5" width="105" />
|
|
|
+ <col name="el-table_5_column_6" width="105" />
|
|
|
+ <col name="el-table_5_column_7" width="105" />
|
|
|
+ <col name="el-table_5_column_8" width="105" />
|
|
|
+ </colgroup>
|
|
|
+ <tbody>
|
|
|
+ <tr
|
|
|
+ class="el-table__row"
|
|
|
+ v-for="(item, index) in tableData"
|
|
|
+ :key="item.name"
|
|
|
+ >
|
|
|
+ <td rowspan="8" colspan="1" class="is-center" v-if="index == 0">
|
|
|
+ <div class="cell">{{ item.id }}</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell">{{ item.name }}</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="3" class="is-center">
|
|
|
+ <div class="cell">
|
|
|
+ <i
|
|
|
+ :class="
|
|
|
+ item.baseStatus ? 'el-icon-check' : 'el-icon-close'
|
|
|
+ "
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="3" class="is-center">
|
|
|
+ <div class="cell">
|
|
|
+ <i
|
|
|
+ :class="item.status ? 'el-icon-check' : 'el-icon-close'"
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr
|
|
|
+ class="el-table__row"
|
|
|
+ v-for="(item, index) in table2"
|
|
|
+ :key="item.name"
|
|
|
+ >
|
|
|
+ <td rowspan="7" colspan="1" class="is-center" v-if="index == 0">
|
|
|
+ <div class="cell">{{ item.id }}</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell">{{ item.name }}</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="3" class="is-center">
|
|
|
+ <div class="cell">
|
|
|
+ <i
|
|
|
+ :class="
|
|
|
+ item.baseStatus ? 'el-icon-check' : 'el-icon-close'
|
|
|
+ "
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="3" class="is-center">
|
|
|
+ <div class="cell">
|
|
|
+ <i
|
|
|
+ :class="item.status ? 'el-icon-check' : 'el-icon-close'"
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr
|
|
|
+ class="el-table__row"
|
|
|
+ v-for="(item, index) in table3"
|
|
|
+ :key="item.name"
|
|
|
+ >
|
|
|
+ <td
|
|
|
+ rowspan="11"
|
|
|
+ colspan="1"
|
|
|
+ class="is-center"
|
|
|
+ v-if="index == 0"
|
|
|
+ >
|
|
|
+ <div class="cell">{{ item.id }}</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell">{{ item.name }}</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="3" class="is-center">
|
|
|
+ <div class="cell">
|
|
|
+ <i
|
|
|
+ :class="
|
|
|
+ item.baseStatus ? 'el-icon-check' : 'el-icon-close'
|
|
|
+ "
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="3" class="is-center">
|
|
|
+ <div class="cell">
|
|
|
+ <i
|
|
|
+ :class="item.status ? 'el-icon-check' : 'el-icon-close'"
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class="el-table__row">
|
|
|
+ <td rowspan="1" colspan="1" class="is-center" >
|
|
|
+ <div class="cell">招生人数</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell"></div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell">0~1000人版</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell">0~2000人版</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell">0~3000人版</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell">0~1000人版</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell">0~2000人版</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell">0~3000人版</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class="el-table__row">
|
|
|
+ <td rowspan="2" colspan="1" class="is-center" >
|
|
|
+ <div class="cell">零售价</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell">月度</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell amount">{{ 1860 | hasMoneyFormat }}</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell amount">{{ 2160 | hasMoneyFormat }}</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell amount">{{ 2460 | hasMoneyFormat }}</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell amount">{{ 2340 | hasMoneyFormat }}</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell amount">{{ 2640 | hasMoneyFormat }}</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell amount">{{ 2940 | hasMoneyFormat }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class="el-table__row">
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell">年度</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell amount">{{ 18600 | hasMoneyFormat }}</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell amount">{{ 21600 | hasMoneyFormat }}</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell amount">{{ 24600 | hasMoneyFormat }}</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell amount">{{ 23400 | hasMoneyFormat }}</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell amount">{{ 26400 | hasMoneyFormat }}</div>
|
|
|
+ </td>
|
|
|
+ <td rowspan="1" colspan="1" class="is-center">
|
|
|
+ <div class="cell amount">{{ 29400 | hasMoneyFormat }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { tableInfo, table2, table3 } from "./table";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [...tableInfo],
|
|
|
+ table2: [...table2],
|
|
|
+ table3: [...table3]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {}
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+/deep/.el-icon-close,
|
|
|
+/deep/.el-icon-check {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+/deep/.el-icon-close {
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+/deep/.el-icon-check, .amount {
|
|
|
+ color: var(--color-primary);
|
|
|
+}
|
|
|
+</style>
|