如何在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>

複製程式碼