Vue监听以及一些数据的处理操作 |
您所在的位置：网站首页 › js监听dom宽度变化 › Vue监听以及一些数据的处理操作 |
Vue监听以及一些数据的处理操作
|
当判断某个表格里面的数据某一项发生变化时，其他联动的数据也会发生联动等操作。我们就可以通过监听去处理。 建议弹框前面的checkbox勾选项不要用el-table自带的属性去操作，不易友好。 js部分 watch: { productList: { handler(val) { if (val && val.length > 0) { const flag = val.some((v) => v.refundNum > v.productNum) if (flag) { this.$message({ showClose: true, message: '退款数量不可大于购买数量', type: 'error' }) this.disabledButton = true return } let sum = 0 for (var i in val) { if (val[i].refundNum && val[i].checked) { sum += val[i].refundNum * val[i].productPrice } } this.disabledButton = false this.totalPrice = (sum / 100).toFixed(2) } }, deep: true, immediate: true } },后端没有给我们想要的数据时我们可以进行处理成自己想要的格式进而去渲染，建议数组的方法连这写，可以简化代码量 例如如下代码： back(row) { this.dialogVisible = true this.backList = row const { productList } = this.backList this.productList = productList .filter((v) => v.productNum !== v.refundNum) .map((v) => { return { ...v, productNum: v.productNum - v.refundNum, refundNum: null, checked: false } }) },在使用Vue2时，接收后端返回的数据时建议进行类型检测，所以在这些直接使用后台接口返回值的地方，最好添加类型检测。 例如：
不积跬步,无以至千里;不积小流,无以成江海 |
【本文地址】
今日新闻 |
推荐新闻 |