dataV组件使用——数据更新更新组件

于 2024-08-15 17:54:32 发布
阅读量67 收藏 1
点赞数 4
分类专栏： dataV echarts 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43848576/article/details/141228345
版权

bug 当数据更新只更新一个属性页面不会刷新（this.config1.data = arr;）
必须重新赋值整个config

image.png

方式一：检测到数据更新重新赋值config

 this.config1 = {
      data: arr,
      header: ["所在单位", "人员姓名", "职位", "联系方式", "人员状态"],
      align: ["center", "center", "center", "center", "center"],
      columnWidth: [150],
      rowNum: 7,
      evenRowBGC: "rgba(33, 78, 133,.5)",
      oddRowBGC: "transparent",
      headerBGC: "",
      waitTime: 1000,
      headerHeight: "45",
 };

方式二：同理使用es6语法

this.config1.data = arr;
this.config1={...this.config1}

<template>
  <dv-scroll-board
    :config="
      type == 1 ? config1 : type == 2 ? config2 : type == 3 ? config3 : config4
    "
    ref="scrollBoard"
    class="w100 h100"
  />
</template>
<script>
export default {
  props: ["list", "type"],
  watch: {
    list: {
      handler(val) {
        // console.log("watch监听", val, this.type, 777777);
        if (val) {
          if (this.type == 1) {
            let arr = val.map((el) => {
              return [
                el.deptName,
                el.personName,
                el.postName,
                el.phoneNumber,
                `<span class="${
                  el.memberTypeName == "在岗"
                    ? "green1"
                    : el.memberTypeName == "培训" || el.memberTypeName == "出差"
                    ? "red1"
                    : el.memberTypeName == "休假" || el.memberTypeName == "轮休"
                    ? "yellow1"
                    : "blue1"
                }">${el.memberTypeName}</span>`,
              ];
            });
            // ☆☆☆☆☆ bug 当数据更新只更新一个属性页面不会刷新（this.config1.data = arr;）
            // 必须重新赋值整个config
            /**
             * 方式一 ：
             * this.config1.data = arr;
             * this.config1={...this.config1}
             */
            /**
             * 方式二 ： 如下重新写一遍
             */
            /**
             * 方式三： 直接在html中绑定对象就会监听到
             */
            this.config1 = {
              data: arr,
              header: ["所在单位", "人员姓名", "职位", "联系方式", "人员状态"],
              align: ["center", "center", "center", "center", "center"],
              columnWidth: [150],
              rowNum: 7,
              evenRowBGC: "rgba(33, 78, 133,.5)",
              oddRowBGC: "transparent",
              headerBGC: "",
              waitTime: 1000,
              headerHeight: "45",
            };
            // console.log("config1", arr, this.config1);
            // this.$refs["scrollBoard"].updateRows(arr, 0);
          } else if (this.type == 2) {
            let arr = val.map((el) => {
              return [
                el.deptName,
                el.carName,
                el.carTypeName,
                el.carNumber,
                `<span class="${
                  el.carStatusName == "正常"
                    ? "green1"
                    : el.carStatusName == "维修"
                    ? "red1"
                    : "blue1"
                }">${el.carStatusName}</span>`,
              ];
            });
            // this.config2.data = arr;
            this.config2 = {
              data: arr,
              header: [
                "所在单位",
                "车辆名称",
                "车辆属性",
                "车牌号",
                "车辆状态",
              ],
              align: ["center", "center", "center", "center", "center"],
              columnWidth: [150],
              rowNum: 7,
              evenRowBGC: "rgba(33, 78, 133,.5)",
              oddRowBGC: "transparent",
              headerBGC: "",
              waitTime: 1000,
              headerHeight: "45",
            };
            // console.log("config2", arr, this.config2);
            // this.$refs["scrollBoard"].updateRows(arr, 0);
          } else if (this.type == 3) {
            let arr = val.map((el) => {
              return [
                el.dutyTypeName,
                el.userName,
                el.workPhoneNumber,
                el.mobilePhoneNumber,
                el.virtualNumber,
              ];
            });
            // this.config2.data = arr;
            this.config3 = {
              data: arr,
              header: ["值班类型", "姓名", "工作电话", "联系电话", "虚拟号"],
              align: ["center", "center", "center", "center", "center"],
              columnWidth: [100, , , ,],
              rowNum: 4,
              evenRowBGC: "rgba(33, 78, 133,.5)",
              oddRowBGC: "transparent",
              headerBGC: "",
              waitTime: 1000,
              headerHeight: "35",
            };
            // console.log("config3", arr, this.config3);
            // this.$refs["scrollBoard"].updateRows(arr, 0);
          } else if (this.type == 4) {
            let arr = val.map((el) => {
              return [el.dutyDeptName, el.userName, el.mobilePhoneNumber];
            });
            // this.config2.data = arr;
            this.config4 = {
              data: arr,
              header: ["值班类型", "值班人员", "联系电话"],
              align: ["center", "center", "center"],
              columnWidth: [150, 150, ,],
              rowNum: 7,
              evenRowBGC: "rgba(33, 78, 133,.5)",
              oddRowBGC: "transparent",
              headerBGC: "",
              waitTime: 3000,
              headerHeight: "45",
            };
            // console.log("config3", arr, this.config3);
            // this.$refs["scrollBoard"].updateRows(arr, 0);
          }
        }
      },
      // 这里是关键，代表递归监听的变化
      deep: true,
      // immediate: true,
    },
  },
  data() {
    return {
      config1: {
        header: ["所在单位", "人员姓名", "职位", "联系方式", "人员状态"],
        data: [],
        align: ["center", "center", "center", "center", "center"],
        columnWidth: [150],
        rowNum: 7,
        evenRowBGC: "rgba(33, 78, 133,.5)",
        oddRowBGC: "transparent",
        headerBGC: "",
        waitTime: 1000,
        headerHeight: "45",
      },
      config2: {
        header: ["所在单位", "车辆名称", "车辆属性", "车牌号", "车辆状态"],
        data: [],
        align: ["center", "center", "center", "center", "center"],
        columnWidth: [150],
        rowNum: 7,
        evenRowBGC: "rgba(33, 78, 133,.5)",
        oddRowBGC: "transparent",
        headerBGC: "",
        waitTime: 1000,
        headerHeight: "45",
      },
      config3: {
        header: ["值班类型", "姓名", "工作电话", "联系电话", "虚拟号"],
        data: [],
        align: ["center", "center", "center", "center", "center"],
        // columnWidth: [150],
        rowNum: 4,
        evenRowBGC: "rgba(33, 78, 133,.5)",
        oddRowBGC: "transparent",
        headerBGC: "",
        waitTime: 1000,
        headerHeight: "35",
      },
      config4: {
        header: ["值班类型", "值班人员", "联系电话"],
        data: [],
        align: ["center", "center", "center"],
        // columnWidth: [150],
        rowNum: 7,
        evenRowBGC: "rgba(33, 78, 133,.5)",
        oddRowBGC: "transparent",
        headerBGC: "",
        waitTime: 1000,
        headerHeight: "35",
      },
    };
  },

  mounted() {},
  // 销毁定时器
  beforeDestroy() {},

  methods: {},
};
</script>
<style lang="scss" scoped>
@import "../components/css/rem.scss";

