输入框内容部分不可修改el-input部分动态内容不可修改完整代码 省市区联动，详细地址中省市区选择后不可更改

在这里插入图片描述

            <tr>
              <e-td :required="!read" label>
                <span>地区：</span>
              </e-td>
              <td>
                <div
                  class="table-cell-flex"
                  style="width:450px"
                  v-if="!read && this.data.nationCode == 148"
                >
                  <el-form-item prop="nationCode" class="address">
                    <el-select
                      placeholder="国家"
                      v-model="data.nationCode"
                      @change="getprovince(data.nationCode, 1)"
                    >
                      <el-option
                        v-for="item in nationList"
                        :key="item.code"
                        :label="item.codeName"
                        :value="item.codeCode"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="proviceCode" class="address">
                    <el-select
                      placeholder="省级地区"
                      v-model="data.proviceCode"
                      @change="getCityList(data.proviceCode, 1)"
                    >
                      <el-option
                        v-for="item in proviceList"
                        :key="item.code"
                        :label="item.codeName"
                        :value="item.codeCode"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item class="el-form-item" prop="cityCode">
                    <el-select
                      placeholder="市级地区"
                      v-model="data.cityCode"
                      @change="getCountyList(data.cityCode, 1)"
                    >
                      <el-option
                        v-for="item in cityList"
                        :key="item.code"
                        :label="item.codeName"
                        :value="item.codeCode"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item class="el-form-item" prop="countyCode">
                    <el-select
                      @change="getCountyName(data.countyCode, 1)"
                      v-model="data.countyCode"
                      placeholder="区级地区"
                    >
                      <el-option
                        v-for="item in countyList"
                        :key="item.code"
                        :label="item.codeName"
                        :value="item.codeCode"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div
                  class="table-cell-flex"
                  style="width:450px"
                  v-else-if="!read && this.data.nationCode != 148"
                >
                  <el-form-item prop="nationCode" class="address">
                    <el-select
                      placeholder="国家"
                      v-model="data.nationCode"
                      @change="getprovince(data.nationCode, 1)"
                    >
                      <el-option
                        v-for="item in nationList"
                        :key="item.code"
                        :label="item.codeName"
                        :value="item.codeCode"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <div class="el-form-item">
                    <el-form-item class="address">
                      <el-select
                        placeholder="省级地区"
                        v-model="data.proviceCode"
                        @change="getCityList(data.proviceCode, 1)"
                      >
                        <el-option
                          v-for="item in proviceList"
                          :key="item.code"
                          :label="item.codeName"
                          :value="item.codeCode"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="el-form-item">
                    <el-form-item class="el-form-item">
                      <el-select
                        placeholder="市级地区"
                        v-model="data.cityCode"
                        @change="getCountyList(data.cityCode, 1)"
                      >
                        <el-option
                          v-for="item in cityList"
                          :key="item.code"
                          :label="item.codeName"
                          :value="item.codeCode"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="el-form-item">
                    <el-form-item class="el-form-item">
                      <el-select
                        @change="getCountyName(data.countyCode, 1)"
                        v-model="data.countyCode"
                        placeholder="区级地区"
                      >
                        <el-option
                          v-for="item in countyList"
                          :key="item.code"
                          :label="item.codeName"
                          :value="item.codeCode"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
                <span v-else>
                  <template v-if="data.nationProviceCityName">
                    <span
                      :style="
                        equal(
                          'nationProviceCityName',
                          data.nationProviceCityName
                        )
                      "
                    >
                      {{ data.nationProviceCityName }}
                    </span>
                  </template>
                  <template v-else-if="data.regProvinceAndCityAndCountyName">
                    <span
                      :style="
                        equal(
                          'regProvinceAndCityAndCountyName',
                          data.regProvinceAndCityAndCountyName
                        )
                      "
                      >{{ data.regProvinceAndCityAndCountyName }}</span
                    >
                  </template>
                  <template v-else>
                    <span :style="equal('proviceName', data.proviceName)">{{
                      data.proviceName
                    }}</span>
                    <span :style="equal('cityName', data.cityName)">{{
                      data.cityName
                    }}</span>
                    <span :style="equal('countyName', data.countyName)">{{
                      data.countyName
                    }}</span>
                  </template>
                </span>
              </td>
              <e-td :required="!read" label>
                <span>详细地址：</span>
              </e-td>
              <td>
                <div class="table-cell-flex">
                  <el-form-item v-if="!read" prop="compAddress">
                    <el-input
                      v-model="data.compAddress"
                      @keydown.delete.native="onDeleteKeyDown"
                      @keydown.native="onKeyDown"
                      @compositionstart.native="onCompositionStart"
                      @compositionend.native="compositionend"
                      placeholder="请输入详细地址"
                    ></el-input>
                  </el-form-item>
                  <span
                    v-else
                    :style="equal('compAddress', data.compAddress)"
                    >{{ data.compAddress }}</span
                  >
                </div>
              </td>
            </tr>

