ivu-table-merge

iview-table-merge

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

API

Attributes

属性	说明	类型	默认值
cell	要合并的列，顺序必须以table的columns顺序一致	String|Object|Array	null
columns	表格的列	Array	表格的columns属性
data	表格的数据	Array	表格的data属性

Example

<template>
    <div>
        <!-- 这里可以简写为 v-merge-cell="{cell}" 会自动取当前表格实例的columns与data -->
        <Table v-merge-cell="{cell, columns, data}" ref="table" :columns="columns" :data="data"/>
        <Button type="primary" @click="load">加载...</Button>
    </div>
</template>

<script>
import MergeCell from 'ivu-table-merge';

export default {
    name: 'App',
    directives: { MergeCell },
    data () {
        return {
            cell: ['number', { key: 'product', field: 'productId' }],
            columns: [{
                title: '订单号',
                key: 'number'
            }, {
                title: '金额',
                key: 'money'
            }, {
                title: '产品',
                key: 'product'
            }, {
                title: '数量',
                key: 'quantity'
            }],
            data: [{
                number: 123456789,
                money: 1,
                product: 'Mac Air D32',
                productId: 1,
                quantity: 1
            }, {
                number: 123456789,
                money: 2,
                product: 'Mac Air D32',
                productId: 1,
                quantity: 1
            }, {
                number: 123456789,
                money: 2,
                product: 'Mac Air D42',
                productId: 2,
                quantity: 2
            }, {
                number: 987456123,
                money: 20,
                product: 'Mac Air D42',
                productId: 2,
                quantity: 20
            }]
        };
    },
    methods: {
        load () {
            this.data.push({
                number: Date.now(),
                money: 1,
                product: 'Mac Air D42',
                productId: 2,
                quantity: 20
            });
        }
    }
};
</script>