::v-deep.dv-scroll-board .header .header-item {
  // color: #f39800;
  // color: cyan;
  color: #6fddc2;
  font-weight: 700;
}

::v-deep.dv-scroll-board.solo .rows {
  border: 1px solid rgba(0, 238, 255, 0.123);
}

::v-deep.dv-scroll-board .green1,
::v-deep.dv-scroll-board .red1,
::v-deep.dv-scroll-board .yellow1,
::v-deep.dv-scroll-board .blue1 {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
}

::v-deep.dv-scroll-board .green1 {
  border: 1px solid cyan;
  background: rgba(0, 255, 255, 0.2);
}

::v-deep.dv-scroll-board .red1 {
  border: 1px solid rgb(250, 13, 84);
  background: rgba(250, 13, 84, 0.2);
}

::v-deep.dv-scroll-board .blue1 {
  border: 1px solid rgb(0, 89, 255);
  background: rgba(0, 89, 255, 0.2);
}

::v-deep.dv-scroll-board .yellow1 {
  border: 1px solid rgb(250, 213, 2);
  background: rgba(250, 213, 2, 0.2);
}
</style>

方法三：直接在html中绑定对象,数据变化会自动更新页面

image.png

 <dv-water-level-pond style="width: 0.65rem; height: 0.65rem"
   :config="{
      data: [res.currentLevel],
      waveNum: 1,
      waveHeight: 10,
      waveOpacity: 0.5,
      shape: 'round',
      colors: ['#fff', '#ff3300']
  }" 
