安装依赖

    1. yarn add vant

    引入

    1. import vant from 'vant'
    2. impott 'vant/lib/index.css'
    3. Vue.use(vant)
    1. <template>
    2. <div class="about">
    3. <h2>我的购物车</h2>
    4. <table>
    5. <thead>
    6. <tr>
    7. <th>选择</th>
    8. <th>商品</th>
    9. <th>数量</th>
    10. <th>价格</th>
    11. <th>小计</th>
    12. <td>操作</td>
    13. </tr>
    14. </thead>
    15. <tbody>
    16. <tr>
    17. <td>
    18. <van-checkbox checked-color="#FF6700" v-model="checked"></van-checkbox>
    19. </td>
    20. <td>
    21. <img src="https://img.yzcdn.cn/vant/t-thirt.jpg" />
    22. <span>衣服</span>
    23. </td>
    24. <td>
    25. <van-stepper v-model="value" integer />
    26. </td>
    27. <td>
    28. <span>2220</span>
    29. </td>
    30. <td>
    31. <span>3520</span>
    32. </td>
    33. <td>
    34. <el-button type="danger">删除</el-button>
    35. </td>
    36. </tr>
    37. </tbody>
    38. </table>
    39. <van-submit-bar :price="3050" button-text="提交订单">
    40. <van-checkbox v-model="checAll">全选</van-checkbox>
    41. </van-submit-bar>
    42. </div>
    43. </template>
    44. <script>
    45. export default {
    46. data() {
    47. return {
    48. checked: false,
    49. value: 1
    50. };
    51. }
    52. };
    53. </script>
    54. <style scoped>
    55. table >>> .van-checkbox {
    56. margin-left: 20px;
    57. }
    58. table {
    59. background: #fff;
    60. border-collapse: collapse;
    61. width: 100%;
    62. border: 1px solid #666;
    63. border-radius: 15px;
    64. margin: 0 auto;
    65. /* display: block; */
    66. text-align: center;
    67. }
    68. table img {
    69. width: 100px;
    70. }
    71. table th {
    72. text-align: center;
    73. }
    74. .about>.van-submit-bar{
    75. padding:0 20px;
    76. }
    77. .about>>>.van-checkbox__icon .van-icon {
    78. border-color:#FF6700 !important;
    79. }
    80. table >>> .van-stepper .van-stepper__input {
    81. width: 40px !important;
    82. }
    83. thead {
    84. background: #333;
    85. color: #fff;
    86. line-height: 50px;
    87. }
    88. tbody tr {
    89. line-height: 100px;
    90. }
    91. </style>

    详细代码

    1. <div class="about">
    2. <h2 class="title">我的购物车</h2>
    3. <table>
    4. <thead>
    5. <tr>
    6. <th>选择</th>
    7. <th>商品</th>
    8. <th>数量</th>
    9. <th>价格</th>
    10. <th>小计</th>
    11. <td>操作</td>
    12. </tr>
    13. </thead>
    14. <tbody>
    15. <tr v-for="item of cartList" :key="item.productId">
    16. <td>
    17. <van-checkbox checked-color="#FF6700" v-model="item.checked"></van-checkbox>
    18. </td>
    19. <td>
    20. <img :src="item.productImage" />
    21. <span>{{item.productName}}</span>
    22. </td>
    23. <td>
    24. <van-stepper v-model="item.productNum" integer />
    25. </td>
    26. <td>
    27. <span>{{item.salePrice}}</span>
    28. </td>
    29. <td>{{(item.productNum)*(item.salePrice)}}</td>
    30. <td>
    31. <el-button type="danger" @click="handleDelete(item.productId)">删除</el-button>
    32. </td>
    33. </tr>
    34. </tbody>
    35. </table>
    36. <van-submit-bar :price="sum" button-text="提交订单">
    37. <van-checkbox v-model="checkAll">全选</van-checkbox>
    38. </van-submit-bar>
    39. </div>
    1. mounted(){
    2. this.$http("/users/cartList").then(res=>{
    3. this.cartList=res.data.result
    4. })
    5. }
    6. computed: {
    7. checkAll: {
    8. /* products值变化时会重新计算 */
    9. get() {
    10. return this.cartList.every(item => item.checked);
    11. },
    12. set(val) {
    13. //给checkbox赋值的时候触发
    14. this.cartList.forEach(item => (item.checked = val));
    15. }
    16. },
    17. sum() {
    18. /* sum的值会被缓存,如果依赖的数据没有变化不会重新执行 */s
    19. var total = 0;
    20. this.cartList.forEach(item => {
    21. if (item.checked) {
    22. total = item["productNum"] * item["salePrice"] + total;
    23. }
    24. });
    25. return total * 100;
    26. }
    27. },