iView 在Vue中使用遇到的问题-蒲公英云

iView 在Vue中使用遇到的问题

悠悠 2023-07-09 08:28 107阅读 0赞

一、Tree 树形控件

问题：

树形控件在参照官方最后一个自定义render例子时，无法对树节点进行选中

format_png

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 表格自定义选择框、输入框

效果图：

format_png 1

示例代码：

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