vue+elementui地址选择器-三级联选择器+详细地址实现国内地址选择

在页面的显示情况

在这里插入图片描述
在这里插入图片描述
前端拼接实现存储
在这里插入图片描述
在这里插入图片描述

具体实现步骤

1.安装中国全省市区的数据

命令提示符窗口使用管理员身份进入对应vue项目的文件夹,在窗口安装

npm install element-china-area-data -S

2.在script内引入安装的数据

import {
  regionData,
  codeToText
} from "element-china-area-data";

3.data内的数据

  data() {
    return {
      // 计划编码表格数据
      codeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        custom: null,
        address: null,
        phone: null,
        status: null,
      },
      // 表单参数
      form: {},
      addtions: [],
      tableData: [],
      regionDatas: regionData,
      cateProps: {
        value: "value",
        label: "label",
        children: "children",
      },
      formLabelWidth: "80px",
    };
  },

4.点击新增的时候弹出对话框

    <!-- 添加或修改计划编码对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="收货地址" prop="address" :label-width="formLabelWidth" v-model="form.address">
          <el-col :span="12">
            <el-cascader
              style="width: 100%"
              clearable
              size="large"
              :options="regionDatas"
              ref="cascaderAddr"
              :props="cateProps"
              v-model="form.address1"
              @change="handleChange"
            ></el-cascader>
          </el-col>
          <el-col :span="12">
            <el-input
              v-model="form.address2"
              placeholder="请输入详细地址"
              clearable
              maxlength="20"
              show-word-limit
            ></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

表格绑定address

<el-table-column label="收货地址" align="center" prop="address" />

methods方法

  methods: {
    //级联选择器详细数据
    handleChange(value) {
      console.log(value);
      this.form.address1 = value;
      var name = "";
      this.form.address1.map((item) => (name += codeToText[item] + "")); //将省市区三个拼接一起
      this.addtions.names = name;
    },
    // 表单重置
    reset() {
      this.form = {
        codeId: null,
        code: null,
        custom: null,
        address: null,
        address1: [],
        address2: "",
        phone: null,
        status: null,
        createTime: null,
        updateTime: null,
        createBy: null,
        updateBy: null,
        del: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.codeId != null) {
            this.codeList.push(this.form); //将新增数据push到dataList数组中
            this.codeList.forEach((element) => {
              element.address = this.addtions.names + this.form.address2; // 将级联选择器的地址和input里的详细地址合并赋值给table数据表中
            });
            updateCode(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            this.codeList.push(this.form); //将新增数据push到dataList数组中
            this.codeList.forEach((element) => {
              element.address = this.addtions.names + this.form.address2; // 将级联选择器的地址和input里的详细地址合并赋值给table数据表中
            });
            addCode(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
}

提交方法里主要是

this.codeList.push(this.form); //将新增数据push到dataList数组中
            this.codeList.forEach((element) => {
              element.address = this.addtions.names + this.form.address2; // 将级联选择器的地址和input里的详细地址合并赋值给table数据表中
            });

这一块的拼接比较重要,其余可自行根据自己的提交方法来

  • 12
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今年不养猪只除草

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值