项目问题总结（五十三）《pc收银台-合并支付提单页面》： vue中如何操作DOM?

时间：2021-04-16 18:13:25 阅读：42 评论：0 收藏：0 [点我收藏+]

前言

最近开发pc可以说很心累了，害，打工人

背景

技术分享图片

订单列表是循环生成的input（checkbox），需要实现的功能是：勾选上面或者下面的【全选复选框】，每个【订单复选框】都勾选，取消勾选上面或者下面的【全选复选框】，每个【订单复选框】都取消勾选

无论是哪种情况都需要计算出所有勾选上的订单的总金额，另外当单独勾选或者取消勾选【订单复选框】的时候，也需要计算所有勾选上的订单的总金额

原来项目中代码是vm和jquery

<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <colgroup>
        <col class="selector">
        <col class="order-num">
        <col class="imglist">
        <col class="a-price">
        <col class="a-time">
    </colgroup>
    <thead>
    <tr>
        <th><input type="checkbox" id="upCheckAll" class="check checkall" name="checkgroup"  >
            <label for="upCheckAll">全选</label>
        </th>
        <th>订单类型/订单号</th>
        <th>订单商品</th>
        <th>订单金额</th>
        <th>订单时间</th>
    </tr>
    </thead>

    #if ($!listOrders&&$!listOrders.size()>0)
        #foreach ($!order in $!listOrders)
            <tbody>
            <tr>
                <td><input type="checkbox" class="check" value="$!order.shouldPay" name="checkgroup_order"  orderId="$!order.orderId" payJson="$!order.payJson" onclick="countShouldPay()" >
                </td>
                <td>
                    $!order.orderTypeName
                    <br>
                    <a href="$!order.itemPageUrl" target="_blank">$!order.orderId</a>
                </td>
                <td><div class="img-list">
                    #foreach ($!orderWare in $!order.wareInfos)
                        <a href="$!orderWare.wareUrl" class="img-box" clstag="click|keycount|orderinfo|order_product" target="_blank"  >
                            <img title="$!orderWare.name" src="$!orderWare.imgPath" width="50" height="50" />
                        </a>
                    #end
                </div>
                </td>
                <td>$!order.shouldPay<br />$!order.paymentTypeName</td>
                <td>
                    <span class="ftx-03">$!order.dateSubmit</span></td>
            </tr>
            </tbody>
        #end
    #end
    <tfoot>
    <tr>
        <td class="tfcol01"><input type="checkbox" id="downCheckAll" class="check checkall" value="" name="checkgroup" >
            <label for="downCheckAll">全选</label>
        </td>
        <td class="tfcol02" colspan="4">
            <strong class="total">
                合计：<span id="shouldPay" class="ftx-01">￥0.00</span>
            </strong>
            <a class="btn btn-2" href="#"  id="mergePay" >合并付款</a>

        </td>
    </tr>
    </tfoot>
</table>

<script>
$(document).ready(function () {

    $("#upCheckAll").click(function () {
        checkAll(this)

    });

    $("#downCheckAll").click(function () {
        checkAll(this)
    });

    $("#mergePay").click(function () {
        margePay();
    });
});


/***************全选 or 反选******************/
function checkAll(obj) {
    if ($(obj).attr("checked") == "checked") { // 全选
        $(‘input[type="checkbox"][name="checkgroup_order"]‘).each(function () {
            $(this).attr("checked", "checked");
        });
    } else { // 取消全选
        $(‘input[type="checkbox"][name="checkgroup_order"]‘).each(function () {
            $(this).removeAttr("checked");
        });
    }
    countShouldPay();
}

/***************点击确认支付按钮******************/
function margePay() {
    var userLevel = $("#userLevel").val();

    var orderIdList = new Array();
    var payJsonList = new Array();
    var payCount = 0;
    $(‘input[type="checkbox"][name="checkgroup_order"]:checked‘).each(function (index, ele) {
        orderIdList.push($(ele).attr("orderId"));
        payJsonList.push($(ele).attr("payJson"));
        payCount++;
    });
    if (payCount < 2) {
        alert("请至少选择两个或两个以上订单进行合并支付");
        return;
    }

    if(userLevel == "90"){
        mergePayCompany(orderIdList);
    } else {
        mergePayPrivate(payJsonList);
    }
}