/>
小曲曲
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue组件定制——动态查询规则生成组件
网尘的技术专栏
05-25 7180
1. 动态查询规则 动态查询规则，大致如下图所示。是可以按照用户的自定义进行组织查询语句的一种复杂组件，大致可以实现SQL查询的where条件，下面是摘自mongodb的某一软件。 2.组件构建思路 按照规则组件的组织形式，可以把其视为一棵树，有树干和树叶，这样看起来就不难了。 2.1 组件属性 data： 是树结构的内容，我们定义为： { condition: 'AND', rules: [], } fieldList: 字段列表数组,可供选择的字段集合； operatorList: 操作列表数
微信小程序自定义组件——数据监听器
m0_61631823的博客
04-01 3114
1.概念：数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下： Component({ observers: { '字段A,字段B':function(字段A的新值,字段B的新值){ // 要进行的操作 } }, }) 2.用法：以一个简单的加法为例 首先我们在组件UI中这样定义： &
ECharts数据可视化——组件使用大全
发现问题，面对问题，分析问题，解决问题，总结问题
03-22 3979
文章目录（一）标题title（三）工具栏toolbox功能案例（四）图例legend（五）时间轴timeline（六）数据区域缩放dataZoom（七）网格grid（八）坐标轴（九）数据系列series（十）全局字体样式textStyle （一）标题title 文档地址 https://echarts.apache.org/zh/option.html#title 常用属性 text：主标题文本，支持用\n换行。 subtext：副标题文本，支持用\n换行。 left：与容器左侧的距离，其取值可以是具体像素
VUE 同一个组件切换 实现DOM更新
qq_37237495的博客
11-13 1710
VUE 同一个组件切换 实现DOM更新 在使用vue.js开发时遇到共用一个组件，数据相同，只是展示的内容不同。但是在每次切换时，必须执行DOM更新。 如果你遇到这个问题时，可以试试在切换时 使用 v-if 来判断，官方文档中说是: v-if “真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做—...
VUE——父组件获取子组件的数据
BoReFrontEnd的博客
03-14 1080
refs访问组件实例 父组件是行为主体，父组件主动获取子组件数据 子组件通过方法公开只读数据 代码实例 // ParentComponent.vue &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div&amp;amp;gt; &amp;amp;lt;ChildComponent ref=&amp;quot;child&amp;quot;&amp;amp;gt;&amp;amp
Vue——组件高级——传值
qq_52301431的博客
09-07 2109
子组件通过自定义事件给父组件传count的新值n，父组件收到新值后修改自己的data，自然就会刷新自己 和子组件的模板子组件通过调用父组件的方法给父组件传值:子组件的自定义事件中,用$emit触发事件调用父组件方法给父组件传值 (重点)**因为通过属性传值是单向的**,有时候我们需要子组件的data 数据需要交给父组件使用:通过在子组件上定义自定义事件，在子组件中通过$emit 来触发事件；子组件的事件被触发并传参，事件处理函数可以接收到子组件的数据；
Vue组件化|通用组件开发——Notification通知组件
热门推荐
小酒屋
07-15 1万+
1. 基础组件编写 1.1 组件目录结构 1.2 组件文件代码 <template> <transition name="fade"> <div class="notification" :style="style"> <span class="content">{{content}}</span> ...
利用v-model实现父子组件传值——子父组件同步更新
张静的博客
11-20 8404
v-model介绍 v-model 是Vue的一个很大的特色，可以实现双向数据绑定。v-model本质上是语法糖，它负责监听用户的输入事件以更新数据。 v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件： text 和 textarea 使用 value 属性和 input 事件； checkbox 和 radio 使用 checked 属性和 change 事件； select 字段将 value 作为 prop 并将 change 作为事件。 如何巧妙利用 v-model实现父子组
vue组件封装——公用基础table组件
h_jQuery的博客
12-05 3558
vue公用基础表格组件封装案例
组件传递数据——props（父传子）
weixin_46372993的博客
08-03 5187
props的用法（1）Parent组件：< template > < h3 > {{ message }} < Child /> //3、显示Child组件内容 < script > import Child from './Child.vue';//1、导入Child组件 export default {data() {return {Child } //2、注入Child组件 }
Vuejs 组件——props数据传递的实例代码
10-20
使用props传递静态数据时，可以直接在自定义元素上声明属性，并将值作为字符串写在父组件中。这种方式下，父组件中定义的属性值会传递给子组件，并覆盖子组件template中的同名属性。 ```html <add btn="h"></add>...
小程序——自定义组件.rar
10-18
本压缩包"小程序——自定义组件.rar"可能包含了一系列关于如何创建、使用和优化自定义组件的教程、示例代码和相关资源。 首先，自定义组件的创建是通过继承微信小程序提供的`Component`对象来实现的。开发者需要在`...
Vue异步组件使用详解
08-30
Vue.js 是一款流行的前端框架，它提供了一种强大的特性——异步组件，使得开发者能够按需加载组件，提高应用的性能。异步组件是Vue.js中优化应用加载速度的重要手段，尤其是在大型项目中，能够显著减少初始加载时间...
大数据精通组件——Atlas元数据管理部署等
08-09
【大数据精通组件——Atlas元数据管理部署】 Atlas是Apache Hadoop生态系统中的一个关键组件，专门用于元数据管理和治理。它提供了全面的数据发现、分类、标签和安全策略实施功能，是大数据环境中数据治理的重要...
微信小程序自定义波浪组件使用方法详解
10-16
首先，我们来看组件的核心部分——`wave.wxml`。在这个文件中，定义了组件的结构。`<view class="zr">`是整个组件的容器，设置了背景颜色和相对定位。`<view class='user_box'>`包含了用户信息，如头像和昵称，这...
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 592
ASP.NET Core Web API 使用Autofac框架
略记一次抓取内容后解密及登录的经历
深蓝浅蓝的天
08-09 1051
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 428
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
最新发布
epitomizelu的专栏
08-13 605
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
Vue 爬坑之路（二）—— 组件之间的数据传递
05-26
好的，来谈谈 Vue 组件之间的数据传递。 1. 父组件向子组件传递数据 父组件可以通过 props 将数据传递给子组件，子组件通过 props 接收数据。 父组件： ``` <template> <div> <child-component :message="msg"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent' export default { components: { ChildComponent }, data () { return { msg: 'hello' } } } </script> ``` 子组件： ``` <template> <div>{{ message }}</div> </template> <script> export default { props: ['message'] } </script> ``` 2. 子组件向父组件传递数据 子组件可以通过 $emit 触发事件并传递数据，父组件通过 v-on 监听事件并接收数据。 子组件： ``` <template> <div> <button @click="sendMessage">发送消息</button> </div> </template> <script> export default { methods: { sendMessage () { this.$emit('send-message', 'hello') } } } </script> ``` 父组件： ``` <template> <div> <child-component @send-message="getMessage"></child-component> <div>{{ receivedMessage }}</div> </div> </template> <script> import ChildComponent from './ChildComponent' export default { components: { ChildComponent }, data () { return { receivedMessage: '' } }, methods: { getMessage (message) { this.receivedMessage = message } } } </script> ``` 以上就是 Vue 组件之间的数据传递方式，希望能对你有帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小曲曲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值