1.实现功能：

使用el-table，实现了行内编辑、新增、删除。集成了省市区三级级联选择器

2.效果预览：

3.实现思路

完整代码见文末，思路在代码注释处也有体现。

3.1定义表格并绑定表格数据

3.2行内编辑实现

在初始化数据 addressData时定义一个布尔数组addressEdit，长度与data数组相同，点击编辑和保存按钮更改布尔值，根据true、false在编辑和保存状态之间切换。

           for (let i in this.addressData) {
                 this.addressEdit[i] = false;    //初始化布尔数组   false：查看状态（非编辑状态）
               }

这里参照了el-table实现行内编辑功能并进行了一些改动。

3.3新增地址

点击新增按钮，向addressData数组中插入一个空对象，并设置新插入的行为编辑状态。

addAddress() {
        this.addressData.push({})
        this.addressEdit[this.addressData.length-1] = true
    }

3.4删除地址

利用Popconfirm 做一个提醒框

   deleteAddress(index){
        this.addressData.splice(index,1)
    },

3.4地址级联选择器实现

从json数据源选择到级联选择器组件封装，大佬已经都写好了，点击一起学习：Vue实现省市区级联选择器
下载下来的 pca-code.json数据节点是 code、name、children，而 Element 的级联选择器对应的数据是 value、label、children.
这里不用全局查找替换而是使用ElementPlus级联选择器中的props配置选项属性

 addressProps:{
        label: 'name',
        children: 'children',
        value: 'code'
      }
      //EP yyds

4.完整代码

在el-table中封装的组件有：el-input、el-cascader、el-checkbox、el-tag、el-popconfirm、el-button

<template>
  <div style="padding: 30px;">
    <el-card class="box-card;" shadow="always" style="width: 93%">
      <template #header>
        <div class="card-header" style="text-align: left">
          <span>管理地址</span>
          <el-button class="button" type="text" @click="addAddress">新增</el-button>
        </div>
        <el-table
            :data="addressData"
            style="width: 100%">
          <el-table-column type="index"></el-table-column>
          <el-table-column
              prop="adname"
              label="收货人"
              width="100">
            <template #default="scope">
              <el-input size="medium" v-model="scope.row.adname" v-if="addressEdit[scope.$index]"></el-input>
              <span v-else>{{scope.row.adname}}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="adphone"
              label="联系方式"
              width="140">
            <template #default="scope">
              <el-input size="medium" v-model="scope.row.adphone" v-if="addressEdit[scope.$index]"></el-input>
              <span v-else>{{scope.row.adphone}}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="adpca"
              label="收货地址"
              width="240"
              align="center"
          >
            <template #default="scope">
              <el-cascader
                  v-model="scope.row.adpca"
                  :options="pcaOptions"
                  :props="addressProps"
                  placeholder="请选择"
                  @change="handleAddressNode"
                  filterable
                  :disabled="!addressEdit[scope.$index]"
              ></el-cascader>
            </template>
          </el-table-column>
          <el-table-column
              prop="addetail"
              label="详细地址"
              width="180">
            <template #default="scope">
              <el-input size="medium" v-model="scope.row.addetail" v-if="addressEdit[scope.$index]"></el-input>
              <span v-else>{{scope.row.addetail}}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="adisdefault"
              label="默认地址"
              width="100">
            <template #default="scope">
              <div v-if="addressEdit[scope.$index]">
                <el-checkbox
                    v-model= scope.row.adisdefault
                    :true-label = "1"
                    :false-label = "0"
                    @change="changetest"

                >
                  设为默认
                </el-checkbox>
              </div>
              <div v-else>
                 <el-tag  v-if="scope.row.adisdefault==1" type="success" size="mini" >默认</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              align="center"
              width="180"
          >
            <template #default="scope">
              <el-button
                  size="small"
                  icon="el-icon-edit"
                  v-if="!addressEdit[scope.$index]"
                  @click="editAddress(scope.$index)"
              >编辑
              </el-button>
              <el-button
                  size="small"
                  icon="el-icon-check"
                  v-else
                  @click="saveAddress(scope.$index, scope.row)"
              >保存
              </el-button>
              <el-popconfirm
                  confirmButtonText='好的'
                  cancelButtonText='不用了'
                  icon="el-icon-info"
                  title="确定删除该地址？"
                  @confirm="deleteAddress(scope.$index, scope.row)"
              >
                <template #reference>
                  <el-button
                      size="small"
                      icon="el-icon-delete"
                  >删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>

        </el-table>
      </template>
    </el-card>

  </div>
</template>

<script>
import {request} from "@/network/request";
import {ElMessage} from "element-plus";
const pca = require('@/assets/adress/pca-code.json')

export default {
  name: "Address",
  data() {
    return {
      addressData: [], //table绑定表格数据
      addressEdit: [], //用于动态修改行内数据
      addressInput: {
        adname: '',
        adphone: '',
        adpca: '',
        addetail: '',
        adisdefault: 0 ,
      },
      pcaOptions:pca,
      addressProps:{
        label: 'name',
        children: 'children',
        value: 'code'
      }
    }
  },
  created() {
    this.loadAddressData()
  },
  methods: {
    loadAddressData() {
         request；  //此处axios 请求获取数据
        for (let i in this.addressData) {
          this.addressEdit[i] = false;      //3.2 初始化布尔数组   false：查看状态（非编辑状态）
        }
    },
    addAddress() {
        this.addressData.push({})      //3.3 新增地址
        this.addressEdit[this.addressData.length-1] = true
    },
    editAddress(index){
        this.addressEdit[index] = !this.addressEdit[index]
    },
    saveAddress(index,value)
    {
      this.addressEdit[index] = !this.addressEdit[index]
    },
    deleteAddress(index,value){
        this.addressData.splice(index,1)
    },
    handleAddressNode(value){    //value为数组
      this.addressData.adpca = value[2]   //三级级联地址，只需要把第三级存入数据库即可
    },
    changetest(val){
      console.log(typeof (val))
      console.log(val)
    }

  }
}
</script>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

---

努力，进取，奋斗！