umy-ui-table 1.2.0

package/packages/u-table/u-table-mixins/index.js

@@ -0,0 +1,483 @@
+// umy-table mixins
+import { isArrayFn, removal, typeIs } from "../../utils/common";
+
+export default {
+  props: {
+    data: { type: Array, default: () => [] }, // 表格数据
+    height: [String, Number],
+    maxHeight: [String, Number],
+    dialogData: { type: Array, default: () => [] }, // 选择显示字段数组
+    dataChangesScrollTop: { default: true, type: Boolean }, // 数据变化是否需要滚动到顶部
+    stripe: { default: false, type: Boolean }, // 是否为斑马纹
+    size: { default: "", type: String }, // Table 的尺寸
+    fit: { default: true, type: Boolean }, // 列的宽度是否自撑开
+    defaultSort: Object, // 默认的排序列的 prop 和顺序
+    showHeader: { default: true, type: Boolean }, // 是否显示表头
+    currentRowKey: [String, Number], // 当前行的 key，只写属性
+    selectOnIndeterminate: { type: Boolean, default: true }, // 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为
+    emptyText: { default: "暂无数据", type: String }, // 空数据时显示的文本内容
+    indent: { type: Number, default: 16 }, // 展示树形数据时，树节点的缩进
+    lazy: Boolean,
+    load: Function,
+    border: { default: true, type: Boolean }, // 是否显示纵向边框
+    showSummary: { default: false, type: Boolean }, // 是否需要合计
+    defaultExpandAll: { default: false, type: Boolean }, // 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
+    expandRowKeys: Array,
+    treeProps: {
+      default() {
+        return { hasChildren: "hasChildren", children: "children" };
+      },
+      type: Object,
+    }, // 渲染嵌套数据的配置选项
+    treeConfig: [Boolean, Object], // 树形结构配置项
+    totalOption: { default: () => [], type: Array }, // 需要合计的选项
+    sumText: { default: "合计", type: String }, // 合计行名称
+    fieldSort: { default: true, type: Boolean }, // 字段排序
+    rowId: String, // 长用于大数据树
+    rowKey: [String, Function], // 支持树类型的数据
+    highlightCurrentRow: { default: true, type: Boolean }, // 是否要高亮当前行
+    inverseCurrentRow: { default: false, type: Boolean }, // 是否需要反选高亮当前行
+    showDialogIcon: { default: true, type: Boolean }, // 是否显示操作字段的上下移动按钮(侧滑框)
+    moveDownIcon: { default: "", type: String }, // 下移按钮的图标(侧滑框)
+    moveUpIcon: { default: "", type: String }, // 上移按钮的图标(侧滑框)
+    showAmend: { default: false, type: Boolean }, // 是否显示修改字段名按钮(侧滑框)
+    amendBtnIcon: { default: "", type: String }, // 修改字段按钮的图标(侧滑框)
+    fieldTitle: { default: "选择显示字段", type: String }, // 弹框的标题(侧滑框)
+    recordTableSelect: { default: false, type: Boolean }, // 是否记录表格的选项id(必须保证行ID存在，且唯一)
+    headerDragStyle: { default: false, type: Boolean }, // 是否修改表格的头部拖动样式  | Boolean | false
+    useVirtual: { default: false, type: Boolean }, // 是否开启虚拟滚动 | Boolean | false
+    rowHeight: { default: 60, type: Number }, // 行高(必须要设置行高，否则会导致表格计算不正确)| Number | 60
+    excessRows: { default: 3, type: Number }, //	可视区域上方和下方额外渲染的行数，行数越多表格接替渲染效果越好，但越耗性能	Number	3
+    spanMethod: Function, // 合并行或列的计算方法 (注意，当开启useVirtual时，无效)
+    tooltipEffect: { default: "dark", type: String }, // tooltip effect 属性	String	dark/light
+    beautifyTable: { default: false, type: Boolean }, // 美化表格，修改了样式
+    tooltipPlacement: { default: "top", type: String }, // Tooltip 的出现位置	String	top
+    summaryMethod: Function, // 自定义的合计计算方法
+    bigDataCheckbox: { default: false, type: Boolean }, // 大量数据时候（至少数据量大于3000条每页），表格存在selection选择列表时，是否开启解决全选卡顿（缓慢）问题，开启此项可能影响table-column的selectable属性功能，最好不要使用selectable
+    rowClassName: [String, Function], // 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
+    rowStyle: [Object, Function], // 行的 style 的回调方法
+    cellClassName: [String, Function], // 行单元格的 className 的回调方法
+    cellStyle: [Object, Function], // 行单元格的 style 的回调方法
+    headerRowClassName: [String, Function], // 表头行的 className 的回调方法
+    headerRowStyle: [Object, Function], // 表头行的 style 的回调方法
+    headerCellClassName: [String, Function], // 表头单元格的 className 的回调方法
+    headerCellStyle: [Object, Function], // 表头单元格的 style 的回调方法
+    showHeaderOverflow: { type: [Boolean, String], default: null }, // 设置表头所有内容过长时显示为省略号
+    showBodyOverflow: { type: [Boolean, String], default: null }, // 设置表体所有内容过长时显示为省略号
+    fixedColumnsRoll: { default: false, type: Boolean }, // 表格有固定列,同时表格有合计,同时表格有横向滚动条，会导致固定列部分的横向滚动条不可拖动，是否需要解决此问题
+    selectTrClass: String, //  如果当前行被选中了 type类型为selection，就给当前行给个类样式
+    paginationShow: { default: false, type: Boolean }, // 是否需要分页器
+    total: { default: 0, type: Number }, // 总条数
+    pagerCount: { default: 5, type: Number }, // 页码按钮的数量，当总页数超过该值时会折叠
+    pageSize: { default: 10, type: Number }, // 每页条数
+    currentPage: { default: 1, type: Number }, // 当前页
+    pageSizes: { default: () => [10, 20, 30, 50], type: Array }, // 每页显示个数选择器的选项设置
+    layout: { default: "total, sizes, prev, pager, next, jumper", type: String }, // 分页组件布局，子组件名用逗号分隔
+  },
+  methods: {
+    // 分页器的事件
+    handleSizeChange(val) {
+      this.newPageSize = val;
+      this.$emit("handlePageSize", { size: this.newPageSize, page: this.newcurrentPage });
+    },
+    handleCurrentChange(val) {
+      this.newcurrentPage = val;
+      this.$emit("handlePageSize", { size: this.newPageSize, page: this.newcurrentPage });
+    },
+    // 用于可展开表格与树形表格
+    toggleRowExpansion(row, expanded) {
+      this.$refs.singleTable.toggleRowExpansion(row, expanded);
+    },
+    // 合并行或列的计算方法
+    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+      let objs = { row, column, rowIndex, columnIndex };
+      // 是否有条件开启合并列
+      if (typeof this.spanMethod === "function") {
+        return this.spanMethod(objs);
+      } else {
+        return "";
+      }
+    },
+
+    // 当用户手动勾选全选 Checkbox 时触发的事件	selection
+    selectAll(selection) {
+      this.$emit("select-all", selection);
+      // 当用户取消全选，就去找出表格当前的数据ID,然后去删除记录选择项ID数组对应的值
+      if (this.recordTableSelect && this.data.length <= 1000) {
+        if (selection.length === 0) {
+          // this.data当前页的数据（当前表格数据）
+          this.data.forEach((item) => {
+            this.tableSelectData.forEach((is, index) => {
+              if (item.id === is) {
+                this.tableSelectData.splice(index, 1);
+              }
+            });
+          });
+        }
+        // 全选 就去添加记录
+        if (selection.length > 0) {
+          this.data.forEach((item) => {
+            if (item.id) {
+              this.tableSelectData.push(item.id);
+            }
+          });
+        }
+        this.tableSelectData = JSON.parse(JSON.stringify(removal(this.tableSelectData)));
+        // 这就是整个表格当前选中项（包含分页）
+        this.$emit("table-select-change", this.tableSelectData);
+      }
+    },
+    // 当用户手动勾选数据行的 Checkbox 时触发的事件
+    plSelect(selection, row) {
+      this.$emit("select", selection, row);
+      // （执行删除选中节点操作）
+      if (row.id && this.recordTableSelect && this.data.length <= 1000) {
+        // 思路如下：  selection表示当前表格选中的节点数组, row表示当前点击的行节点
+        // 1.如果selection中存在row ， 代表当前是勾上节点
+        // 2.相反selection中不存在row ， 代表当前是在取消选中节点
+        // 3.如果当前在取消选中节点，则falsData为空
+        // 4.如果falsData为空，则去执行删除 -> 存放整个表格（包含分页）的数组中的值 （则 his.dats整个表格（包含分页）选中的节点数组节点ID）
+        // 5. 这一步非常重要（判断当时节点是关闭，还是开启）
+        let falsData = selection.filter((item) => item.id === row.id);
+        // 如果falsData数组为空，则代表当前节点被关闭了
+        if (falsData.length === 0) {
+          this.tableSelectData.forEach((item, index) => {
+            if (item === row.id) {
+              this.tableSelectData.splice(index, 1);
+            }
+          });
+        }
+        // 当前节点被开启
+        if (falsData.length > 0) {
+          this.tableSelectData.push(row.id);
+        }
+        this.tableSelectData = JSON.parse(JSON.stringify(removal(this.tableSelectData)));
+        // 这就是整个表格当前选中项（包含分页）
+        this.$emit("table-select-change", this.tableSelectData);
+      }
+    },
+    // 当选择项发生变化时会触发该事件
+    handleSelectionChange(val) {
+      this.$emit("selection-change", val);
+    },
+    // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
+    toggleRowSelection(rows) {
+      if (rows && isArrayFn(rows)) {
+        if (rows.length > 0 && this.$refs.singleTable) {
+          rows.forEach((item) => {
+            if (item.selected) {
+              this.$refs.singleTable.toggleRowSelection(item.row, item.selected, this.recordTableSelect);
+            } else if (item.selected === false) {
+              this.$refs.singleTable.toggleRowSelection(item.row, false, this.recordTableSelect);
+            } else if (item.selected === undefined) {
+              this.$refs.singleTable.toggleRowSelection(item.row, "", this.recordTableSelect);
+            }
+          });
+        }
+      } else {
+        console.error("数据格式需要一个数组");
+      }
+    },
+    // 用于多选表格，切换选中状态,适用于选中很多，取消很多
+    partRowSelections(datas, state) {
+      if (typeIs(state) === "boolean" && this.useVirtual && this.bigDataCheckbox && this.rowKey) {
+        this.$refs.singleTable.partRowSelections(datas, state);
+      }
+    },
+    // 用于多选表格，切换所有行的选中状态
+    toggleAllSelection() {
+      if (this.$refs.singleTable) {
+        this.$refs.singleTable.toggleAllSelection();
+      } else {
+        console.error("toggleAllSelection方法为找到，可能表格未加载完毕");
+      }
+    },
+    // 用于多选表格，清空用户的选择
+    clearSelection() {
+      if (this.$refs.singleTable) {
+        this.$refs.singleTable.clearSelection();
+      } else {
+        console.error("clearSelection方法为找到，可能表格未加载完毕");
+      }
+    },
+    // 让表格滚动条回到顶部，和左侧
+    pagingScrollTopLeft(top = 0, left = 0, type = "不倒计时") {
+      this.$refs.singleTable.pagingScrollTop(top, left, type);
+    },
+    // 滚动表格到底部
+    scrollBottom() {
+      this.$refs.singleTable.scrollBottom();
+    },
+    // 合计的方法
+    getSummaries(param) {
+      if (typeof this.summaryMethod === "function" && this.summaryMethod) {
+        return this.summaryMethod(param);
+      } else {
+        const { columns, data } = param;
+        const sums = [];
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = this.sumText;
+            return;
+          }
+          const values = data.map((item) => Number(item[column.property]));
+          // 需要合并的选项
+          const flas = this.totalOption.filter((item) => item.label === column.label);
+          if (!values.every((value) => isNaN(value)) && flas.length > 0) {
+            sums[index] = values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return prev + curr;
+              } else {
+                return prev;
+              }
+            }, 0);
+            sums[index] += flas[0].unit || "";
+          } else {
+            sums[index] = "";
+          }
+        });
+        // 返回一个二维数组的表尾合计
+        return [sums];
+      }
+    },
+    // 打开自定义字段框
+    plDialogOpens() {
+      this._times = null;
+      this.$refs.plDialog.style.width = 300 + "px";
+      this._times = setTimeout(() => {
+        this.plDialogFals = true;
+      }, 200);
+      // 创建节点（主要用来弹出menu窗口时，不让起点击外面）
+      this.aBox = document.createElement("div");
+      this.aBox.className = "modal-backdrop";
+      this.aBox.style.display = "block";
+      this.aBox.onclick = () => {
+        this.closeModal();
+      };
+      document.body.appendChild(this.aBox);
+    },
+    // 关闭自定义字段框（取消选择）
+    closeModal() {
+      this.plDialogFals = false;
+      clearTimeout(this._times);
+      this.$refs.plDialog.style.width = 0 + "px";
+      this.aBox.style.display = "none";
+      this.clearNode();
+      this.newDialogData = JSON.parse(JSON.stringify(this.dialogData));
+    },
+    // 确认按钮
+    confirmField() {
+      this.$emit("show-field", this.newDialogData);
+      this.plDialogFals = false;
+      clearTimeout(this._times);
+      this.$refs.plDialog.style.width = 0 + "px";
+      this.aBox.style.display = "none";
+      this.clearNode();
+    },
+    // 重置按钮
+    reset() {
+      this.$emit("reset", this.newDialogData);
+      this.plDialogFals = false;
+      clearTimeout(this._times);
+      this.$refs.plDialog.style.width = 0 + "px";
+      this.aBox.style.display = "none";
+      this.clearNode();
+    },
+    // 当某一行被点击时会触发该事件
+    rowClick(row, column, event) {
+      if (this.highlightCurrentRow) {
+        this.$refs.singleTable.setCurrentRow(row);
+      }
+      this.$emit("row-click", row, column, event);
+      // 如果当前节点存在current-row，再次点击时候那么就去掉current-row效果
+      if (event.path && this.highlightCurrentRow && this.inverseCurrentRow) {
+        event.path.forEach((item) => {
+          if (item && item.classList) {
+            item.classList.forEach((its) => {
+              if (its === "current-row") {
+                this.$refs.singleTable.setCurrentRow();
+              }
+            });
+          }
+        });
+      }
+    },
+    // 当某一行被双点击时
+    rowDblclick(row, column, event) {
+      this.$emit("row-dblclick", row, column, event);
+    },
+    // 用于单选表格，设定某一行为选中行
+    setCurrentRow(row) {
+      if (row) {
+        this.$refs.singleTable.setCurrentRow(row);
+      } else {
+        this.$refs.singleTable.setCurrentRow();
+      }
+    },
+    // 当用户对某一行展开或者关闭的时候会触发该事件
+    expChang(row, expandedRows) {
+      this.$emit("expand-change", row, expandedRows);
+    },
+    // 当某一列的表头被点击时会触发该事件
+    headerClick(column, event) {
+      this.$emit("header-click", column, event);
+    },
+    // 修改字段名按钮事件
+    amendField(item, index) {
+      this.$emit("amend-field", item, index);
+    },
+    // 表体滚动事件
+    tableBodyScroll(table, event) {
+      // 当表格滚动暴露滚动事件
+      this.$emit("table-body-scroll", table, event);
+    },
+    // 当拖动表头改变了列的宽度的时候会触发该事件(newWidth, oldWidth, column, event)
+    headerDragend(newWidth, oldWidth, column, event) {
+      this.$emit("header-dragend", newWidth, oldWidth, column, event);
+      this.doLayout("不执行滚动条");
+    },
+    // 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法
+    doLayout(type) {
+      this.$refs.singleTable.doLayout();
+      const { scrollTop, useVirtual, judgeFlse } = this.$refs.singleTable;
+      if (scrollTop && useVirtual && type !== "不执行滚动条") {
+        if (judgeFlse) {
+          this.$refs.singleTable.scrollBottom();
+        } else {
+          this.$refs.singleTable.pagingScrollTop(scrollTop);
+        }
+      }
+    },
+    // 删除节点
+    clearNode() {
+      // 删除节点
+      let parent = this.aBox ? this.aBox.parentNode : "";
+      parent && parent.removeChild(this.aBox);
+      let doms = document.getElementsByClassName("modal-backdrop");
+      if (doms.length > 0) {
+        document.body.removeChild(doms[0]);
+      }
+      this.aBox = null;
+    },
+    // 当表格的排序条件发生变化的时候会触发该事件
+    sortChange({ column, prop, order }) {
+      let objs = { column, prop, order };
+      this.$emit("sort-change", objs);
+    },
+    // 当表格的当前行发生变化的时候会触发该事件
+    currentChange(currentRow, oldCurrentRow) {
+      this.$emit("current-change", currentRow, oldCurrentRow);
+    },
+    // 当表格的筛选条件发生变化的时候会触发该事件
+    filterChange(filters) {
+      this.$emit("filter-change", filters);
+    },
+    // 用于清空排序条件，数据会恢复成未排序的状态
+    clearSort() {
+      this.$refs.singleTable.clearSort();
+    },
+    // 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态
+    clearFilter(columnKey) {
+      this.$refs.singleTable.clearFilter(columnKey);
+    },
+    // 手动对 Table 进行排序
+    sort(prop, order) {
+      this.$refs.singleTable.sort(prop, order);
+    },
+    // 当单元格 hover 进入时会触发该事件
+    cellMouseEnter(row, column, cell, event) {
+      this.$emit("cell-mouse-enter", row, column, cell, event);
+    },
+    // 当单元格 hover 退出时会触发该事件
+    cellMouseLeave(row, column, cell, event) {
+      this.$emit("cell-mouse-leave", row, column, cell, event);
+    },
+    // 当某个单元格被点击时会触发该事件
+    cellClick(row, column, cell, event) {
+      this.$emit("cell-click", row, column, cell, event);
+    },
+    // 当某个单元格被双击击时会触发该事件
+    cellDblclick(row, column, cell, event) {
+      this.$emit("cell-dblclick", row, column, cell, event);
+    },
+    // 当某一行被鼠标右键点击时会触发该事件
+    rowContextmenu(row, column, event) {
+      this.$emit("row-contextmenu", row, column, event);
+    },
+    // 当某一列的表头被鼠标右键点击时触发该事件	column, event
+    headerContextmenu(column, event) {
+      this.$emit("header-contextmenu", column, event);
+    },
+    // 判断行是否为树形节点展开状态
+    isTreeExpandByRow(row) {
+      return this.$refs.singleTable.isTreeExpandByRow(row);
+    },
+    // 当虚拟树节点展开或收起时会触发该事件
+    toggleTreeExpands(row, treeExpanded, event) {
+      this.$emit("toggle-tree-expand", row, treeExpanded, event);
+    },
+    // 展开全部pl-table的树
+    setAllTreeExpansion() {
+      this.$refs.singleTable.setAllTreeExpansion();
+    },
+    // 关闭所有
+    clearTreeExpand() {
+      this.$refs.singleTable.clearTreeExpand();
+    },
+    // 获取已展开的节点
+    getTreeExpandRecords() {
+      return this.$refs.singleTable.getTreeExpandRecords();
+    },
+    // 设置展开树形节点
+    setTreeExpansion(rows, expanded) {
+      this.$refs.singleTable.setPlTreeExpansion(rows, expanded);
+    },
+    // 切换展开树形节点的状态
+    toggleTreeExpansion(row) {
+      this.$refs.singleTable.toggleTreeExpansion(row);
+    },
+  },
+  // 生命周期结束
+  beforeDestroy() {},
+  // 如果使用了keep-alive
+  deactivated() {},
+  activated() {},
+  watch: {
+    data: {
+      // 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听。
+      // deep: true, // 不需要监听数组对象的变化
+      immediate: true, // 如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
+      handler(val) {
+        if (!isArrayFn(val)) {
+          throw new Error("表格数据需要的是数组格式，请检查你的数据格式");
+        }
+      },
+    },
+    dialogData: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        this.newDialogData = JSON.parse(JSON.stringify(val));
+      },
+    },
+    currentPage(val) {
+      this.newcurrentPage = val;
+    },
+    pageSize(val) {
+      this.newPageSize = val;
+    },
+    height: {
+      immediate: true,
+      handler(value) {
+        this.setHeight();
+      },
+    },
+    maxHeight: {
+      immediate: true,
+      handler(value) {
+        this.setHeight();
+      },
+    },
+  },
+};

