IVIEW 的 Render

 1                    render: (h, params) => {
                            let isconfirm = params.row.isconfirm;
                            if (!isconfirm) {
                                return h('span', {
                                    style: {
                                        color: 'red'
                                    }
                                }, "暂存");
                            } else {
                                return h('span', "生效");
                            }
                        }

2、新增/编辑/删除/

render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    on: {
                                        click: () => {
                                            this.handleEdit(params.row)
                                        }
                                    },
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                }, '编辑'),
                                h('Button', {
                                    on: {
                                        click: () => {
                                            this.modalDel = true,
                                                this.params = params
                                        }
                                    },
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                }, '删除')
                            ]); //end return
                        }

 

{
          title: "库存余量",
          align: "right",
          minWidth: 80,
          maxWidth: 120,
          key: "nowstock",
          render: (h, params) => {
            const row = params.row;
            const text = row.nowstock;
            return h("span", [
              h(
                "Tag",
                {
                  props: {},
                },
                text
              ),
              h(
                "Button",
                {
                  style: {
                    marginLeft: "5px",
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      let url = "pc/project/proj/invlocklist";
                      let datapara = {
                        params: {
                          invid: row.invid,
                        },
                      };
                      this.$http
                        .get(url, datapara)
                        .then((response) => {
                          let data = response.data;
                          if (data.errcode == "") {
                            this.ui.invLockData = data.data;
                          } else {
                            this.$Message.info(data.errmsg);
                          }
                          this.spinShow = false;
                          this.ui.modal = true;
                        })
                        .catch((err) => {
                          this.$Message.error(err);
                          this.spinShow = false;
                        });
                    },
                  },
                },
                "查看占用"
              ),
            ]);
          },
        }

　　悬浮 Poptip

参考地址：https://www.iviewui.com/components/table

{
                        title: 'Portrayal',
                        key: 'portrayal',
                        render: (h, params) => {
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    title: params.row.portrayal.length + 'portrayals',
                                    placement: 'bottom'
                                }
                            }, [
                                h('Tag', params.row.portrayal.length),
                                h('div', {
                                    slot: 'content'
                                }, [
                                    h('ul', this.tableData1[params.index].portrayal.map(item => {
                                        return h('li', {
                                            style: {
                                                textAlign: 'center',
                                                padding: '4px'
                                            }
                                        }, item)
                                    }))
                                ])
                            ]);
                        }
                    },

　　

换行和显示

            // let that = this;
            let rowTemp = params.row;
            let TempAllData = JSON.parse(JSON.stringify(rowTemp.billlcodelist));
            let tempRowDate = TempAllData.length > 6 ? TempAllData.size.splice(0, 6) : TempAllData;
            // 控制显示
            let state = TempAllData.length > 5 ? 'true' : 'fasle';
            return h('span',
              [
                tempRowDate.map((item, i) => {
                  // console.log(i + ":" + item.stateid);
                  const color = item.stateid == '4020' ? '#00FFFF' : '2d8cf0';
                  return h('Tag', {
                      props: {},
                      style: {
                        backgroundColor: color
                      }
                    },
                    item.billcode + '/' + item.statename)
                }),
                // if(state == 'true'){
                state == 'true' ? [h("div", ''),
                  h(
                    "Button", {
                      style: {
                        marginLeft: "5px",
                        marginRight: "5px",
                        wordBreak: 'break-all ',
                        color: 'red'
                      },
                      on: {
                        click: () => {
                          this.handleprocess(TempAllData);
                          // alert(JSON.parse(JSON.stringify(TempAllData)))
                        },
                      },
                    },
                    '查看更多'
                  )
                ] : ''
                // }
              ] //end DIV
            )