Vue3+ElementPlus 电商管理系统 |
您所在的位置：网站首页 › 收货地址设计怎么写 › Vue3+ElementPlus 电商管理系统 |
Vue3+ElementPlus 电商管理系统
|
1.实现功能：
使用el-table，实现了行内编辑、新增、删除。集成了省市区三级级联选择器 2.效果预览：
完整代码见文末，思路在代码注释处也有体现。 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 做一个提醒框 从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 管理地址 新增 {{scope.row.adname}} {{scope.row.adphone}} {{scope.row.addetail}} 设为默认 默认 编辑 保存 删除 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) } } } .card-header { display: flex; justify-content: space-between; align-items: center; }努力，进取，奋斗！ |
【本文地址】