今天要用element做这样一个表格

主要是跨行跨列，查了查element文档，确实Table有个属性可以控制span-method

  • 于是我先用原生的table实现了我的表格。
  • 然后对照原生代码，再确定哪行哪列需要加rowspan或colspan属性，在 span-method 绑定的方法里返回。
  • 注意哦，行数列数都是索引都是从0开始的，表头不算；不显示的单元格，绑定方法里面返回[0, 0]。

最终实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<el-dialog 
    title="提现说明" 
    class="withdrawal_instructions_dialog"
    :visible.sync="withdrawalInstructionsVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :width="'606px'">
    <el-table
        :data="gridData" 
        :span-method="arraySpanMethod"
        :header-cell-style="withdrawalHeaderStyle"
        :cell-style="withdrawalCellStyle"
        border>
        <el-table-column property="time" label="提现时间" :align="'center'" :width="'100px'">
            <template slot-scope="scope"><div v-html="scope.row.time"></div></template>
        </el-table-column>
        <el-table-column property="restriction" label="次数限制" :align="'center'" :width="'100px'"></el-table-column>
        <el-table-column property="amount" label="提现金额" :align="'center'" :width="'140px'">
            <template slot-scope="scope"><p v-html="scope.row.amount"></p></template>
        </el-table-column>
        <el-table-column property="cost" label="提现费用" :align="'center'" :width="'100px'"></el-table-column>
        <el-table-column property="account" label="提现到账时间" :align="'center'"></el-table-column>
    </el-table>
</el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
export default {
    data() {
        return {
            gridData: [
                {
                    time: '工作日',
                    restriction: '无',
                    amount: '5万及以下',
                    cost: '2.5元/笔',
                    account: '2小时内'
                },
                {
                    time: '工作日',
                    restriction: '无',
                    amount: '5万以上<br>(仅支持9:00-17:00)',
                    cost: '2.5元/笔',
                    account: '2小时内'
                },
                {
                    time: '非工作日',
                    restriction: '无',
                    amount: '仅支持5万及以下',
                    cost: '2.5元/笔',
                    account: '2小时内'
                },
                {
                    time: '<p class="special_text">温馨提示：无投资用户按提现金额的0.5%收取(单笔费用不足3元，按3元/笔收取）</p>'
                }
            ]
        }
    },
    methods: {
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (rowIndex == 0 && (columnIndex == 0 || columnIndex == 1 || columnIndex == 3 || columnIndex == 4)) {
                return [2, 1];
            } else if(rowIndex == 3 && columnIndex == 0) {
                return [1, 5];
            } else if(rowIndex == 1 && columnIndex != 2) {
                return [0, 0];
            }
        }
    }
}