watch: { dataList(val) { let arr = JSON.parse(JSON.stringify(val)) arr.map((ele, index) => { this.saveRows.map((item) => { if (item.containerId && ele.containerId) { let arr1 = ele.containerId, arr2 = item.containerId let ifHas = arr1.every((a) => { return arr2.some((b) => a === b) }) //如果是在这个里面,那么就是true console.log(ifHas) //true if (ifHas) { this.$nextTick(() => { this.$refs.table.toggleRowSelection(this.dataList[index], true) }) } } }) }) if (this.cancelRows.length > 0) { arr.map((ele, index) => { this.cancelRows.map((item) => { if (item.containerId && ele.containerId) { let arr1 = ele.containerId, arr2 = item.containerId let ifHas = arr1.every((a) => { return arr2.some((b) => a === b) }) if (ifHas) { this.$nextTick(() => { this.$refs.table.toggleRowSelection( this.dataList[index], false, ) }) } } }) }) } },
时间: 2024-02-10 12:28:58 浏览: 85
这段代码是一个Vue组件的`watch`属性中的一个监听函数。它监听`dataList`属性的变化,并在值发生变化时执行一些操作。
首先,它将`val`的值深拷贝到`arr`数组中,以防止对原始值的修改。
然后,它使用`map`方法遍历`arr`数组中的每个元素,并在每个元素上执行一些操作。在这个操作中,它使用`this.saveRows`数组中的每个元素来与当前元素进行匹配。
如果当前元素和`this.saveRows`数组中的元素都有`containerId`属性,那么它会比较两个数组的`containerId`属性是否完全相同。如果完全相同,它会将当前元素添加到Vue组件中的一个表格组件的选中行中。
接着,它检查是否存在`this.cancelRows`数组中的元素,并与当前元素进行匹配。如果匹配成功,它会将当前元素从Vue组件中的表格组件的选中行中移除。
总之,这段代码的目的是根据特定的条件来更新Vue组件中的一个表格组件的选中行。
相关问题
改造这段代码 if (this.messageType) { this.buttonLoading = true; serviceztxsfx .diffPollutantLevelAnalysis(this.searchData) .then((res) => { console.log('res', res) this.echartsData = res; // 只有一年数据 if(!this.echartsData[1].dataList || this.echartsData[1].dataList.length < 1){ const list = JSON.parse( JSON.stringify( this.echartsData[0].dataList ) ); this.echartsData[0].dataList = this.echartsData[0].dataList.concat( list.map((val) => { val.value = 0; val.dataTime = val.dataTime.replace( this.echartsData[0].date ); return val; }) ); } else if ( this.echartsData[0].dataList.length < this.echartsData[1].dataList.length ) { // 如果最新年份没有数据 需要默认补全空数据 const list = JSON.parse( JSON.stringify( this.echartsData[1].dataList.slice( this.echartsData[0].dataList.length, this.echartsData[1].dataList.length ) ) ); this.echartsData[0].dataList = this.echartsData[0].dataList.concat( list.map((val) => { val.value = 0; val.dataTime = val.dataTime.replace( this.echartsData[1].date, this.echartsData[0].date ); return val; }) ); } this.drawingLine(); this.drawingBar(); this.buttonLoading = false; }) .catch((error) => { this.buttonLoading = false; }); }
这段代码是在判断一个叫做 "messageType" 的变量是否为真,如果为真则会进行一些操作。操作包括设置一个 "buttonLoading" 变量为 true,调用一个 "serviceztxsfx" 对象的 "diffPollutantLevelAnalysis" 方法并将 "searchData" 变量作为参数传入,然后在获取到 "then" 中的 "res" 结果之后设置一个 "echartsData" 变量为 "res" 的值。
然后在进行一些判断:如果 "echartsData" 数组的第二项的 "dataList" 属性为空或者 "dataList" 的长度小于 1,则将 "echartsData" 数组的第一项的 "dataList" 赋值给它。如果 "echartsData" 数组的第一项的 "dataList" 的长度小于 "echartsData" 数组的第二项的 "dataList" 的长度,则将 "echartsData" 数组的第二项的 "dataList" 中从 "echartsData" 数组的第一项的 "dataList" 的长度开始到 "dataList" 的长度结束的部分赋值给 "echartsData" 数组的第一项的 "dataList"。
最后,会调用两个名为 "drawingLine" 和 "drawingBar" 的方法,并将 "buttonLoading" 设置为 false。如果在调用 "serviceztxsfx" 对象的 "diffPollutantLevelAnalysis" 方法时发生了错误,则会在 "catch" 块中将 "buttonLoading" 设置为 false。
http.request('config/list', 'get', { page: 1, limit: 5 }, function(res) { if (res.data.list.length > 0) { let swiperList = []; res.data.list.forEach(element => { if (element.value != null) { swiperList.push({ img: http.baseurl+element.value }); } }); vue.swiperList = swiperList; vue.$nextTick(() => { carousel.render({ elem: '#test1', width: '100%', height: '420px', arrow: 'hover', anim: 'default', autoplay: 'true', interval: '3000', indicator: 'inside' }); }) // vue.$nextTick(()=>{ // window.xznSlide(); // }); } }); // 分页列表 pageList(); // 搜索按钮 jquery('#btn-search').click(function(e) { pageList(); }); function pageList() { var param = { page: 1, limit: limit } if (jquery('#bumenmingcheng').val()) { param['bumenmingcheng'] = jquery('#bumenmingcheng').val() ? '%' + jquery('#bumenmingcheng').val() + '%' : ''; } if (jquery('#bumenleixing').val()) { param['bumenleixing'] = jquery('#bumenleixing').val() ? '%' + jquery('#bumenleixing').val() + '%' : ''; } // 获取列表数据 http.request('bumenxinxi/list', 'get', param, function(res) { vue.dataList = res.data.list // 分页 laypage.render({ elem: 'pager', count: res.data.total, limit: limit, groups: 5, layout: ["prev","page","next"], theme: '#0099CC', jump: function(obj, first) { param.page = obj.curr; //首次不执行 if (!first) { http.request('bumenxinxi/list', 'get', param, function(res) { vue.dataList = res.data.list })
这段代码是一个使用 layui 和 http 模块实现的分页列表功能。首先使用 http 模块向后端发送请求,获取一些配置信息,其中包括轮播图的图片地址。然后使用 vue 实例中的数据项 swiperList 接收处理后的轮播图数据,并且使用 layui 的 carousel 模块渲染轮播图。接着,使用 jquery 监听搜索按钮的点击事件,并且调用 pageList 函数获取列表数据。pageList 函数中,首先根据搜索条件构造查询参数,再使用 http 模块向后端发送请求,获取列表数据,最后使用 vue 实例中的数据项 dataList 接收处理后的列表数据,并且使用 layui 的 laypage 模块渲染分页器。在分页器的回调函数中,根据当前页码重新发送请求,获取对应页码的列表数据,并且更新 dataList 数据项。
阅读全文