package/packages/u-table/u-table-tree-mixins/methods.js

@@ -0,0 +1,120 @@
+import XEUtils from "xe-utils/ctor";
+import { typeIs } from "../../utils/common";
+
+// 方法
+export default {
+  // 暴露相关方法
+  /**
+   * 设置展开树形节点，二个参数设置这一行展开与否
+   * 支持单行
+   * 支持多行
+   * @param {Array/Row} rows 行数据
+   * @param {Boolean} expanded 是否展开
+   */
+  setTreeExpansion(rows, expanded) {
+    let { treeOpts, plTreeData } = this;
+    let { accordion } = treeOpts;
+    if (rows) {
+      if (!XEUtils.isArray(rows)) {
+        rows = [rows];
+      }
+      if (rows.length) {
+        rows.forEach((row) => {
+          // 节点已经展开 或者关闭，再去展开获取关闭 直接返回
+          if ((row.pl_table_expand || false) === expanded) return;
+          row.pl_table_expand = expanded;
+          // 当前row在数据中的索引值(非常重要)
+          const index = plTreeData.findIndex((item) => item[this.rowId] === row[this.rowId]);
+          // 获取当前节点下面的展开的子节点
+          const treeExpandeds = this.eachTreeExpand(row);
+          // 大于等于0才代表是展开的表格中可见的节点。不大于等于0代表是展开的 不可见的子节点
+          if (index >= 0) {
+            // 展开节点
+            if (expanded) {
+              // 插入节点
+              plTreeData.splice(index + 1, 0, ...treeExpandeds);
+              // 添加当前展开节点到 ->展开节点数组中
+              this.treeExpandeds.push(row);
+            } else {
+              // 关闭节点
+              // 删除所有子层级数据（删除的子节点其实很简单，就是删除当前节点下面的子节点数量）
+              plTreeData.splice(index + 1, treeExpandeds.length);
+              // 删除展开节点数组的row
+              XEUtils.remove(this.treeExpandeds, (item) => item[this.rowId] === row[this.rowId]);
+            }
+          }
+        });
+        // 载入数据
+        this.setTreeTableData();
+      }
+    }
+  },
+  // 判断行是否为树形节点展开状态
+  isTreeExpandByRow(row) {
+    if (!this.rowId) {
+      return false;
+    } else {
+      const rowInfo = this.plTreeData.filter((item) => item[this.rowId] === row[this.rowId])[0];
+      return typeIs(rowInfo.pl_table_expand) === "boolean" ? rowInfo.pl_table_expand : false;
+    }
+  },
+  // 展开所有
+  setAllTreeExpansion() {
+    let data = JSON.parse(JSON.stringify(this.copyPlTreeData));
+    let treeExpandeds = [];
+    this.treeExpandeds = [];
+    XEUtils.eachTree(
+      data,
+      (row) => {
+        if (row[this.treeOpts.children]) {
+          row.pl_table_expand = true;
+          // 添加进入展开节点中
+          this.treeExpandeds.push(row);
+        }
+        treeExpandeds.push(row);
+      },
+      this.treeOpts
+    );
+    this.plTreeData = treeExpandeds;
+    // 设置数据
+    this.setTreeTableData();
+  },
+  // 关闭所有
+  clearTreeExpand() {
+    this.plTreeData = JSON.parse(JSON.stringify(this.copyPlTreeData));
+    this.treeExpandeds = [];
+    // 设置数据
+    this.setTreeTableData();
+  },
+  // 获取已展开的节点
+  getTreeExpandRecords() {
+    let newData = JSON.parse(JSON.stringify(this.treeExpandeds));
+    newData.forEach((item) => {
+      delete item.pl_table_expand;
+      delete item.pl_table_level;
+    });
+    return newData.slice(0);
+  },
+  // 设置树的节点展开与否
+  setPlTreeExpansion(rows, expanded) {
+    if (!rows) return;
+    const { children } = this.treeOpts;
+    // 根据rowId, 获取当前数据中的row，不改变表格数据，改变复制的数据
+    let row = this.plTreeData.filter((item) => item[this.rowId] === rows[this.rowId])[0];
+    // row || children无子节点。不存在就返回
+    if (!row || !row[children]) return;
+    // 设置节点
+    this.setTreeExpansion(row, expanded);
+  },
+  // 切换展开树形节点的状态
+  toggleTreeExpansion(rows) {
+    if (!rows) return;
+    const { children } = this.treeOpts;
+    // 根据rowId, 获取当前数据中的row，不改变表格数据，改变复制的数据
+    let row = this.plTreeData.filter((item) => item[this.rowId] === rows[this.rowId])[0];
+    // row || children无子节点。不存在就返回
+    if (!row || !row[children]) return;
+    // 设置节点
+    this.setTreeExpansion(row, !this.isTreeExpandByRow(row));
+  },
+};