Vue计算属性通过响应式字段provinceName、cityName、areaName自动拼接完整地址，支持空值过滤与不完整选择状态，联动选择器变更时自动更新视图。
Vue 计算属性本身不直接“实现”三级联动，而是配合 data 中的省、市、区三个选中值，自动拼接出完整地址字符串。核心逻辑是：当任一选择变化时，计算属性实时返回拼接结果，无需手动触发更新。
确保数据源结构清晰
省市区三级数据通常为嵌套数组或树形结构（如从 API 获取的 provinces → cities → areas）。你需要在组件中维护三个响应式字段：
- provinceId：当前选中的省级 ID（如 "110000"）
- cityId：当前选中的市级 ID（如 "110100"）
- areaId：当前选中的区级 ID（如 "110101"）
同时建议维护对应的名称字段（provinceName、cityName、areaName），或通过 ID 在数据中查找——后者更省内存，但需确保查找逻辑正确且响应式。
用 computed 拼接完整地址
定义一个计算属性，按顺序拼接名称，自动过滤空值（比如未选市区时只显示省）：
立即学习“前端免费学习笔记（深入）”；
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
computed: {
fullAddress() {
const parts = []
if (this.provinceName) parts.push(this.provinceName)
if (this.cityName) parts.push(this.cityName)
if (this.areaName) parts.push(this.areaName)
return parts.join(' ')
}
}
这样写比硬拼 this.provinceName + ' ' + this.cityName + ' ' + this.areaName 更安全，避免出现 “北京市 null 朝阳区” 这类异常。
联动选择器需同步更新对应字段
三级 <select></select> 或级联选择器（如 Element Plus 的 el-cascader）必须绑定并更新这三个字段：
- 省级
select改变时，清空cityId和areaId，重置市级列表 - 市级
select改变时，清空areaId，重置区级列表 - 每次变更后，计算属性会自动重新求值，视图立即更新
注意：如果使用 ID 查找名称（例如 provinces.find(p => p.code === this.provinceId)?.name），请确保查找逻辑放在 computed 内，或封装为另一个计算属性（如 provinceName），保证响应性。
补充：支持「仅选省」或「省+市」等不完整状态
业务中常允许用户只选到省级。拼接逻辑应尊重实际选择，而不是强制三级必填。可加个判断提示：
<p v-if="fullAddress">当前地址：{{ fullAddress }}</p>
<p v-else>请选择省市区</p>
若需提交时校验完整性，应在表单提交前单独判断 !this.provinceId || !this.cityId || !this.areaId，而非依赖 fullAddress 是否为空字符串。
