vue 中render函数使用方法

最新推荐文章于 2024-08-15 16:42:09 发布

猕猴桃-HR

最新推荐文章于 2024-08-15 16:42:09 发布

阅读量941

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45677987/article/details/113991854

版权

vue 专栏收录该内容

105 篇文章 2 订阅

订阅专栏

这篇博客介绍了Vue.js中render函数的使用方法，包括如何设置组件属性、样式及事件监听。示例展示了条件渲染、属性传递以及时间格式化的实现。同时，提供了编辑和删除操作的按钮组件，演示了如何在组件内触发相应的方法。

摘要由CSDN通过智能技术生成

render 函数使用方法：

              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                    ghost: true
                  },
                  style: {
                    marginRight: "xpx",
                    display: params.row.level != 5 ? "none" : "inline-block"
                  },
                  on: {
                    click: () => {
                      if (params.row.level == 5) {
                        this.editPropertys(params.row);
                      }
                    }
                  }
                },
                "属性"
              ),

注意： ghost为幽灵按钮。

三元表达式：

          render: (h, params) => {
            return h(
              "span",
              params.row.equipmentclass
                ? params.row.equipmentclass.description
                : ""
            );
          }

如果params.row.equirpmentclass 存在就会取后边的值，如果不存在就会取空值。

时间格式化操作：

          render: (h, params) => {
            return h("span", dayjs.formatDateTime(params.row.modifyedon));
          }

时间格式化年-月-日格式时-分-秒格式

        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                    ghost: true
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.xxxxx(params.row);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "确定要删除吗?",
                    type: "error",
                    size: "small"
                  },
                  on: {
                    "on-ok": () => {
                      this.xxxxxxx(params.row.code);
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        type: "error",
                        size: "small",
                        ghost: true
                      },
                      style: {
                        marginRight: "5px"
                      }
                    },
                    "删除"
                  )
                ]
              )
            ]);
          }
        }