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

最新推荐文章于 2024-01-18 18:27:03 发布
最新推荐文章于 2024-01-18 18:27:03 发布
阅读量1.8k 收藏 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
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2 render列表里面用Poptip,并且循环出数据
weixin_47239395的博客
05-17 270
需求: 在一个table列表里面,其中有一列如果有数据就可以点击,点击就出现Poptip, 展示数组里面的key:value。
iview中使用render函数渲染poptip，poptip使用插槽插入组件，简单实现组件渲染
qq_42797577的博客
04-23 3698
iview的table中使用render函数可以渲染iview中的各种插件， 如气泡提示等功能，如果继续使用render渲染dom，会提高代码的复杂度。所以可以直接使用插槽，把组件独立出来。 首先熟悉render的格式 render: (h, params) => { return h('Poptip', { class: 'xxx', props: { place...
iview在render函数中添加Poptip提示
浩星
01-21 2380
前言： 在使用iview的table的时候删除一般为了防止误删，我们会用 poptip 气泡提示来进行操作二次限制，这里使用iview的table的render函数渲染直接加入 效果图： 实现代码： 具体功能代码： //加上气泡 h('Poptip', { prop...
Vue+iview在render函数中添加Poptip提示操作
WYc的博客
06-05 3303
前言：在项目中用到的表格插件中，在最后一栏的‘操作’中我设置了‘编辑’和‘删除’按钮，那么在选择某条数据删除的时候不仅要检查是否选中，提示是否删除还是很有必要的 1.没加Poptip之前是这样写的： { title: '操作', key: 'action', width: 150, align: ...
iviewui 中表格 Table的render函数在操作栏加上Poptip 气泡提示
最新发布
weixin_61895123的博客
01-18 618
业务中需要给iview表格中的操作栏按钮加上一个气泡提示框
iView-UI：Poptip中渲染多行i-table时弹出位置出错
ZTao-z的博客
11-26 847
问题 使用iViewUI的Poptip时，在Poptip内渲染超过两行的i-table时，会出现迷之错误：采用hover方式唤起Poptip时，鼠标第一次移上去时Poptip的弹出位置会出现较大偏移，第二次移上去的时候就好了。至今不知道Bug在哪 解决方案 用HTML的table标签手动生成所需要的表格 // myPoptip <template> <Poptip trigg...
使用layui 渲染table数据表格的实例代码
10-18
在本文中，我们将深入探讨如何使用layui框架来渲染数据表格，这在Web开发中是一种常见的需求，特别是在展示大量结构化数据时。layui是一款流行的前端组件库，提供了丰富的UI组件，包括表格、表单、按钮等。下面我们...
layui使用表格渲染获取行数据的例子
01-19
在render中增加字段： done: function (res, curr, count) { // $('.x-body').find('.layui-table-body').find(table).find(tbody).children(tr).on('click', function () { // var id = JSON.stringify($('.x-...
如何在 ant 的table中实现图片的渲染操作
01-18
在使用react 的蚂蚁金服的ui库的时候，，平时用到的比较比较多的就是table组件，但是在ant官网上面，并没有在后台调取接口获取数据后，，如何将后台的http://lkjlkjlkj.jpg图片渲染到每一行的例子。。只有一个render...
iview表格render中使用Poptip提示
彳亍的博客
10-08 915
render: (h, params) => { return h("div", [ h( "span", { style: { fontWeight: "bold" ...
在iview table表格中使用 poptip 并自定义内容展示
wxl_小白的博客
10-24 3979
1. 有时候总有一些特殊需求, 需要在表格内容展示做文章 1. 在项目中遇到要再表格里添加一些特殊展示如下图 2. 这就需要使用render函数,对表格内容做一些展示修改 1) 首先我们需要对poptip做一个内容的定制 大致如下 <template> <div> <Poptip popper-class="dark" v-if="poptipSh...
iview table组件自定义表格背景色
hello world
09-10 2178
table用来展示表格数据很方便，当我们想要将某一行或者某一列或者是某一格的背景色改变，下面是官方的方法 行：通过属性row-class-name可以给某一行指定一个样式名称。 列：通过给列 columns 设置字段className可以给某一列指定一个样式。 单元格：通过给数据 data 设置字段cellClassName可以给任意一个单元格指定样式 行和列的设置比较简单，可...
iview 在Table组件中使用Poptip组件且按钮样式正常展示
ANDYSKYER的专栏
04-18 5188
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 4697
效果ivew的Table中使用render添加图片poptip冒泡方法 { title: '操作', key: 'action', width: 120, align: 'center', render: (h, params) => { if(params.row.status ==0){
iview 表格中表头及单元格显示Poptip气泡提示方法
weixin_43983960的博客
11-15 3054
在iview项目中需要使用表格的一些气泡提示，在iview的文档中，提供了重写表头的renderHeader方法，但是没有实现的步骤方法和案例，实际做起来还是麻烦，左后还是整出来。 现在记录分享一下。 效果图： 一，表头显示气泡具体方法： 1，在vue组件中定义一个iview表格 <Table :columns="newColumns" :data="data"></Table> 2，在data中定义一个数组对象，选取了iview定义表头的标准格式，用于渲染表格的表头信息，实现效
iview table中使用Poptip
此去经年
07-13 5810
h('Poptip', { props: { confirm: true, ...
vue render 嵌套 iview Poptip 及on-ok事件
加加加菲猫
01-11 6498
columns4: [ { title: '操作', key: 'action', width: 150, align: 'center', render: (h, params) =&gt; { return h('div', [ h('Button', { props: { t...
i-view表格鼠标移入移出Poptip气泡提示被遮挡
你离优秀差多少
09-16 492
客户提出的需求真是五花八门！要在表格当前行悬浮出现表格，客户重点提出不能点击，嗯哼！剁了吧！ 想了很久，首先我看到这个需求我第一想法是不太可行，如果当前行鼠标移入移出会影响后面操作的按钮无法点击，并付诸行动，的确如此，因此向客户说明，并改成其中一列鼠标移入移出显示隐藏 代码如下： <Table ref="table" :height='tableHeight' stripe :loading="loading1" :columns="table1_title" :data="table1_data"
vue中用table_vue 用render函数渲染table
08-25
### 回答1： 在 Vue 中使用 `table_vue` 并通过 `render` 函数渲染表格，可以按照以下步骤进行操作： 1. 安装 `table_vue`： ```bash npm install table_vue --save ``` 2. 在组件中引入 `table_vue` 和 `render` 函数： ```javascript import { Table, TableColumn } from 'table_vue'; ``` 3. 在 `render` 函数中使用 `Table` 和 `TableColumn` 组件来渲染表格： ```javascript render() { return ( <div> <Table data={this.tableData}> <TableColumn prop="name" label="Name" /> <TableColumn prop="age" label="Age" /> <TableColumn prop="gender" label="Gender" /> </Table> </div> ); } ``` 在上述代码中，`Table` 组件通过 `data` 属性接受表格数据，`TableColumn` 组件通过 `prop` 和 `label` 属性分别指定数据字段和列名。 4. 最后，在组件中导出 `render` 函数： ```javascript export default { name: 'MyTable', data() { return { tableData: [ { name: 'John', age: 20, gender: 'Male' }, { name: 'Mary', age: 25, gender: 'Female' }, { name: 'Tom', age: 30, gender: 'Male' }, ], }; }, render() { // ... }, }; ``` 在上述代码中，`tableData` 是表格数据，可以通过 `data` 属性传递给 `Table` 组件。 ### 回答2： 在Vue中，可以使用`v-table`组件和render函数来渲染table。 首先，需要在Vue组件中导入`Vue`和`v-table`组件。可以在项目的入口文件或需要使用table的组件中引入。 ``` import Vue from 'vue' import VTable from 'v-table' Vue.use(VTable) ``` 然后，在模板中使用`v-table`组件来渲染table。可以设置表格的列和数据。 ``` <template> <v-table :columns="columns" :data="data"></v-table> </template> ``` 在Vue组件的data属性中定义表格的列和数据。 ``` export default { data() { return { columns: [ { title: '姓名', key: 'name' }, { title: '年龄', key: 'age' }, { title: '性别', key: 'gender' } ], data: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 22, gender: '女' }, { name: '王五', age: 25, gender: '男' } ] } } } ``` 最后，使用render函数渲染`v-table`组件。可以将模板中的`<v-table>`替换为`<div>`，然后在render函数中返回渲染的内容。 ``` export default { render(h) { return h('div', [ h(VTable, { props: { columns: this.columns, data: this.data } }) ]) } } ``` 通过上述步骤，就可以使用render函数渲染table。在表格中展示指定的列和数据，实现表格的渲染和展示。 ### 回答3： 在Vue中使用`table_vue`组件，可以使用render函数来渲染table。 首先，需要在Vue组件中导入`table_vue`组件。可以使用以下代码进行导入： ```javascript import table_vue from './table_vue.vue'; ``` 然后，在Vue组件的`render`函数中，使用`h`函数来创建`table_vue`组件的实例并渲染。可以使用以下代码示例： ```javascript render: function(h){ return h(table_vue); } ``` 在这个示例中，`h`函数接受一个组件选项对象或者组件构造函数作为参数，并返回一个VNode节点。通过调用`h(table_vue)`，`table_vue`组件会被实例化，并返回一个VNode节点用于渲染。 最后，将这个渲染函数添加到Vue组件的`render`选项中，即可在页面中渲染`table_vue`组件。 需要注意的是，使用render函数渲染组件时，是无法直接使用`template`属性的，需要使用`render`函数来动态生成DOM结构。这种方式更加灵活，可以根据需要动态创建组件和组件间的关系。 以上是使用render函数来渲染`table_vue`组件的方法。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值