iView 在Vue中使用遇到的問題

一、Tree 樹形控件

問題：

樹形控件在參照官方最后一個自定義render例子時，無法對樹節點進行選中

      return h(
        "span",
        {
          style: {
            display: "inline-block",
            cursor: "pointer",
            color: node.node.selected ? "#2d8cf0" : "#fff" //根據選中狀態設置樣式
          },
          on: {
            click: () => {
              if (!node.node.selected)
                this.$refs.tree.handleSelect(node.nodeKey); //手動選擇樹節點
            }
          }
        },

 

二、Table 表格 結合 Page 分頁

問題：

在表格使用多選框時，分頁切換后，上一頁的選中狀態無法保存。

解決方案：

定義一個存儲所有選中的數組this.selectRow = []，選中狀態發生變化時，向數組中增刪選中目標。

在翻頁事件中，加入下面的代碼：

 

    //翻頁事件
    changePage(page) {
      this.currentPage = page;
      this.tableData.map(row => {
        //判斷是否在選中列表中
        f['_checked'] = $.inArray(row.name,this.selectRow) != -1;
      })
    }

 

 

三、Table 表格 自定義選擇框、輸入框

效果圖：

 示例代碼：

<template>
  <Table
    ref="fieldTable"
    :loading="fieldLoading"
    :columns="fieldColumns"
    :data="fieldTableData"
    @on-select="tableSelect"
    @on-select-cancel="tableSelectCancel"
    @on-select-all="tableSelectAll"
    @on-select-all-cancel="tableSelectAllCancel"
  ></Table>
</template>

<script>
export default {
  data() {
    return {
      fieldColumns: [],
      fieldTableData: [],
      fieldColumns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "發布字段",
          key: "publish",
          align: "center",
          //渲染為勾選框
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.publish
                },
                on: {
                  "on-change": data => {
                    this.fieldTableData[params.row.index].publish = data;
                    this.fieldTableData[params.row.index]["_checked"] = true;
                  }
                }
              })
            ]);
          }
        },
        {
          title: "字段名稱",
          key: "name",
          width: 120
        },
        {
          title: "字段重命名",
          key: "new_name",
          align: "center",
          width: 120,
          //渲染為輸入框
          render: (h, params) => {
            return h("div", [
              h("Input", {
                props: {
                  value: params.row.new_name
                },
                on: {
                  "on-blur": event => {
                    this.fieldTableData[params.row.index].new_name =
                      event.target.value;
                    this.fieldTableData[params.row.index]["_checked"] = true;
                  }
                }
              })
            ]);
          }
        },
        {
          title: SELAN.type || "類型",
          key: "type",
          align: "center"
        },
        {
          title: SELAN.length || "長度",
          key: "length",
          align: "center"
        }
      ]
    };
  },
  methods: {
    //單行選擇
    tableSelect(selection, row) {
      this.fieldTableData[row.index]["_checked"] = true;
      this.fieldTableData[row.index].publish = false;
    },
    //單行取消選擇
    tableSelectCancel(selection, row) {
      this.fieldTableData[row.index]["_checked"] = false;
      this.fieldTableData[row.index].publish = false;
    },
    //全選
    tableSelectAll(selection) {
      this.fieldTableData.map(s => {
        s["_checked"] = true;
      });
    },
    //取消全選
    tableSelectAllCancel(selection) {
      this.fieldTableData.map(s => {
        s["_checked"] = false;
        s.publish = false;
      });
    }
  }
};
</script>