vue 用render函数渲染table

这里项目安装了 iview 插件作为演示文档，这里安装，我就不介绍了

1，什么是 render 函数？

1，render 函数 跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数。

2，当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h

2，语法：render(createElement){ return createElement('标签名'，'执行的操作'，'展示的内容') }

createElement() 有三个参数:
第一个参数，必选，为 HTML 标签或组件或函数；
第二个参数，可选，为数据对象，标签属性等；
第三个参数，可选，该标签内容或子节点；如果没有内容，则不显示

3，使用方法

3.1，在页面中展示 table

<Table :columns="columns1" :data="tableList"></Table>

3.2，导入数据（这里不管是从配置中导入的，还是在页面中自己定义的，都可以）

 columns1: [
        {
          title: "姓名",
          key: "name",
          align: "center"
        },
        {
          title: "年龄",
          key: "age",
          align: "center"
        },
        {
          title: "地址",
          ellipsis: true,
          key: "address",
          align: "center"
        },
        {
          title: "日期",
          key: "date",
          align: "center"
        }
      ]

3.3，给配置文件增加事件，或者其他的

 columns1: [
        {
          title: "姓名",
          key: "name",
          align: "center"
        },
        {
          title: "年龄",
          key: "age",
          align: "center"
        },
        {
          title: "地址",
          ellipsis: true,
          key: "address",
          align: "center",
          render: (h, params) => {
            return h("span", {// 创建的标签名
            // 执行的一些列样式或者事件等操作
              style: {
                display: "inline-block",
                color: "red"
              },
              on:{
                click:()=>{// 这里给了他一个打印事件，下面有展示图
                  console.log('我被触发了',params.index)
                }
              }
            },params.row.address);//  展示的内容
          }
        },
        {
          title: "日期",
          key: "date",
          align: "center"
        }
      ]

3.4，这里的 tableList 我就不展示导入信息了

展示： git.gif