如何在iView中动态创建表格

最近在使用iView中的表格组件时，碰到许多坑和疑惑，仔细研究了一下table组件，发现官方文档讲的不是很清楚，本文将介绍并使用table组件，做一个动态创建表格的demo，效果如下图。欢迎到我的博客访问。

一、在columns中写render函数

查看官方文档可知，表格中主要的两个属性分别为columns和data。columns用来渲染列，data是渲染所用的数据，想在iView中插入标签，需要用它提供的render函数，这跟react的render差不多。

render函数的几个参数：

• h: Render函数的别名（全名 createElement）

• params： table 该行内容的对象，包含row（当前行对象）和index（当前行的序列号）

• props：设置创建的标签对象的属性

• style：设置创建的标签对象的样式

• on：为创建的标签绑定事件

二、如何写render函数

1.插入Input

          render: (h, { row, index }) => {
            return h("Input", {
              props: {
                value: row.name
              },
              on: {
                input: val => {
                  this.data[index].name = val;
                }
              }
            });
          }

这是一个插入Input框的例子。

• h渲染出<input>标签
• prop设置其value为当前行的name
• on添加input方法，使当前行的name为输入的值

2.插入Select

{
          title: "爱好",
          key: "hobby",
          render: (h, { row, index }) => {
            return h("Select", {
              props: {
                value: row.hobby
              },
              on: {
                'on-select': val => {
                  this.data[index].hobby = val;
                }
              }
            },
            this.options.map(item=>{
              return h('Option',{
                props:{
                  value:item,
                  label:item
                }
              })
            })
            );
          }
        },

这是一个插入Select框的例子

将要嵌套的组件用花括号放在后面,option可通过map函数就可以代替v-for的渲染。

如果要嵌套多个组件，可以写成数组的形式。比如：

render: (h, params) => {
                            return h('div', [
                                h('Button'),
                                h('Button')
                            ]);
                        }

三、一些常见的坑

• 插入Select组件的时候，如果table行数较少，会出现遮住下拉框的情况。

  

  解决方法：在table组件上加上样式overflow: visible。

• Select组件的触发事件为on-change

• 需要用props设置初始值，否则值不会渲染到真正的当前行。

四、完整代码

<template>
  <div class="table">
    <Button class="button" @click="add">Add</Button>
    <Table :columns="columns" :data="data" class="table-fixbug"></Table>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "姓名",
          key: "name",
          render: (h, { row, index }) => {
            return h("Input", {
              props: {
                value: row.name
              },
              on: {
                input: val => {
                  this.data[index].name = val;
                }
              }
            });
          }
        },
        {
          title: "爱好",
          key: "hobby",
          render: (h, { row, index }) => {
            return h("Select", {
              props: {
                value: row.hobby
              },
              on: {
                'on-select': val => {
                  this.data[index].hobby = val;
                }
              }
            },
            this.options.map(item=>{
              return h('Option',{
                props:{
                  value:item,
                  label:item
                }
              })
            })
            );
          }
        },
        {
          title: "职业",
          key: "job",
          render: (h, { row, index }) => {
            return h("Input", {
              props: {
                value: row.job
              },
              on: {
                input: val => {
                  this.data[index].job = val;
                }
              }
            });
          }
        },
        {
          title: "operation",
          key: "operation",
          render: (h, { row, index }) => {
            return h(
              "a",
              {
                on: {
                  click: () => {
                    this.data.splice(index, 1);
                  }
                }
              },
              "Delete"
            );
          }
        }
      ],
      data: [
        {
          name: "",
          hobby: "",
          job: ""
        }
      ],
      options:['电影','游戏','看书']
    };
  },
  methods: {
    add() {
      const addData = {
        name: "",
        hobby: "",
        job: ""
      };
      this.data.push(addData);
    }
  }
};
</script>

<style>
.table {
  text-align: left;
}
.button {
  margin-bottom: 20px;
}
.table-fixbug{
  overflow: visible;
}
</style>