vue + iview 组件的渲染

一、iview 在Table组件中使用Poptip组件

 colKey: [
     {
    title: '产品图',
    key: 'pic',
    sortable: true,
    render: function(h, param){
        return h('div', [
            h('Button', [
                h('Poptip', {
                    props: {
                        confirm: true,
                        title: '确定要删除吗！',
                        type: 'error',
                        size: 'small'
                    },
                    on: {
                        'on-ok': ()=>{
                            this.$Message.info('点击了确定')
                        },
                        'on-cancel': ()=>{
                            this.$Message.info('点击了确定')
                        }
                    }
                }, '删除')
            ])
        ]);
    }
  ]

二、poptip中渲染table

render: (h, params) => {
            let column = [
              {
                title: "游戏",
                key: "name"
              },
              {
                title: "占成",
                key: "rate"
              }
            ];
            let data = [];
            let gameList = params.row.gameList;
            let len = gameList.length;
            for (let item of gameList) {
              let obj = {};
              obj.rate = item.rate + "%";
              obj.name = item.name;
              data.push(obj);
            }
            return h(
              "Poptip",
              {
                props: {
                  trigger: "hover"
                }
              },
              [
                h(
                  "span",
                  {
                    style: {
                      cursor: "pointer",
                      color: "#20a0ff"
                    }
                  },
                  len + "款游戏"
                ),
                h("Table", {
                  props: {
                    columns: column,
                    data: data,
                    border: true,
                    size: "small",
                    width: 250
                  },
                  slot: "content"
                })
              ]
            );
          }

3.实现效果：表格表头中含有icon，鼠标移入icon,有文字提示

{
            title: '本月充值金额（元）',
            key: 'money',
            renderHeader: h => {
              return h('div', [
                h('Tooltip', {
                  props: {
                    content: '已去除折扣、当月充值退款金额，未去除本月之前充值在本月退款、转出的金额'
                  },
                  style: { marginRight: '5px', cursor: 'pointer' }
                }, ['',
                  h('Icon', {
                    props: { type: 'ios-information-outline', slot: 'content', size: '20' }
                  })]),
                h('span', '本月充值金额（元）')
              ]);
            }
          }

4.表格内部，某一列的内容可以编辑

点击编辑icon，input框显示，里面内容为当前列内容；
点击对勾icon,进行保存；点击叉号icon，恢复原始值。

{
            title: '备注',
            className: 'editCell',
            render: (h, params) => {
              /* eslint max-len: 0 */
              const remark = params.row.remark;
              return h('div', {}, [
                h('span', {
                  style: {display: this.currentRowIndex === params.index ? 'none' : 'inline-block', marginRight: '4px'}
                }, remark),
                h('input', {
                  attrs: { value: remark, class: 'special-input' },
                  style: {
                    width: '86px', height: '32px', display: this.currentRowIndex === params.index ? 'inline-block' : 'none', marginRight: '4px'
                  }
                }),
                h('i', {
                  attrs: { class: 'ivu-icon ivu-icon-edit' },
                  style: { display: this.currentRowIndex === params.index ? 'none' : 'inline-block', cursor: 'pointer' },
                  on: {
                    click: () => {
                      this.currentRowIndex = params.index; // this.currentRowIndex: 记录当前操作行的index
                    }
                  }
                }),
                h('i', {
                  attrs: { class: 'ivu-icon ivu-icon-checkmark' },
                  style: {
                    display: this.currentRowIndex === params.index ? 'inline-block' : 'none', cursor: 'pointer', marginRight: '4px'
                  },
                  on: {
                    click: e => {
                      const siblingEles = e.target.parentNode.children;
                      let newRemark = '';
                      /* eslint no-plusplus: 0 */
                      for (let i = 0; i < siblingEles.length; i++) {
                        if (siblingEles[i].tagName === 'INPUT') newRemark = siblingEles[i].value;
                      }
                      this._changeInvoiceRemark(newRemark, params.row.id);
                    }
                  }
                }),
                h('i', {
                  attrs: { class: 'ivu-icon ivu-icon-close' },
                  style: { display: this.currentRowIndex === params.index ? 'inline-block' : 'none', cursor: 'pointer' },
                  on: {
                    click: e => {
                      const siblingEles = e.target.parentNode.children;
                      for (let i = 0; i < siblingEles.length; i++) {
                        if (siblingEles[i].tagName === 'INPUT') siblingEles[i].value = remark;
                      }
                      this.currentRowIndex = null; // 清空索引
                    }
                  }
                })
              ]);
            }
          }
          }