iView 在Vue中使用遇到的问题

悠悠 2023-07-09 08:28 20阅读 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>

转载：[https://www.cnblogs.com/sharealex/articles/10082386.html][https_www.cnblogs.com_sharealex_articles_10082386.html]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTE5NTc0OC8yMDE4MTIvMTE5NTc0OC0yMDE4MTIwNzExNTQ0NjU5NC0yNDYwOTcxNDUucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTE5NTc0OC8yMDE4MTIvMTE5NTc0OC0yMDE4MTIxMTE3MDQ0MTI1Ny0yMTE5NDY4MDExLnBuZw?x-oss-process=image/format,png
[https_www.cnblogs.com_sharealex_articles_10082386.html]: https://www.cnblogs.com/sharealex/articles/10082386.html