/**********跟随事件计算应付金额******************/
function countShouldPay() {
    var shouldTotalPay = 0;
    $(‘input[type="checkbox"][name="checkgroup_order"]:checked‘).each(
        function () {
            var shouldPay = $(this).attr("value");
            shouldTotalPay = Number(shouldTotalPay) + Number(shouldPay);
        }
    );
    $("#shouldPay").html("￥" + shouldTotalPay.toFixed(2));
}
</script>

现在需要做的就是将vm和jquery写的代码改成vue

全选和取消全选逻辑：

点击全选复选框（上面和下面的）的时候，判断当前点击的全选复选框是否是选中状态，如何是，选中所有订单复选框，如果不是，取消选中所有订单复选框

实时计算应付金额逻辑：

函数A：遍历选中的订单复选框，拿到它们的value和，和就是应付金额

点击全选复选框（上面和下面的）的时侯，在处理好订单复选框逻辑后，调用函数A，在点击每个订单复选框的时候，也需要调用函数A

问题

vue中循环生成订单复选框（input=checkbox）

在全选和取消全选逻辑中，如何获取所有选中的订单复选框，也就是说vue中如何操作DOM？

解决

1、jQuery操作dom（推荐指数：★☆☆☆☆）：

只要拿jQuery的选择器，选中相应的dom进行操作就可以了，但是大家都知道jQuery获取元素是查找页面所有，相当于“循环”所有元素直至找到需要的dom，但是vue是单页面的，jQuery获取dom并不只是获取vue当前页面，而是从根路由开始查找所有，当其他页面出现相同的元素，也会被获取到，而且jQuery操作的dom，如果是根据动态获取数据渲染的，那么写在mounted里的操作方法将会失效，必须放到updated里，这样会导致有些操作被执行多遍，所以还是不建议在vue中使用jQuery。

2、原生js操作dom（推荐指数：★★★★☆）：

原生js获取dom就很简单了，例如：根据id、class、当前元素的上一个元素......

3、vue官方方法：ref（推荐指数：★★★★★）：

vue中的ref是把当前dom元素 “ 抽离出来 ” ，只要通过 this.$refs就可以获取到（注意this指向），此方法尤其适用于父元素需要操作子组件的dom元素，这也是子传父传递数据的一种方法

下面让我来看个案例：

设置了一个button按钮，通过点击事件，然后弹出新增的弹框 , 然后点击 “ × ”的button按钮，关闭弹框，此时需要操作弹框的dom元素，通过ref定义一个名字，然后在方法中通过 this.$refs.名字获取对应的dom

<template>
    <div  class="index-box">
        <!--新增按钮-->
        <input type="button" id="DbManagement-addBtn" @click="showAddAlert" value="新增">
        <!--新增数据源弹框-->
        <div class="addDbSource-alert" ref="addAlert">
            <div class="addAlert-top">
                添加数据源
                <input type="button" value="×" class="addAlert-close" @click="closeAddAlert">
            </div>
            <div class="addAlert-content">
                <div style="height: 1000px;"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Index",
        data(){
            return {
 
            }
        },
        methods:{
            // 点击新增按钮，弹出新增数据源的弹框
            showAddAlert(){
                this.$refs.addAlert.style.display = "block";
            },
            // 点击 × 关闭新增数据源的弹框
            closeAddAlert(){
                this.$refs.addAlert.style.display = "none";
            },
        },
        created(){
 
        }
    }
</script>

注意

对于方法一和方法二

vue组件中通过mounted获取节点操作，vue中在mounted之后的钩子函数中才能进行dom操作，mounted完成dom挂载

<template>
    <div>
        <canvas id=‘cvs‘ >
    </div>
</template>
<script>
    export default{
        mounted(){
            let canvas=document.querySelector(‘#cvs‘);
        }
    }
</script>