render函数的简单应用

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

brantykl

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

阅读量352

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/brantykl/article/details/124438683

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文档展示了如何在 Vue 中使用 render 函数创建一个表格，其中姓名列可以切换显示为文本或输入框。当点击输入框时，会触发编辑模式，允许用户修改文本，并在失去焦点时保存更改。例子中详细解释了 `h()` 函数的用法，包括 createElement、相关属性和子节点。此外，还实现了文本和输入框之间的单点切换功能。

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

1.vue的render函数有h()参数,而h()参数又有三个参数,分别是createElement,createElement的相关属性,子节点

export default {
  data() {
    return {
      columns1: [
        {
          title: "姓名",
          key: "name",
          render: (h, params) => {
            let self = this;
            return h("div", [
              h(
                //createElement
                "p",
                //相关属性
                {
                  props: {
                    type: "text",
                    size: "small",
                    name: self.data1[params.index].name,
                    placeholder: self.data1[params.index].name
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      console.log(self.data1[params.index].edit);
                    }
                  }
                },
                //子节点
                self.data1[params.index].name
              )
            ]);
          }
        }
      ]
    };
  }
};

．　1)createElement(必选),可选类型:HTML 标签、组件、异步组件、函数式组件
．　2)相关属性:object,class,style,attrs,domProps,除了这些还有修饰符,事件,监听事件
．　3)子节点:相对于createElement下的子节点,包括文本或组件

2.实现文本和输入框的单点切换

<template>
  <div>
    <tablesIView :columns1="columns1" :data1="data1" />
  </div>
</template>

<script>
import tablesIView from "@/components/tabTest/TablesIView";

export default {
  name: "tabTest",
  data() {
    return {
      data1: [
        {
          name: "王小明",
          age: 18,
          address: "北京市朝阳区芍药居",
          edit: true,
          class: "aaa"
        },
        {
          name: "张小刚",
          age: 25,
          address: "北京市海淀区西二旗",
          edit: true
        },
      ],

      columns1: [
        {
          title: "姓名",
          key: "name",
          render: (h, params) => {
            let self = this;

            if (!self.data1[params.index].edit) {
              return h("div", [
                h("Input", {
                  props: {
                    type: "text",
                    size: "small",
                    focus: true,
                    name: self.data1[params.index].name,
                    value: self.data1[params.index].name
                  },
                  attrs: {
                    // ref: 'no',
                    id: "aaa"
                  },
                  on: {
                    "on-change": () => {
                      console.log("aaa");
                    },
                    "on-blur": event => {
                      //获取焦点

                      self.data1[params.index].name = event.target.value;
                      self.data1[params.index].edit = true;
                    }
                  }
                })
              ]);
            }

            if (self.data1[params.index].edit) {
              return h("div", [
                h(
                  "p",
                  {
                    props: {
                      type: "text",
                      size: "small",
                      name: self.data1[params.index].name,
                      placeholder: self.data1[params.index].name
                    },
                    style: {
                      marginRight: "5px",

                      width: "300px",
                      height: "18px"
                    },
                    on: {
                      click: () => {
                        console.log(self.data1[params.index].edit);
                        setTimeout(() => {
                          this.$nextTick(() => {
                            document
                              .getElementsByName(
                                self.data1[params.index].name
                              )[0]
                              .focus();
                          });
                        }, 300);
                        self.data1[params.index].edit = false;
                      }
                    }
                  },
                  self.data1[params.index].name
                )
              ]);
            }
          }
        }
      ]
    };
  },
  components: {
    tablesIView
  }
};
</script>