如何在iView中動態建立表格

最近在使用iView中的表格組件時，碰到許多坑和疑惑，仔細研究了一下table組件，發現官方文檔講的不是很清楚，本文將介紹並使用table組件，作一個動態建立表格的demo，效果以下圖。歡迎到個人博客訪問。

1、在columns中寫render函數

查看官方文檔可知，表格中主要的兩個屬性分別爲columns和data。columns用來渲染列，data是渲染所用的數據，想在iView中插入標籤，須要用它提供的render函數，這跟react的render差很少。

render函數的幾個參數：

• h: Render函數的別名（全名 createElement）

• params： table 該行內容的對象，包含row（當前行對象）和index（當前行的序列號）

• props：設置建立的標籤對象的屬性

• style：設置建立的標籤對象的樣式

• on：爲建立的標籤綁定事件

2、如何寫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')
                            ]);
                        }
複製代碼

3、一些常見的坑

• 插入Select組件的時候，若是table行數較少，會出現遮住下拉框的狀況。

  

  解決方法：在table組件上加上樣式overflow: visible。

• Select組件的觸發事件爲on-change

• 須要用props設置初始值，不然值不會渲染到真正的當前行。

4、完整代碼

<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>

複製代碼