首页 vue案例 正文
Vue仿淘宝设置收货地址表格代码

 2023-11-17    84  

      效果图：
1.gif

通过点击设置默认地址之后 将当前点击的列表移动到顶部 进行默认设置

首先在创建的实例的data中 写好静态的数据

 const app = new Vue({
    el: "#app",
    data() {
      return {
        addressList: [
          {
            name: "张二",
            address: "广东省广州市白云区",
            detailAddress: "广州大道南1629号华南鞋业城",
            zipCode: "510000",
            phone: "156568532323",
            isDefault: true,
          },
          {
            name: "张三",
            address: "广东省广州市白云区",
            detailAddress: "广州大道南1629号华南鞋业城",
            zipCode: "510000",
            phone: "156568532323",
            isDefault: false,
          },
          {
            name: "张四",
            address: "广东省广州市白云区",
            detailAddress: "广州大道南1629号华南鞋业城",
            zipCode: "510000",
            phone: "156568532323",
            isDefault: false,
          },
          {
            name: "张五",
            address: "广东省广州市白云区",
            detailAddress: "广州大道南1629号华南鞋业城",
            zipCode: "510000",
            phone: "156568532323",
            isDefault: false,
          },
          {
            name: "张六",
            address: "广东省广州市白云区",
            detailAddress: "广州大道南1629号华南鞋业城",
            zipCode: "510000",
            phone: "156568532323",
            isDefault: false,
          },
          {
            name: "张七",
            address: "广东省广州市白云区",
            detailAddress: "广州大道南1629号华南鞋业城",
            zipCode: "510000",
            phone: "156568532323",
            isDefault: false,
          },
        ],
      };
    },

在视图层中通过v-for进行遍历 并且在设置默认以及默认地址通过v-if else进行判断显示

    <div id="app">
      <table>
        <thead>
          <tr>
            <th style="width: 10%">收货人</th>
            <th style="width: 15%">所在地区</th>
            <th style="width: 25%">详细地址</th>
            <th style="width: 10%">邮编</th>
            <th style="width: 15%">电话/手机</th>
            <th style="width: 15%">操作</th>
            <th style="width: 10%">设置</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in addressList" :key="index">
            <td>{{item.name}}</td>
            <td>{{item.address}}</td>
            <td>{{item.detailAddress}}</td>
            <td>{{item.zipCode}}</td>
            <td>{{item.phone}}</td>
            <td>
              <span class="ti">
                <div class="handle">
                  <a href="javascript:;" class="a-chg">修改</a>
                  <i class="line">|</i>
                  <em class="i-del">删除</em>
                </div>
              </span>
            </td>
            <td>
              <span class="ti">
                <em class="set-def cur" v-if="item.isDefault">默认地址</em>
                <em class="set-def" v-else @click="setDefault(index)"
                  >设为默认</em
                >
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

当我每次点击设置默认标签时 给setDefault传递当前数据的下标  打印查看

image.png

预览：
image.png

紧接着创建一个新数组 让它等于data中的数组 然后给新数组进行forEach循环

当遍历的下标等于 传入的i 返回true 相反 返回false的方式 去动态更改isDefault去控制显示 

image.png

最后只要通过剩余运算符 以及splice通过在新创建的数组中截取对应的数据 并添加到第一位

image.png

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue仿淘宝设置收货地址表格代码</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      em,
      i {
        font-style: normal;
      }
      a {
        text-decoration: none;
        color: #333;
      }
      #app {
        width: 800px;
        margin-top: 40px;
        margin: 100px auto;
        background-color: #fff;
        font-size: 12px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        height: auto;
      }
      #app tr th,
      #app tr td,
      #app tr {
        font-weight: normal;
        border-bottom: 1px solid #dcdee3;
        border: 1px solid #dcdee3;
        text-align: left;
      }
      #app tr th {
        background-color: #ebecf0;
      }
      #app tr th,
      #app tr td {
        padding: 12px 14px;
      }
      table thead tr .ti {
        text-align: center;
        display: inline-block;
      }
      .handle {
        box-sizing: border-box;
        width: 70px;
        margin: auto;
        text-align: center;
      }
      .handle i {
        padding: 0 5px;
        color: #ccc;
      }
      .ti {
        box-sizing: border-box;
        display: inline-block;
      }
      .handle .a-chg,
      .handle .i-del,
      .set-def {
        user-select: none;
        transition: all 0.3s;
        cursor: pointer;
      }
      .handle .a-chg:hover,
      .handle .i-del:hover,
      .set-def:hover {
        color: #eb5f31;
      }
      .set-def.cur {
        display: inline-block;
        width: 70px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #e44135;
        border-radius: 4px;
        background: #ffd6cc;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <table>
        <thead>
          <tr>
            <th style="width: 10%">收货人</th>
            <th style="width: 15%">所在地区</th>
            <th style="width: 25%">详细地址</th>
            <th style="width: 10%">邮编</th>
            <th style="width: 15%">电话/手机</th>
            <th style="width: 15%">操作</th>
            <th style="width: 10%">设置</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in addressList" :key="index">
            <td>{{item.name}}</td>
            <td>{{item.address}}</td>
            <td>{{item.detailAddress}}</td>
            <td>{{item.zipCode}}</td>
            <td>{{item.phone}}</td>
            <td>
              <span class="ti">
                <div class="handle">
                  <a href="javascript:;" class="a-chg">修改</a>
                  <i class="line">|</i>
                  <em class="i-del">删除</em>
                </div>
              </span>
            </td>
            <td>
              <span class="ti">
                <em class="set-def cur" v-if="item.isDefault">默认地址</em>
                <em class="set-def" v-else @click="setDefault(index)"
                  >设为默认</em
                >
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
<script src="./js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data() {
      return {
        addressList: [
          {
            name: "张二",
            address: "广东省广州市白云区",
            detailAddress: "广州大道南1629号华南鞋业城",
            zipCode: "510000",
            phone: "156568532323",
            isDefault: true,
          },
          {
            name: "张三",
            address: "广东省广州市白云区",
            detailAddress: "广州大道南1629号华南鞋业城",
            zipCode: "510000",
            phone: "156568532323",
            isDefault: false,
          },
          {
            name: "张四",
            address: "广东省广州市白云区",
            detailAddress: "广州大道南1629号华南鞋业城",
            zipCode: "510000",
            phone: "156568532323",
            isDefault: false,
          },
          {
            name: "张五",
            address: "广东省广州市白云区",
            detailAddress: "广州大道南1629号华南鞋业城",
            zipCode: "510000",
            phone: "156568532323",
            isDefault: false,
          },
          {
            name: "张六",
            address: "广东省广州市白云区",
            detailAddress: "广州大道南1629号华南鞋业城",
            zipCode: "510000",
            phone: "156568532323",
            isDefault: false,
          },
          {
            name: "张七",
            address: "广东省广州市白云区",
            detailAddress: "广州大道南1629号华南鞋业城",
            zipCode: "510000",
            phone: "156568532323",
            isDefault: false,
          },
        ],
      };
    },
    methods: {
      setDefault(i) {
        // 创建一个空数组
        console.log(i);

        let addLists = this.addressList;

        addLists.forEach((item, index) => {
          item.isDefault = index == i;
        });
        this.addressList.splice(0, 0, ...addLists.splice(i, 1));
      },
    },
  });
</script>


  •  标签：  

发表评论：

原文链接：http://1.15.94.33/?id=214

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。

热门文章
热门标签
最新留言
友情链接

您的备案号皖ICP备2023021143号-1

本网站用于日常作责，学习记录，供大家使用参考

Copyright © 2012-2020，Powered By Z-Blog， Theme By zblog模板