避免网站侵权,php网站开发多线程开发,服务公司商标,mcmore商城网站开发目录
一、定义常变量
1.1、ref和reactive到底用谁#xff1f;
二、双向绑定
2.1、直接改变表格该行数据
2.1、在弹窗改变表格该行数据 一、定义常变量
1.1、ref和reactive到底用谁#xff1f;
已知#xff1a;使用ref定义基础类型数据#xff1b;使用reactive定义复…目录
一、定义常变量
1.1、ref和reactive到底用谁
二、双向绑定
2.1、直接改变表格该行数据
2.1、在弹窗改变表格该行数据 一、定义常变量
1.1、ref和reactive到底用谁
已知使用ref定义基础类型数据使用reactive定义复杂对象或数组
const items reactivestring[]([]);const updateItems () {//以下都会报错 items is constantitems []items res.data.items
}; 报错原因 reactive的常量不能直接重新赋值可以通过修改数组内容来更新数据。 解决方法
(1)、替换数组中的所有元素 items.length 0; // 清空数组items.splice(0, items.length); // 清空数组Object.assign(items, []); //创建一个新的数组并赋值给 itemsitems.push(...res.data.items)
(2)、ref 支持重新赋值
const items refstring[]([]);const updateItems () {items.value []; // 重新赋值整个数组
}
备注
如果是对象除非用ref否则只能这样逐个赋值且用 let 进行定义。 for (let key in res.data) {editForm[key] res.data[key];}
二、双向绑定
2.1、直接改变表格该行数据 el-table height100% border classmt20 sizelarge v-loadingpager.loading :datatableDatael-table-column label工厂 propfactoryCode header-aligncenter aligncenter show-overflow-tooltip /el-table-column label设计记录sku propsku width200 header-aligncenter aligncentershow-overflow-tooltip /el-table-column label格式 propsc_img_type show-overflow-tooltip header-aligncenter aligncentertemplate #default{ row }el-tag v-ifrow.sc_img_type 1JPG/el-tagel-tag v-ifrow.sc_img_type 2SVG/el-tagel-tag v-ifrow.sc_img_type 3TIFF/el-tag/template/el-table-columnel-table-column label创建时间 width180 propcreate_time show-overflow-tooltip header-aligncenteraligncenter/el-table-columnel-table-column label操作 show-overflow-tooltip header-aligncenter aligncentertemplate #default{ row }el-button typeprimary clickupdateRow(row)编辑/el-button/template/el-table-column
/el-table
script langts setup
const updateRow (row) {row.factoryCode 改变工厂名称;
};
/script
updateRow(row) {row.name 改变后的名称; // 修改传入的 row 对象
} 总结 因为 tableData 是响应式的Vue3 会把它内部的每一项即 row都变成响应式对象。当你修改其中的属性时Vue3 会通过代理Proxy检测到这个属性的变化并更新 DOM。 因为row 是响应式对象访问/修改 row.nameVue2 会触发getter或setter从而通知视图更新。Vue 2 的响应式系统是基于 Object.defineProperty 实现的它会使得对象的每个属性都变成 getter 和 setter从而实现双向绑定。 2.1、在弹窗改变表格该行数据 表格数据显示在弹窗内时要注意
script langts setup// 用reactive定义
let form reactive({factoryCode: ,sku: ,
});
const updateRow (row) {form row;form JSON.parse(JSON.stringify(row));// 逐个赋值【数据过多用for...in...】,上面两种都不对form.factoryCode row.factoryCode;form.sku row.sku;form.factoryCode 改变它;//弹窗里会变表格不会dialogFormVisible.value true;
};// 用ref定义
let form ref({factoryCode: ,sku: ,
});
const updateRow (row) {form.value row;dialogFormVisible.value true;
};
/script 通过 form.factoryCode 修改数据时它并没有直接修改 tableData中的对应数据项而只是更新了 form 中的数据。如果你希望 tableData中的某个项随着 form 的改变而自动反映更新需要做显式的修改【后端接口更新/自己改变tableData】。 但是在vue2里却是可以直接改变的。 methods: {handleSelectionChange(val) {this.multipleSelection valthis.multipleSelection[0].name 改变后的名称002 //这里一变tableData也会变},updateRow(row) {this.form rowthis.form.name 改变后的名称 //这里一变row就会变tableData也会变this.dialogFormVisible true}} 如果你不想修改 row 对象本身而只想在 this.form 上进行修改 this.form { ...row } // 使用展开运算符创建 row 的浅拷贝 this.form Object.assign({}, row) // 使用 Object.assign 创建 row 的浅拷贝 总结 vue2this.form row 这样的赋值操作,让它俩指向的是同一个内存地址所以一变全都变 vue3form.value row这里的form 是一个响应式引用而row只是一个普通的对象form 和 row是不同的引用修改form.value并不会直接影响 row非要一起变只能Object.assign(form, tableData[index]); ......待更新