watch: {
    // 国家
    'data.nationCode': {
      handler: function(newval, oldval) {
        console.log(newval, 'new')
        console.log(oldval, 'old')
        if (newval) {
          this.getprovince(newval)
        }
      },
      immediate: true
    },
    // 省级地区
    'data.proviceCode': {
      handler: function(newval, oldval) {
        console.log(newval, 'new')
        console.log(oldval, 'old')
        if (newval) {
          this.getCityList(newval)
        }
      },
      immediate: true
    },
    'data.cityCode': {
      handler: function(newval, oldval) {
        console.log(newval, 'new')
        console.log(oldval, 'old')
        if (newval) {
          this.getCountyList(newval)
        }
      },
      immediate: true
    },
    'data.countyCode': {
      handler: function(newval) {
        if (newval) {
          this.getCountyName(newval)
        }
      },
      immediate: true
    },
    },
    methods: {
     // 获取国家
    async getnationList() {
      let params = {
        classCode: 'countryRegionsAndProvinces',
        higherCode: 0
      }
      let data = await this.$api.common.getDictionary(params)
      if (data) {
        this.nationList = data
      }
    },
    // 获取省市
    async getprovince(val, isempty) {
      let params = {
        classCode: 'countryRegionsAndProvinces',
        higherCode: val
      }
      let data = await this.$api.common.getDictionary(params)
      if (data) {
        this.proviceList = data
        if (isempty == 1) {
          this.proviceName = ''
          this.cityName = ''
          this.countyName = ''
          this.data.compAddress = ''
          this.data.proviceCode = ''
          this.data.cityCode = ''
          this.data.countyCode = ''
          this.cityList = []
          this.countyList = []
        }
        },// 获取城市
    async getCityList(code, isempty) {
      let params = {
        classCode: 'countryRegionsAndProvinces',
        higherCode: code
      }
      let data = await this.$api.common.getDictionary(params)
      if (data) {
        this.cityList = data
        if (isempty == 1) {
          this.cityName = ''
          this.countyName = ''
          this.data.cityCode = ''
          this.data.countyCode = ''
          this.countyList = []
          this.proviceName = this.getRessName(
            this.data.proviceCode,
            this.proviceList
          )
          this.data.compAddress =
            this.proviceName + this.cityName + this.countyName
          this.ress = this.proviceName + this.cityName + this.countyName
        }
      }
    },
    // 获取乡镇
    async getCountyList(code, isempty) {
      let params = {
        classCode: 'countryRegionsAndProvinces',
        higherCode: code
      }
      let data = await this.$api.common.getDictionary(params)
      if (data) {
        this.countyList = data
        if (isempty == 1) {
          this.cityName = ''
          this.data.countyCode = ''
          this.countyName = ''
          this.proviceName = this.getRessName(
            this.data.proviceCode,
            this.proviceList
          )
          this.cityName = this.getRessName(this.data.cityCode, this.cityList)

          this.data.compAddress =
            this.proviceName + this.cityName + this.countyName
            //ress data里记得定义一下用来获取选择的地址的长度在输入的时候做校验用
          this.ress = this.proviceName + this.cityName + this.countyName
        }
      }
    },
    getCountyName(val, isempty) {
      if (isempty == 1) {
        this.countyName = ''
        this.proviceName = this.getRessName(
          this.data.proviceCode,
          this.proviceList
        )
        this.cityName = this.getRessName(this.data.cityCode, this.cityList)

        this.countyName = this.getRessName(
          this.data.countyCode,
          this.countyList
        )
        this.data.compAddress =
          this.proviceName + this.cityName + this.countyName
        this.ress = this.proviceName + this.cityName + this.countyName
      }
    },
    // 输入限制
    onDeleteKeyDown(e) {
      let { selectionStart, selectionEnd } = e.target
      // 如果包含不能删除的区域位置，阻止删除
      if (!(selectionStart > this.ress.length || selectionEnd < 0)) {
        e.preventDefault()
      }
    },
    onKeyDown(e) {
      // 如果包含不能删除的区域，禁止
      if (
        !(
          e.target.selectionStart > this.ress.length - 1 ||
          e.target.selectionEnd < 0
        )
      ) {
        e.preventDefault()
      }
    },
    // 输入法键盘字符下不可输入，记录输入的起始位置
    onCompositionStart(e) {
      this.checkText = e.data //记录选中的文字
      this.startVal = e.target.selectionStart
    },

    // 当在不可编辑的范围内输入时结合输入文字开始位置this.startVal和输入结束
    // e.target.selectionEnd位置，通过字符串截取并接还原原来的字符。
    compositionend(e) {
      if (this.startVal !== null) {
        this.$nextTick(() => {
          if (this.startVal < this.ress.length) {
            let targetVal = e.target.value
            let startTarget = targetVal.substring(0, this.startVal)
            let endTarget = targetVal.substring(e.target.selectionEnd)
            e.target.value = startTarget + this.checkText + endTarget
          }
        })
      }
    },
    //	获取省市区名称
    getRessName(codeCode, arr) {
      return arr.find(o => o.id == Number(codeCode))
        ? arr.find(o => o.id == Number(codeCode)).codeName
        : ''
    },
        }

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/245553.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【ECharts】从零实现echarts地图完整代码（纯前端，包含地图资源）

【ECharts】从零实现echarts地图完整代码（纯前端，包含地图资源）

最终效果 标题环境搭建 这里忽略创建vue项目的操作过程&#xff0c;请自行搭建 vue2 项目、less 环境 安装下载 echarts 这里我们选择npm下载 npm install echarts安装成功后&#xff0c;在 main.js 中把echarts配置到this上 // 引入 echarts import * as Echarts from ech…
阅读更多...
【每日一题】用邮票贴满网格图

【每日一题】用邮票贴满网格图

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;二维前缀和二维差分 写在最后 Tag 【二维前缀和】【二维差分】【矩阵】【2023-12-14】 题目来源 2132. 用邮票贴满网格图 题目解读 在 01 矩阵中&#xff0c;判断是否可以用给定尺寸的邮票将所有 0 位置都覆盖住&…
阅读更多...
JDK安装测试记录

JDK安装测试记录

jdk安装测试记录 1.下载JDK2.安装3.适配环境变量4.测试 1.下载JDK 写这篇主要是记录以后自己安装方便&#xff0c;做个记录 Oracle官网 本地下载 需要注然后才能下载: 2.安装 选择默认或者自定义的路径: 后面JRE也可重新定义到自定义的文件夹&#xff1a; 3.适配环境变量 …
阅读更多...
Python接口测试环境搭建过程详解

Python接口测试环境搭建过程详解

环境搭建 python 安装&#xff1a;建议使用python3.7 pycharm安装 requests安装 &#xff1a;pip3 install requests requests 基本使用 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 usage: >>> import requests >>> r requests.get…
阅读更多...
Python爬虫之Cookie 与 Session 的区别

Python爬虫之Cookie 与 Session 的区别

文章目录 一、 含义二、有效时长&#xff1a;三、面试中可能会遇到的问题点四、在反爬技术中的应用关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③Python小游戏源…
阅读更多...
ThinkPHP连接ORACLE数据库教程

ThinkPHP连接ORACLE数据库教程

目录 概念基本步骤详细操作问题排除参考 概念 要连接Oracle数据库&#xff0c;必须有两个东西&#xff0c;一个PHP官方写的扩展&#xff0c;一个Oracle官方写的客户端PHP是通过扩展去操作oralce客户端连接的服务端数据库&#xff0c;所以两个都不能少&#xff0c;而且版本必须…
阅读更多...
ArcGIS导入excel中的经纬度信息，绘制矢量

ArcGIS导入excel中的经纬度信息，绘制矢量

1.首先整理坐标信息 2.其次转成2003格式的excel文件 3.导入arcgis&#xff0c;点击右键添加excel数据 4.显示xy数据 5.显示经度和纬度信息 6&#xff1a;点击【地理坐标系】->【World】->【WGS 1984】->【确定】 7.投影带的确定方式&#xff1a; 因为自己一直…
阅读更多...
字节跳动面经题

字节跳动面经题

字节跳动面经题 1、了解anchor-free? "Anchor-free"是一个指向一类目标检测方法的术语&#xff0c;与传统的"anchor-based"方法相对应。在传统的目标检测中&#xff0c;通常会使用一系列预定义的锚框&#xff08;anchors&#xff09;作为模型的基础。这些…
阅读更多...
verilog基本语法-时序逻辑基础-记忆单元

verilog基本语法-时序逻辑基础-记忆单元

概述: 组合逻辑虽然可以构造各种功能电路&#xff0c;但是他有一个缺点就是输入改变时&#xff0c;输出会立即发生改变。因此历史信息不能被保存下来。两个能够保存信息的存储单元被设计出来&#xff0c;用于保存历史信息。一个是锁存器&#xff0c;另外一个是触发器。锁存器是…
阅读更多...
（基础篇）通过node增删改查连接mysql数据库

（基础篇）通过node增删改查连接mysql数据库

一定要会最基础的sql建表一定要会最基础的sql建表一定要会最基础的sql建表 首先说一下准备工作 一、准备工具 1.mysql数据库Navicat可视化工具&#xff08;数据库表单已经建好&#xff09; 我这里用的小皮工具直接开启的本地mysql 2.vscode (不用说基本上都有) 3.node.js …
阅读更多...
仿牛客论坛的一些细节改进

仿牛客论坛的一些细节改进

私信列表的会话头像链接到个人主页 原来的不足 点击私信列表的会话头像应该要能跳转到该目标对象的个人主页。 原来的代码&#xff1a; <a href"profile.html"><img th:src"${map.target.headerUrl}" class"mr-4 rounded-circle user-he…
阅读更多...
智能优化算法应用：基于黄金正弦算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于黄金正弦算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于黄金正弦算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于黄金正弦算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.黄金正弦算法4.实验参数设定5.算法结果6.…
阅读更多...
web前端实现LED功能、液晶显示时间、数字

web前端实现LED功能、液晶显示时间、数字

MENU 效果演示html部分JavaScript部分css部分 效果演示 html部分 <div id"app"><!-- 页面 --><div class"time-box"><!-- 时 --><div class"house-box"><bit-component :num"houseTem"></bit…
阅读更多...
【MODBUS】Modbus是什么?

【MODBUS】Modbus是什么?

Modbus协议&#xff0c;从字面理解它包括Mod和Bus两部分&#xff0c;首先它是一种bus&#xff0c;即总线协议&#xff0c;和12C、SP|类似&#xff0c;总线就意味着有主机&#xff0c;有从机&#xff0c;这些设备在同一条总线上。 Modbus支持单主机&#xff0c;多个从机&#xf…
阅读更多...
Colorful Grid Codeforces Round 910 (Div. 2) C

Colorful Grid Codeforces Round 910 (Div. 2) C

Problem - C - Codeforces 题目大意&#xff1a;有一个n*m的网格&#xff0c;要求从(1,1)走到(n,m)&#xff0c;同时要求路径的长度必须为k1&#xff0c;然后给每个两点之间的路径染成红色或蓝色&#xff0c;要求任意两个相邻线段颜色不能相同&#xff0c;求涂色的方案 3<…
阅读更多...
将程序注册为系统服务

将程序注册为系统服务

cmd中执行命令&#xff1a; sc create Redis binpath "C:\guet_run1\Redis-x64-5.0.14.1\redis-server.exe" type own start auto displayname "Redis"注意&#xff0c;命令中所有的等号和值之间需要一个空格&#xff08;等号前不要空格&#xff0c;等号后…
阅读更多...
Linux---查看命令帮助

Linux---查看命令帮助

1. 查看命令帮助方式 --help 使用说明: 命令 --helpman 使用说明: man 命令 查看命令帮助的目的说明: 查看命令帮助目的是查看命令选项信息的 --help效果图: man效果图: man命令的说明: 操作键说明空格显示下一屏信息回车显示下一行信息b显示上一屏信息f显示下一屏信息q退…
阅读更多...
[c++] 意识需要转变的一个例子，全局变量的构造函数先于main执行

[c++] 意识需要转变的一个例子，全局变量的构造函数先于main执行

最近还遇到一个例子是关于&#xff1a;从C转C开发需要注意的一个意识问题。本人遇到的这个问题是&#xff0c;带着C的意识来看C的代码&#xff0c;然后根据代码看&#xff0c;有一个全局变量的值在main函数进入之后才会更改&#xff0c;所以百思不得其解&#xff0c;这个变量怎…
阅读更多...
RK3568平台 OTA升级原理

RK3568平台 OTA升级原理

一.前言 在迅速变化和发展的物联网市场&#xff0c;新的产品需求不断涌现&#xff0c;因此对于智能硬件设备的更新需求就变得空前高涨&#xff0c;设备不再像传统设备一样一经出售就不再变更。为了快速响应市场需求&#xff0c;一个技术变得极为重要&#xff0c;即OTA空中下载…
阅读更多...
ES中根据主键_id查询记录

ES中根据主键_id查询记录

一、需求 es中_type&#xff1a;_doc&#xff0c;想要根据主键_id查询记录 二、实现 复合查询中使用语句查询http://192.168.1.1/_doc/1
阅读更多...
最新文章

Copyright @ 2022~2023