在render渲染poptip,在poptip裏面渲染table,数据用颜色区分

最新推荐文章于 2024-07-16 11:34:18 发布
最新推荐文章于 2024-07-16 11:34:18 发布
阅读量1.9k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang__k/article/details/82809873
版权

js:

1.整理数据的方法:

// 整理數據
        clean_data(val, val2) {
          this.poptop_data = [];
          let df = [];
          df.push("加載中...");
          this.popData.push(df);
          let k = this;
          this.detail_position_download(val, val2, function(arr) {
            setTimeout(function() {
              k.popData.splice(0);
              for (let i = 0; i < arr.length; i++) {
                k.popData.push(arr[i]);
              }
            }, 250);
          });
        },

2.加载数据

 // 具體崗位信息
        detail_position_download(line, type, callback) {
          $.ajax({
            type: "GET",
            dataType: "JSON",
            url:
              APP.URL.getUrl("empManage.detail") +
              line +
              "/" +
              type +
              APP.URL.test1,
            success: function(json) {
              if (json.rv == 200) {
                var data = json.data;
                var arr = [];
                let arr0 = [];
                arr0[0] = {value:"崗位"};
                let arr1 = [];
                arr1[0] = {value:"計劃"};
                let arr2 = [];
                arr2[0] = {value:"實際"};
                let arr3 = [];
                arr3[0] = {value:"標配"};
                let arr4 = [];
                let arr5 = [];
               // 加上颜色判断
                for (let i = 1; i <= data.length; i++) {

                  if(data[i - 1].p_ttl < data[i - 1].s_ttl){
                            arr4.push("#f00")
                  }else if(data[i - 1].p_ttl > data[i - 1].s_ttl){
                            arr4.push ("#00f")
                  }else{
                            arr4.push ("#000")
                  }
                  if(data[i - 1].r_ttl < data[i - 1].s_ttl){
                            arr5.push("#f00")
                  }else if(data[i - 1].r_ttl > data[i - 1].s_ttl){
                            arr5.push("#00f")
                  }else{
                            arr5.push("#000")
                  }
                  arr0[i] = {value:data[i - 1].post};
                  arr1[i] = {value:data[i - 1].p_ttl,color:arr4[i-1]};
                  arr2[i] = {value:data[i - 1].r_ttl,color:arr5[i-1]};
                  arr3[i] = {value:data[i - 1].s_ttl}
                }
                arr.push(arr0);
                arr.push(arr3);
                arr.push(arr1);
                arr.push(arr2);
              }
              callback(arr);
            }
          });
        },

3.在render里渲染

 {
                  title: "IDL2",
                  align: "center",
                  width: 120,
                  render: (h, params) => {
                    return h(
                      "poptip",
                      {
                        props: {
                          trigger: "hover",
                          placement: "right-start",
                          content: this.popData,
                          width: 300,
                          wordWrap: true
                        },
                        on: {
                          "on-popper-show": () => {
                            this.popData.splice(0);
                            this.clean_data(params.row.line_code, "IDL2");
                          }
                        }
                      },
                      [
                        h(
                          "div",
                          {
                            attrs: {
                              class: "idl2"
                            },
                            style: {
                              cursor: "pointer"
                            },
                            on: {
                              click: () => {
                                let k = this;
                                this.tab_model = "name5";
                                this.display(this.idl2);
                                this.tab_data(params, "idl2");
                                this.yy = "c5";
                                setTimeout(function() {
                                  k.dynamicCreated(k.idl2);
                                }, 200);
                              }
                            }
                          },
                          this.setColorByData(
                            h,
                            params.row.std.idl2,
                            params.row.plan.idl2,
                            params.row.real.idl2
                          )
                        ),
                        h(
                          "div",
                          {
                            slot: "content"
                          },
                          [
                            //表格型
                            h(
                              "table",
                              {
                                style: {
                                  textAlign: "center",
                                  margin: "0 auto"
                                }
                              },
                              this.popData.map(item => {
                                return h(
                                  "td",
                                  {
                                    style: {
                                      // textAlign: 'center',
                                      padding: "10px",
                                      background: "#fff",
                                      border: "0px"
                                    }
                                  },
                                  item.map(items => {
                                    return h(
                                      "tr",
                                      {
                                        style: {
                                          textAlign: "center",
                                          padding: "14px",
                                          height: "auto",
                                          background: "#fff",
                                          border: "0px",
                                          color: items.color  // 取出颜色
                                        }
                                      },
                                      items.value   // 取出值
                                    );
                                  })
                                );
                              })
                            )
                          ]
                        )
                      ]
                    );
                  }
                }
              ]
            },
