iView Table使用render插入Input实现编辑表格

---

前言

最近因为偷懒使用了更多的render而不是slot写法，现在记录一下。

---

一、render？

h 函数：
在 render 函数中，h 是 createElement 的简写，是创建虚拟 DOM 节点的核心函数。它接收三个主要参数：元素（或组件）名称、属性对象和子节点数组。

参数解析：
当在 iView 的上下文中使用 render 函数时，通常会传入两个参数：第一个是 h 函数本身，第二个是 params 对象，该对象包含了当前行数据（row）、当前列配置（column）和行索引（index）等信息，以便开发者根据具体数据动态生成内容。

二、使用

代码如下（示例）：

<template>
  <Table :columns="columns" :data="data"></Table>
</template>
 
<script>
  export default {
    data() {
      return {
        data: [
          {
            key: 1,
            name: 'Example 1',
            value: 10
          },
          {
            key: 2,
            name: 'Example 2',
            value: 20
          }
        ],
        columns: [
          {
            title: 'Name',
            key: 'name'
          },
          {
            title: 'Value',
            key: 'value',
            render: (h, params) => {
              return h('Input', {
                props: {
                  value: this.data[params.index].value,
                  number: true
                },
                on: {
                  'on-change': (event) => {
                    this.data[params.index].value = event.target.value;
                  }
                }
              });
            }
          }
        ]
      };
    }
  };
</script>

---

总结

定义一个data数组来存储表格的数据，其中每个对象都有key, name, 和value属性。columns数组定义了表格的列，其中Value列使用了render函数来渲染Input组件。通过props来绑定当前行的value到Input组件，并监听on-change事件来更新数据。

当表格渲染时，Input组件会显示相应的数据，并且用户的修改会实时反映在data数组中。