要重新渲染数据

最新推荐文章于 2024-05-14 16:58:55 发布
最新推荐文章于 2024-05-14 16:58:55 发布
阅读量655 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43000233/article/details/89642397
版权 
var _this = this
    _this.setData({
      goodsId: e.currentTarget.dataset.goodsId,
      coverImg: e.currentTarget.dataset.coverImg,
      goodsName: e.currentTarget.dataset.goodsName,
      specList: e.currentTarget.dataset.specList
    })
    let specList = e.currentTarget.dataset.specList
    var choosedSpecId = [];
    var specName = [];
    for (let i = 0; i < specList.length; i++) {
      specList[i].spec_items[0].isSelect = true
      for (let j = 0; j < specList[i].spec_items.length; j++) {
        if (j == 0) {
          choosedSpecId.push(specList[i].spec_items[j].id);
          specName.push(specList[i].spec_items[j].item)
        }
      }
    };

    _this.setData({
      choosedSpecId: choosedSpecId,
      specName: specName,
    })错误

因为没有重新渲染数据，数据出不来

var _this = this
    _this.setData({
      goodsId: e.currentTarget.dataset.goodsId,
      coverImg: e.currentTarget.dataset.coverImg,
      goodsName: e.currentTarget.dataset.goodsName,
      specList: e.currentTarget.dataset.specList
    })
    let specList = e.currentTarget.dataset.specList
    var choosedSpecId = [];
    var specName = [];
    for (let i = 0; i < specList.length; i++) {
      specList[i].spec_items[0].isSelect = true
      for (let j = 0; j < specList[i].spec_items.length; j++) {
        if (j == 0) {
          choosedSpecId.push(specList[i].spec_items[j].id);
          specName.push(specList[i].spec_items[j].item)
        }
      }
    };

    _this.setData({
      choosedSpecId: choosedSpecId,
      specName: specName,
      specList:specList
    })