setColorByData: function(h, std_val, plan_val, real_val) {
          if (plan_val > std_val) {
            if (real_val < std_val) {
              return [
                h("span", {}, this.alignment(std_val)),
                h("span", {}, " / "),
                h(
                  "span",
                  {
                    style: {
                      color: "#00f"
                    }
                  },
                  this.alignment(plan_val)
                ),
                h("span", {}, " / "),
                h(
                  "span",
                  {
                    style: {
                      color: "#f00"
                    }
                  },
                  this.alignment(real_val)
                )
              ];
            } else if (real_val > std_val) {
              return [
                h("span", {}, this.alignment(std_val)),
                h("span", {}, " / "),
                h(
                  "span",
                  {
                    style: {
                      color: "#00f"
                    }
                  },
                  this.alignment(plan_val)
                ),
                h("span", {}, " / "),
                h(
                  "span",
                  {
                    style: {
                      color: "#00f"
                    }
                  },
                  this.alignment(real_val)
                )
              ];
            } else {
              return [
                h("span", {}, this.alignment(std_val)),
                h("span", {}, " / "),
                h(
                  "span",
                  {
                    style: {
                      color: "#00f"
                    }
                  },
                  this.alignment(plan_val)
                ),
                h("span", {}, " / "),
                h("span", {}, this.alignment(real_val))
              ];
            }
          } else if (plan_val < std_val) {
            if (real_val < std_val) {
              return [
                h("span", {}, this.alignment(std_val)),
                h("span", {}, " / "),
                h(
                  "span",
                  {
                    style: {
                      color: "#f00"
                    }
                  },
                  this.alignment(plan_val)
                ),
                h("span", {}, " / "),
                h(
                  "span",
                  {
                    style: {
                      color: "#f00"
                    }
                  },
                  this.alignment(real_val)
                )
              ];
            } else if (real_val > std_val) {
              return [
                h("span", {}, this.alignment(std_val)),
                h("span", {}, " / "),
                h(
                  "span",
                  {
                    style: {
                      color: "#f00"
                    }
                  },
                  this.alignment(plan_val)
                ),
                h("span", {}, " / "),
                h(
                  "span",
                  {
                    style: {
                      color: "#00f"
                    }
                  },
                  this.alignment(real_val)
                )
              ];
            } else {
              return [
                h("span", {}, this.alignment(std_val)),
                h("span", {}, " / "),
                h(
                  "span",
                  {
                    style: {
                      color: "#f00"
                    }
                  },
                  this.alignment(plan_val)
                ),
                h("span", {}, " / "),
                h("span", {}, this.alignment(real_val))
              ];
            }
          } else {
            if (real_val > std_val) {
              return [
                h("span", {}, this.alignment(std_val)),
                h("span", {}, " / "),
                h("span", {}, this.alignment(plan_val)),
                h("span", {}, " / "),
                h(
                  "span",
                  {
                    style: {
                      color: "#00f"
                    }
                  },
                  this.alignment(real_val)
                )
              ];
            } else if (real_val < std_val) {
              return [
                h("span", {}, this.alignment(std_val)),
                h("span", {}, " / "),
                h("span", {}, this.alignment(plan_val)),
                h("span", {}, " / "),
                h(
                  "span",
                  {
                    style: {
                      color: "#f00"
                    }
                  },
                  this.alignment(real_val)
                )
              ];
            } else {
              return [
                h("span", {}, this.alignment(std_val)),
                h("span", {}, " / "),
                h("span", {}, this.alignment(plan_val)),
                h("span", {}, " / "),
                h("span", {}, this.alignment(real_val))
              ];
            }
          }
        },

运行结果:

