Element-ui 表格 (Table) 组件中动态合并单元格

 

  <el-table :data="data" :span-method="objectSpanMethod" border class="tableArea" style="width: 100%;">
                <el-table-column label="id" prop="id" align="center"></el-table-column>
                <el-table-column label="商品类别" prop="productType" align="center" width="200"></el-table-column>
                <el-table-column label="商品数量" prop="amount" align="center"></el-table-column>
                <el-table-column label="商品价格" prop="price" align="center"></el-table-column>
                <el-table-column label="商品名称" prop="productName" width="200px" align="center"></el-table-column>
                <el-table-column label="更新时间" prop="updateTime" align="center"></el-table-column

<script>
export default {
    data() {
        return {

            tableData: [
                {
                    code: '33333333',
                    name: '张三',
                    money: '5000',
                    ftMoney: '333',
                    state: '已分摊'
                }
            ],
            data: [{
                id: "201808300001",
                productType: "纺织品",
                amount: 20,
                productName: "上衣",
                price: "80",
                updateTime: "2018-08-30",
            },
            {
                id: "201808300002",
                productType: "纺织品",
                amount: 20,
                productName: "裤子",
                price: "76",
                updateTime: "2018-08-31",
            },
            {
                id: "201808300003",
                productType: "皮制品",
                amount: 100,
                productName: "挎包",
                price: "150",
                updateTime: "2018-08-31",
            },

            {
                id: "201808300004",
                productType: "皮制品",
                amount: 180,
                productName: "鞋子",
                price: "76",
                updateTime: "2018-08-29",
            },
            {
                id: "201808300005",
                productType: "绸缎",
                amount: 80,
                productName: "旗袍",
                price: "106",
                updateTime: "2018-08-31",
            },
            {
                id: "201808300006",
                productType: "纺织品",
                amount: 20,
                productName: "短裙",
                price: "36",
                updateTime: "2018-08-30",
            },
            {
                id: "201808300007",
                productType: "纺织品",
                amount: 80,
                productName: "短袖",
                price: "36",
                updateTime: "2018-08-30",
            },
            {
                id: "201808300008",
                productType: "纺织品",
                amount: 20,
                productName: "短袖",
                price: "36",
                updateTime: "2018-08-30",
            },
            {
                id: "201808300009",
                productType: "皮制品",
                amount: 20,
                productName: "钱包",
                price: "60",
                updateTime: "2018-08-30",
            },
            {
                id: "201808300011",
                productType: "纺织品",
                amount: 90,
                productName: "手套",
                price: "60",
                updateTime: "2018-08-30",
            },
            {
                id: "201808300012",
                productType: "纺织品",
                amount: 90,
                productName: "袜子",
                price: "36",
                updateTime: "2018-08-30",
            },
            {
                id: "201808300013",
                productType: "饮料",
                amount: 100,
                productName: "雪碧",
                price: "5",
                updateTime: "2018-08-31",
            },
            {
                id: "201808300013",
                productType: "纺织品",
                amount: 100,
                productName: "风衣",
                price: "50",
                updateTime: "2018-08-31",
            },],
            spanArr: []
        };
    },


    components: {

    },
    methods: {
        getSpanArrFunc(data) {
            this.spanArr = []
            let pos
            for (let i = 0; i < data.length; i++) {
                if (i === 0) {
                    this.spanArr.push(1)
                    pos = 0
                } else if (
                    data[i].productType &&
                    data[i].productType === data[i - 1].productType
                ) {
                    this.spanArr[pos] += 1
                    this.spanArr.push(0)
                } else {
                    this.spanArr.push(1)
                    pos = i
                }
            }
        },
        //合并行
        objectSpanMethod({ rowIndex, columnIndex }) {
            if (columnIndex === 1) {
                const _row = this.spanArr[rowIndex]
                const _col = _row > 0 ? 1 : 0
                console.log(_row, _col)
                return {
                    // [0,0] 表示这一行不显示， [2,1]表示行的合并数
                    rowspan: _row,
                    colspan: _col,
                }
            }
        },

    },
    created() {

    },
    mounted() {
        this.getSpanArrFunc(this.data)
    },


    computed: {

    },


    watch: {

        cart: {

            handler(newV) {

            },
            deep: true,

            immediate: true,
        },
    },
};
</script>