用render渲染poptip,再往poptip裏面渲染內容

最新推荐文章于 2023-01-30 19:10:32 发布

sunny.day

最新推荐文章于 2023-01-30 19:10:32 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.csdn.net/yang__k/article/details/83649867

版权

js:

columns: [
                                  {
                                    title: "數據來源",
                                    key: "q",
                                    render: (h, params) => {
                                      return h("div", {}, [
                                        h(
                                          "poptip",
                                          {
                                            props: {
                                              placement: "bottom"
                                            },
                                            style: {
                                              cursor: "pointer",
                                              color: "#f00"
                                            }
                                          },
                                          [
                                            h('span',{},'添加數據'),
                                            h("div",
                                              {
                                                  slot: "content"
                                              },
                                              [
                                                h(
                                                  "checkboxGroup",
                                                  {
                                                    vModel: "checkboxValue",
                                                    on: {
                                                      "on-change": val => {
                                                        this.checkboxValue = val;
                                                        console.log(val,"111111111",this.checkboxValue);
                                                      }
                                                    }
                                                  },
                                                  [ 
                                                    h("checkbox", {
                                                      props: {
                                                        label: "人力總數"
                                                      },
                                                      style: {
                                                        display: "flex"
                                                      }
                                                    }),
                                                    h("checkbox", {
                                                      props: {
                                                        label: "新進人力"
                                                      },
                                                      style: {
                                                        display: "flex"
                                                      }
                                                    }),
                                                    h("checkbox", {
                                                      props: {
                                                        label: "流失人力"
                                                      },
                                                      style: {
                                                        display: "flex"
                                                      }
                                                    }),
                                                    h("checkbox", {
                                                      props: {
                                                        label: "出勤"
                                                      },
                                                      style: {
                                                        display: "flex"
                                                      }
                                                    }),
                                                    h("checkbox", {
                                                      props: {
                                                        label: "直接人力"
                                                      },
                                                      style: {
                                                        display: "flex"
                                                      }
                                                    }),
                                                    h("checkbox", {
                                                      props: {
                                                        label: "間接人力"
                                                      },
                                                      style: {
                                                        display: "flex"
                                                      }
                                                    })
                                                  ]
                                                )
                                              ]
                                            )
                                          ],
                                        )
                                      ]);
                                    }
                                  },

運行結果: