vxe-table底部合计

<input value="" type="hidden" name="goods_table" id="goods_table"/>
                                            <div id="app" class=" am-u-sm-12 am-u-md-12 am-u-lg-12 am-margin-top-xs">


                                                <input v-model="goods_id_str" type="hidden" id="goods_id_str_input"
                                                       name="partNoName"/>

                                                <vxe-toolbar>
                                                    <template #buttons>
                                                        <vxe-button @click="removeEvent()">删除</vxe-button>
                                                        <vxe-button @click="$refs.xTree.setAllTreeExpand(true)">展开所有
                                                        </vxe-button>
                                                        <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有
                                                        </vxe-button>
                                                    </template>
                                                </vxe-toolbar>

                                                <vxe-table
                                                        resizable
                                                        show-overflow
                                                        highlight-hover-row
                                                        height="400"
                                                        ref="xTree"
                                                        :edit-rules="validRules"
                                                        :tree-config="{children: 'children'}"
                                                        :edit-config="{trigger: 'click', mode: 'row',activeMethod:activeMethod2}"
                                                        :checkbox-config="{labelField: 'goods_id',checkMethod: checCheckboxkMethod2}"
                                                        :data="tableData"
                                                        keep-source="true"
                                                        showStatus="true"
                                                        :footer-method="footerMethod"
                                                        show-footer
                                                        @edit-closed="editClosedEvent"

                                                >
                                                    <vxe-table-column type="checkbox" title="goods_id"
                                                                      tree-node></vxe-table-column>
                                                    <vxe-table-column field="goods_sku_id"
                                                                      title="goods_sku_id"></vxe-table-column>
                                                    <vxe-table-column field="goods_name" title="名称"></vxe-table-column>
                                                    <vxe-table-column field="goods_attr" title="规格"></vxe-table-column>
                                                    <vxe-table-column field="cost_price" title="采购价"
                                                                      :edit-render="{name: 'input'}"></vxe-table-column>
                                                    <vxe-table-column field="num" title="采购数"
                                                                      :edit-render="{name: '$input', props: {type: 'number', min:'0', step:1}}"></vxe-table-column>
                                                    <vxe-table-column title="合计">
                                                        <template #default="{ row }">
                                                            <span>{{ countAmount(row) }} 元</span>
                                                        </template>
                                                    </vxe-table-column>


                                            </div>

<script type="text/javascript">


    new Vue({
        el: '#app',

        data() {

            return {

                validRules: {
                    num: [
                        {required: true, message: '采购数量必须填写'},
                        {min: 0, step: 1, message: '采购数量必须大于等于零'}
                    ],
                    cost_price: [
                        {required: true, message: '采购价必须填写'},
                        {min: 0, message: '采购价必须大于等于零'}
                    ]
                },

                goods_id_str: '',

                tableData: [
                    // {'goods_id':1000,'goods_sku_id':1012,'goods_name':'东京翻晒','goods_attr':'颜色：白色','cost_price':666,'num':10,}
                ],


            }
        },
        mounted() {

        },
        methods: {

            //单元格是否允许编辑
            activeMethod2({row, rowIndex, column, columnIndex}) {

                return !(row.children && row.children.length && (columnIndex === 4 || columnIndex === 5));

            },

            //行是否允许选中
            checCheckboxkMethod2({row}) {

                return row.level === 1;


            },

            //取差集
            difference(a, b) {
                return b.filter(item => !a.includes(item))
            },

            //去重
            unique(arr) {
                return arr.filter(function (item, index, arr) {
                    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
                    return arr.indexOf(item, 0) === index;
                });
            },

            //获取sku数据
            getSkuData(goods_id_arr) {
                var that = this
                var url = "<?= url('agent.purchase.order/getSkuData') ?>";

                $.post(url, {goods_id_arr: goods_id_arr}, function (result) {

                    if (result['code'] === 1) {

                        let $new_table = that.$refs.xTree

                        result['data'].forEach(function (val) {
                            //从最后一行插入数据
                            $new_table.insertAt(val, -1)

                        })

                        that.saveTableData()

                    } else {
                        $.show_error(result['msg']);
                    }

                });

            },
            //编辑单元格实时保存
            editClosedEvent({row, column}) {
                var that = this
                //待提交的表格数据
                that.saveTableData()

            },

            //保存待提交的表格数据
            saveTableData(){
                var that = this
                const $table = that.$refs.xTree

                var goods_table = JSON.stringify($table.afterFullData)
                $("#goods_table").val(goods_table)

                //付款金额
                $("#pay_price").val($table.footerTableData[0][6])
            },

            //计算相关
            sumNum(list, field) {
                let count = 0
                list.forEach(item => {
                    count += Number(item[field])
                })
                return count
            },
            countAmount(row) {
                if(row.children && row.children.length){
                    return 0
                }else{
                    return row.cost_price * row.num
                }

            },
            countAllAmount(data) {
                let count = 0
                data.forEach(row => {
                    if (row.children && row.children.length) {
                        row.children.forEach(children_row => {
                            count += this.countAmount(children_row)
                        })
                    } else {
                        count += this.countAmount(row)
                    }

                })
                return count
            },
            countAllNum(data) {
                let count = 0
                data.forEach(row => {
                    if (row.children && row.children.length) {
                        row.children.forEach(children_row => {
                            count += children_row.num * 1
                        })
                    } else {
                        count += row.num * 1
                    }

                })
                return count
            },

            //底部合计
            footerMethod({columns, data}) {

                return [
                    columns.map((column, columnIndex) => {
                        if (columnIndex === 0) {
                            return '合计'
                        }
                        if (columnIndex === 5) {
                            return `${this.countAllNum(data)}`
                        } else if (columnIndex === 6) {
                            return `${this.countAllAmount(data)}`
                        }
                        return '-'
                    })
                ];
            },

            //删除数据
            removeEvent() {
                //获取选中
                const $table = this.$refs.xTree
                const selectRecords = $table.getCheckboxRecords()

                if(selectRecords && selectRecords.length ){
                    var delete_arr = [];
                    var hidden_value = $("#goods_id_str_input").val();
                    var hidden_value_arr = hidden_value.split(',');

                    selectRecords.forEach(function (row) {
                        delete_arr.push(row.goods_id+'')
                        $table.remove(row)


                    })

                    //待提交的表格数据
                    this.saveTableData()

                    //取差集

                    var del_diff = this.difference(delete_arr,hidden_value_arr)
                    var del_diff_str = del_diff.join(',')

                    this.goods_id_str = del_diff_str;
                }


            },


        },
        watch: {

            goods_id_str: function (newVal, oldVal) {

                // TO DO
                //获取当前表格内的数据
                let $table = this.$refs.xTree

                var now_goods_ids = []
                $table.afterFullData.forEach(function (item) {
                    now_goods_ids.push(item.goods_id + '')

                })

                //获取变化后的数据
                let new_arr = newVal.split(',')

                //取差集
                let diff_data = [];
                diff_data = this.difference(now_goods_ids, new_arr)


                //获取商品信息
                if (diff_data.length > 0) {
                    this.getSkuData(diff_data)
                }

                //待提交的表格数据
                // let $new_table = this.$refs.xTree
                //
                // var goods_table = JSON.stringify($new_table.afterFullData)
                // // console.log('goods_table', goods_table)
                // $("#goods_table").val(goods_table)

            }
        }

    })
    ;

</script>