sunny.day
关注
layui循环数据并渲染_使用layui渲染table数据表格（实例）
weixin_34672536的博客
01-14 3451
table 模块是layui框架最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载(比如搜索、条件筛选等)，支持复选框，支持分页，支持单元格编辑等等一些列功能。尽管如此，我们仍将对其进行完善，在控制代码量和性能的前提下，不定期增加更...
iview中使用render函数渲染poptip，poptip使用插槽插入组件，简单实现组件渲染
qq_42797577的博客
04-23 3731
iview的table中使用render函数可以渲染iview中的各种插件， 如气泡提示等功能，如果继续使用render渲染dom，会提高代码的复杂度。所以可以直接使用插槽，把组件独立出来。 首先熟悉render的格式 render: (h, params) => { return h('Poptip', { class: 'xxx', props: { place...
vue2 render列表里面用Poptip,并且循环出数据
weixin_47239395的博客
05-17 303
需求: 在一个table列表里面,其中有一列如果有数据就可以点击,点击就出现Poptip, 展示数组里面的key:value。
Vue 渲染函数（render）的使用方法及使用场景总结
最新发布
weixin_51080551的博客
07-16 2142
vue 渲染函数
iview在render函数中添加Poptip提示
浩星
01-21 2427
前言： 在使用iview的table的时候删除一般为了防止误删，我们会用 poptip 气泡提示来进行操作二次限制，这里使用iview的table的render函数渲染直接加入 效果图： 实现代码： 具体功能代码： //加上气泡 h('Poptip', { prop...
Vue+iview在render函数中添加Poptip提示操作
WYc的博客
06-05 3345
前言：在项目中用到的表格插件中，在最后一栏的‘操作’中我设置了‘编辑’和‘删除’按钮，那么在选择某条数据删除的时候不仅要检查是否选中，提示是否删除还是很有必要的 1.没加Poptip之前是这样写的： { title: '操作', key: 'action', width: 150, align: ...
iviewui 中表格 Table的render函数在操作栏加上Poptip 气泡提示
weixin_61895123的博客
01-18 654
业务中需要给iview表格中的操作栏按钮加上一个气泡提示框
使用layui 渲染table数据表格的实例代码
10-18
在本文中，我们将深入探讨如何使用layui框架来渲染数据表格，这在Web开发中是一种常见的需求，特别是在展示大量结构化数据时。layui是一款流行的前端组件库，提供了丰富的UI组件，包括表格、表单、按钮等。下面我们...
layui数据表格 table.render 报错的解决方法
10-16
Layui是一个基于jQuery的前端UI框架，它提供了一套轻量级的...通过上述知识点的详细阐述，希望能帮助开发者在使用layui数据表格table.render时遇到报错问题，提供有效的解决思路和方法，从而提升开发效率和产品质量。
layui框架table 数据表格的方法级渲染详解
10-18
Layui的table组件在渲染时需要使用到`table.render`方法，这是Layui table模块的核心API。我们可以在JavaScript中调用此方法来渲染表格，并且可以传递多个参数来定制表格的行为。`table.render`方法的基本语法如下：...
iView-UI：Poptip中渲染多行i-table时弹出位置出错
ZTao-z的博客
11-26 856
问题 使用iViewUI的Poptip时，在Poptip内渲染超过两行的i-table时，会出现迷之错误：采用hover方式唤起Poptip时，鼠标第一次移上去时Poptip的弹出位置会出现较大偏移，第二次移上去的时候就好了。至今不知道Bug在哪 解决方案 用HTML的table标签手动生成所需要的表格 // myPoptip <template> <Poptip trigg...
iview表格render中使用Poptip提示
彳亍的博客
10-08 923
render: (h, params) => { return h("div", [ h( "span", { style: { fontWeight: "bold" ...
在iview table表格中使用 poptip 并自定义内容展示
wxl_小白的博客
10-24 4056
1. 有时候总有一些特殊需求, 需要在表格内容展示做文章 1. 在项目中遇到要再表格里添加一些特殊展示如下图 2. 这就需要使用render函数,对表格内容做一些展示修改 1) 首先我们需要对poptip做一个内容的定制 大致如下 <template> <div> <Poptip popper-class="dark" v-if="poptipSh...
iview table组件自定义表格背景色
hello world
09-10 2200
table用来展示表格数据很方便，当我们想要将某一行或者某一列或者是某一格的背景色改变，下面是官方的方法 行：通过属性row-class-name可以给某一行指定一个样式名称。 列：通过给列 columns 设置字段className可以给某一列指定一个样式。 单元格：通过给数据 data 设置字段cellClassName可以给任意一个单元格指定样式 行和列的设置比较简单，可...
iview 表格中表头及单元格显示Poptip气泡提示方法
weixin_43983960的博客
11-15 3137
在iview项目中需要使用表格的一些气泡提示，在iview的文档中，提供了重写表头的renderHeader方法，但是没有实现的步骤方法和案例，实际做起来还是麻烦，左后还是整出来。 现在记录分享一下。 效果图： 一，表头显示气泡具体方法： 1，在vue组件中定义一个iview表格 <Table :columns="newColumns" :data="data"></Table> 2，在data中定义一个数组对象，选取了iview定义表头的标准格式，用于渲染表格的表头信息，实现效
iView-UI：表格中使用Poptip，Poptip中再嵌套表格
ZTao-z的博客
11-19 1704
问题 最近遇到一个需求，需要对表格里的一个统计项展示它的统计细节，于是想到用Poptip包含需要展示的细节，这些细节再用一个表格去展示。于是乎就给自己挖了这么绕口的一个坑。 解决方案 <template> <div> <i-table :columns="columns0" :data="rowData" border></i-table&gt...
iview 在Table组件中使用Poptip组件且按钮样式正常展示
ANDYSKYER的专栏
04-18 5196
h('Poptip', { props: { confirm: true, title: '确定要删除吗！' }, on: { 'on-ok': function(){ console.log('you clicked ok.'); }, 'on-cancel': fun...
ivew的Table中使用render添加图片poptip冒泡方法
qq625633312的博客
12-19 4701
效果ivew的Table中使用render添加图片poptip冒泡方法 { title: '操作', key: 'action', width: 120, align: 'center', render: (h, params) => { if(params.row.status ==0){
iview table中使用Poptip
此去经年
07-13 5826
h('Poptip', { props: { confirm: true, ...
vue中用table_vue 用render函数渲染table
08-25
在Vue中使用`table_vue`组件，可以使用render函数来渲染table。 首先，需要在Vue组件中导入`table_vue`组件。可以使用以下代码进行导入： ```javascript import table_vue from './table_vue.vue'; ``` 然后，在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值