IT废大叔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目里面使用jsmind.js插件来制作思维导图页面完成需求
weixin_50158618的博客
08-23 1万+
vue项目使用jsmind来实现web的思维树图功能页面。
vue使用jsMind（思维导图）
肖晗的博客
07-31 1万+
jsMind是一个显示/编辑思维导图的纯javascript类库，其基于html5的canvas进行设计。我们使用它可能需要在网页上单纯的使用这种图样的效果，而其他交互却是自定义的，我这边选择的是jsMind与网上的一个（右键菜单）。jsmind.menu.js中寻找到定义menu的地方，增加custom自定义属性注自定义的东西肯定需要自定义一个类型或者唯一性的key，让代码知道我点击的是哪一个，所以还需要处理点击事件。寻找对应点击事件与.在里面增加key属性。即和。...
数据更新后，页面不重新渲染
weixin_49230250的博客
08-18 3463
在vue中 更改数组和对对象 但是页面不重新渲染 在这个确实已经更改数据成功了 但是vue没有重新渲染页面，好像没监听到数据改变一样 这时候最粗鲁的做法是在更改数据之后强行触发vue重新渲染页面 this.$forceUpdate(); 对象操作未渲染 <div id="box"> <h2> {{obj.name}}--{{obj.age}} </h2> <button @click="butClick">切换</bu
JSMInd实现动态思维导图的保存和展示
weixin_42074606的博客
11-10 2749
JSMInd实现动态思维导图的保存和展示 前言：最近公司要求java微服务架构中某一个页面做成动态表格的形式，可以手动增加列这种，但是领导希望能够做成思维导图更好，也是能够实时的动态添加数据，保存数据，查看数据。其他同事做列转行，我进行调研，最终选择JSMind插件实现。 第一步： 新建springboot项目，引入对应的js文件jsmind.js、jsmind.draggable.js、jsmind.css、jquery-3.5.1.min.js。引入依赖（根据自己需求取舍，我这将项目里的都拿过来了）
jsMind更新视图
最新发布
qq_46544185的博客
05-14 264
1.获取当前视图对象，如果未创建就new 一个 jsMind。2.已创建，就更新data,用当前的jm对象show()方法。jsMind重新渲染视图。
动态加载JS
guangzhengyu的专栏
07-08 258
function loadJS() { //获得的DOM对象 var _doc = document.getElementsByTagName("head")[0]; //创建一个标签并设置其属性 var script = document.createElement("script"); script.setAttribute("type", "text/javascript");
ListView实现下拉动态渲染数据
08-30
在渲染数据时，我们需要使用 setData 函数来处理要渲染的数据，例如： ``` setData(){ let num = this.page * this.pageSize; if(num > this.len) num = this.len; let data = []; for(let i=0;i;i++){ data....
解决echarts数据二次渲染不成功的问题
10-15
// 请求成功后，更新数据并重新渲染图表 this.e2data1 = list.map((value) => value.count); this.e2data2 = list.map((value) => value.saleMonth); // 使用notMerge参数，确保数据被完全替换 myChart2....
vue2.0重新渲染数据三种方法
04-30
下面我们将详细讨论三种在Vue2.0中重新渲染数据的方法。 1. **使用Vue提供的数组方法** Vue提供了变异数组方法，如`push()`, `pop()`, `shift()`, `unshift()`, `splice()`, `sort()` 和 `reverse()`。这些方法会...
使用Vue调取接口,并渲染数据的示例代码
10-16
今天小编就为大家分享一篇使用Vue调取接口,并渲染数据的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中实现先请求数据再渲染dom分享
08-27
下面小编就为大家分享一篇vue中实现先请求数据再渲染dom分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
算法天天练——java实现单链表的增删操作（模拟实现MyLinkedList）
weixin_42924812的博客
11-23 292
文章目录1、定义Node节点2、实现add、remove、get等方法。 1、定义Node节点 public class Node { Object obj;//对象 Node previous;//前一个节点 Node next;//下一个节点 public Node() { } public Node(Node previous, Objec...
一篇文章带你了解jsMind
qq_59463562的博客
05-06 1万+
jsMind 是一个显示/编辑思维导图的纯 javascript 类库，其基于 html5 的 canvas 进行设计。jsMind 以 BSD 协议开源，在此基础上你可以在你的项目上任意使用。 jsMind is a pure javascript library for mindmap, it base on html5 canvas. jsMind was released under BSD license, you can embed it in any project, if only you
[JSMind]使用JSMind操作生成的思维导图
weixin_43303530的博客
09-04 4728
var data = eval('${data}'); $.each(data,function(i, list) { var ls = eval(list); var nodeid = jsMind.util.uuid.newid(); var topic = ls[0].yzname; var parent_node = jm.get_root(); var node = jm.add_node(parent_node, nodeid, topic); jm.set_node_color(n
js 强制刷新数据
Ahuuua的博客
01-19 1829
this.$set data中数据，都是响应式；。也就是说，如果操作data中的数据，视图会实时更新； 但在实际开发中，遇到过一个坑：若data中数据类型较为复杂，方法methods中改变对象的属性，视图也就是页面并不会改变 原因是vue监听不到数据类型特别复杂的属性。 可以使用this.$set()来进行强制更新，进而解决问题 对象操作： 　三个参数：this.$set("改变的对象"，"改变的对象属性"，"值") 数组操作： 　三个参数：this.$set("数组"，"下标"，"...
【Code】Js-mind插件中会使用到的一个递归拼装数据格式的函数
Rookie_Shawn
03-29 1351
js-mind插件的文字框在点击后可以跳转链接，这个函数就是为了拼装链接的。<?php /** * 递归填充Jsmind数据格式 * @param array $arrTemp 需要处理的数组 * @param array $arrOption 配置参数
在vue中使用jsmind组织架构或思维导图
热门推荐
风如也的博客
06-16 1万+
在项目中遇到组织架构或思维导图的需求，选的技术是 jsmind 官方文档给的示例，有需要的可以参考：示例 先来看看效果图： 尝试了两种类型：第一张截图是普通菜单类型，第二张截图可以进行右键菜单操作。最终选用了普通菜单类型。 jsmind 可以导入 jm 文件并渲染出来，也可以对编辑后的文件进行保存，也可以下载编辑好的思维导图，可以展开指定层级节点，修改主题，以及对节点进行增删改查等操作。 演示： 接下来如何使用： 安装 npm i jsmind // 或者 yarn add jsmind 普通菜单代
jsMind思维导图模式数据展示
枫叶轻翔的博客
05-30 6261
效果图: 后端代码，此处以C#编写的后台，Java或其他语言同理 using Newtonsoft.Json; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Web; using System.Web.M...
数据改变重新渲染table
08-09
### 回答1： 如果想要数据改变后重新渲染table，你可以使用JavaScript来实现。 一种方法是在数据改变后手动更新table的内容，例如： ``` var table = document.getElementById("myTable"); table.innerHTML = ""; // 清空table内容 for (var i = 0; i < newData.length; i++) { var row = table.insertRow(-1); for (var j = 0; j < newData[i].length; j++) { var cell = row.insertCell(-1); cell.innerHTML = newData[i][j]; } } ``` 另一种方法是使用一些框架或库，如React，Vue，Angular等，它们可以自动管理界面的渲染，并在数据改变时重新渲染table。 例如，使用React，你可以这样写： ``` class Table extends React.Component { render() { return ( <table> <tbody> {this.props.data.map((row, i) => ( <tr key={i}> {row.map((cell, j) => ( <td key={j}>{cell}</td> ))} </tr> ))} </tbody> </table> ); } } ``` 然后，你可以在需要重新渲染table时，更新组件的props： ``` ReactDOM.render(<Table data={newData} />, document.getElementById("root")); ``` ### 回答2： 当数据发生改变时，需要重新渲染table，主要有以下几个步骤： 1. 获取最新的数据：首先，需要获取最新的数据，可以通过后台接口或者其他数据源来获取。例如，可以通过发送AJAX请求获取最新的数据。 2. 清空旧的table内容：在重新渲染table之前，需要先清空旧的table内容，以便后续重新填充新的数据。可以通过JavaScript操作，找到table元素，并将其内容清空。 3. 构建新的table结构：接下来，需要根据最新的数据构建新的table结构。可以通过JavaScript动态创建table、tr和td等元素，并将最新的数据绑定到对应的位置。 4. 填充新的数据：将最新的数据逐行逐列填充到新创建的table中。可以使用循环遍历数据，并使用JavaScript的appendChild方法将对应的数据添加到新创建的tr中。 5. 将新的table渲染到页面：将新创建的table渲染到页面中，使用户可以看到最新的数据。可以通过将新创建的table元素插入到页面中指定的位置，或者更新已有的table元素。 通过以上步骤，当数据发生改变时，可以重新渲染table，使得用户可以及时地看到最新的数据。在实际开发中，可以根据具体的需求和技术栈选择适合的方法和工具来实现数据的重新渲染。 ### 回答3： 当数据发生改变时，重新渲染table是一个常见的需求。通常情况下，我们可以通过以下步骤来实现这个功能。 首先，我们需要将数据与table进行绑定。这可以通过将数据存储在一个数组或者对象中来实现。然后，我们可以使用循环语句（如for循环或者forEach函数）遍历数据，并在每次循环中使用innerHTML或者createElement等方法来动态创建table的行和列。 接下来，当数据发生改变时，我们需要更新table以显示最新的数据。这可以通过在数据变化的地方，即数据发生改变的函数或者事件处理函数中，调用重新渲染table的函数来实现。这个函数会先清空table的内容，然后重新根据最新的数据，调用相同的循环语句来创建或更新table的行和列。 在每次重新渲染table时，我们还可以根据数据的类型和需求，添加一些样式、条件判断或者其他操作。这可以通过在创建或更新table的行和列时，给元素添加class属性、设置样式等来实现。 最后，通过这种方式，当数据发生改变时，table会自动重新渲染，以显示最新的数据。这样，我们就可以方便地更新table，使其与数据保持同步。 需要注意的是，当数据量较大时，频繁地重新渲染table可能会降低性能。在这种情况下，可以考虑使用虚拟渲染等技术，以提高渲染效率。同时，我们也可以通过分页、滚动加载等方式，减少一次性渲染大量数据的压力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值