From 90b96fb442a3f0fcd51f56ab7a49e5628e88ecb8 Mon Sep 17 00:00:00 2001
From: wuyouhua <37034209+wuyouhuaz@users.noreply.github.com>
Date: Sat, 30 Oct 2021 14:23:21 +0800
Subject: [PATCH 1/5] change demo--add jsx template

---
 src/view/demo.vue | 127 +++++++++++++++++++++++++---------------------
 1 file changed, 68 insertions(+), 59 deletions(-)

diff --git a/src/view/demo.vue b/src/view/demo.vue
index d23d5df..945f123 100644
--- a/src/view/demo.vue
+++ b/src/view/demo.vue
@@ -1,33 +1,34 @@
 <template>
   <div id="app">
     <div id="container">
-    <button @click="zipAll">全部折叠</button>
-    <button @click="openAll">全部开</button>
-    <button @click="highlight(true)">高亮行</button>
-    <button @click="highlight(false)">取消高亮</button>
-    <dragTreeTable
-      ref="table"
-      :data="treeData"
-      @drag="onTreeDataChange"
-      resize
-      fixed
-      :isdraggable="true">
-    <template #selection="{row}">
-      {{ row.name }}
-    </template>
+      <button @click="zipAll">全部折叠</button>
+      <button @click="openAll">全部开</button>
+      <button @click="highlight(true)">高亮行</button>
+      <button @click="highlight(false)">取消高亮</button>
+      <dragTreeTable
+        ref="table"
+        :data="treeData"
+        @drag="onTreeDataChange"
+        resize
+        fixed
+        :isdraggable="true"
+      >
+        <template #selection="{ row }">
+          {{ row.name }}
+        </template>
 
-    <template #id="{row}">
-      {{ row.id }}
-    </template>
+        <template #id="{ row }">
+          {{ row.id }}
+        </template>
 
-    <template #action="{row}">
-      <a class="action-item" @click.stop.prevent="add(row)">添加子节点</a>
-      <a class="action-item" @click.stop.prevent="edit(row)">修改子节点</a>
-      <a class="action-item" @click.stop.prevent="onDel(row)"><i>删除</i></a>
-    </template>
-    </dragTreeTable>
-    <Dialog :onSave="onEdit" ref="editDialog"></Dialog>
-    <Dialog :onSave="onAdd" ref="addDialog"></Dialog>
+        <template #action="{ row }">
+          <a class="action-item" @click.stop.prevent="add(row)">添加子节点</a>
+          <a class="action-item" @click.stop.prevent="edit(row)">修改子节点</a>
+          <a class="action-item" @click.stop.prevent="onDel(row)"><i>删除</i></a>
+        </template>
+      </dragTreeTable>
+      <Dialog :onSave="onEdit" ref="editDialog"></Dialog>
+      <Dialog :onSave="onAdd" ref="addDialog"></Dialog>
     </div>
   </div>
 </template>
@@ -35,20 +36,20 @@
 <script>
 import dragTreeTable from "../lib/dragTreeTable.vue";
 import Dialog from "./dialog.vue";
-import demoDataList from './data';
+import demoDataList from "./data";
 export default {
   name: "app",
   data() {
     return {
       treeData: {
         columns: [],
-        lists: []
-      }
+        lists: [],
+      },
     };
   },
   components: {
     dragTreeTable,
-    Dialog
+    Dialog,
   },
   methods: {
     onTreeDataChange(list) {
@@ -56,32 +57,32 @@ export default {
       this.treeData.lists = list;
     },
     onAdd(pId, data) {
-      this.$refs.table.AddRow(pId, data)
+      this.$refs.table.AddRow(pId, data);
     },
     onEdit(id, data) {
-      this.$refs.table.EditRow(id, data)
+      this.$refs.table.EditRow(id, data);
     },
     openAll() {
       this.$refs.table.OpenAll();
     },
     zipAll() {
-      this.$refs.table.ZipAll()
+      this.$refs.table.ZipAll();
     },
     onDel(item) {
-      const updatedLists = this.$refs.table.DelById(item.id)
-      console.log("当前行的数据" , updatedLists);
+      const updatedLists = this.$refs.table.DelById(item.id);
+      console.log("当前行的数据", updatedLists);
       this.treeData.lists = updatedLists;
-      alert('本地删除成功')
+      alert("本地删除成功");
     },
     highlight(flag) {
       this.$refs.table.HighlightRow(383, flag, true);
     },
     add(row) {
-      this.$refs.addDialog.show('add', row.id);
+      this.$refs.addDialog.show("add", row.id);
     },
     edit(row) {
-      this.$refs.editDialog.show('edit', row);
-    }
+      this.$refs.editDialog.show("edit", row);
+    },
   },
   mounted() {
     var columns = [
@@ -90,10 +91,10 @@ export default {
         isContainChildren: true,
         width: 100,
         align: "center",
-        onChange: (item)=>{
-          console.log(item)
-          alert('您选中了'+ item.length + '条数据');
-        }
+        onChange: (item) => {
+          console.log(item);
+          alert("您选中了" + item.length + "条数据");
+        },
       },
       {
         type: "selection",
@@ -107,13 +108,23 @@ export default {
         title: "ID",
         type: "id",
         width: 100,
-        align: "center"
+        align: "center",
       },
       {
         title: "链接",
         field: "uri",
         width: 200,
-        align: "center"
+        align: "center",
+      },
+      {
+        title: "JSX使用",
+        width: 200,
+        align: "center",
+        render: ({ row, columnIndex }) => {
+          console.log({ row });
+          console.log({ columnIndex });
+          return <span>{row.id}</span>;
+        },
       },
       {
         title: "操作(使用actions)",
@@ -124,29 +135,29 @@ export default {
           {
             text: "添加子节点",
             onclick: (item) => {
-              this.$refs.addDialog.show('add', item.id);
+              this.$refs.addDialog.show("add", item.id);
             },
-            formatter: item => {
+            formatter: (item) => {
               return "<i>添加子节点 </i>";
-            }
+            },
           },
           {
             text: "修改子节点",
             onclick: (item) => {
-              this.$refs.editDialog.show('edit', item);
+              this.$refs.editDialog.show("edit", item);
             },
-            formatter: item => {
+            formatter: (item) => {
               return "<i>修改子节点 </i>";
-            }
+            },
           },
           {
             text: "删除",
             onclick: this.onDel,
-            formatter: item => {
+            formatter: (item) => {
               return "<i>删除</i>";
-            }
-          }
-        ]
+            },
+          },
+        ],
       },
       {
         title: "操作(使用slot自定义)",
@@ -157,12 +168,10 @@ export default {
     ];
     this.treeData = {
       columns: columns,
-      lists: demoDataList
+      lists: demoDataList,
     };
-  }
+  },
 };
 </script>
 
-<style lang="scss">
-
-</style>
+<style lang="scss"></style>

From 885461ddeca4b988dd9cde8e7fa7e1d7727654c6 Mon Sep 17 00:00:00 2001
From: wuyouhua <37034209+wuyouhuaz@users.noreply.github.com>
Date: Sat, 30 Oct 2021 14:24:29 +0800
Subject: [PATCH 2/5] fix warning

---
 src/lib/dragTreeTable.vue | 1072 +++++++++++++++++++------------------
 1 file changed, 543 insertions(+), 529 deletions(-)

diff --git a/src/lib/dragTreeTable.vue b/src/lib/dragTreeTable.vue
index e72b942..74a05ee 100644
--- a/src/lib/dragTreeTable.vue
+++ b/src/lib/dragTreeTable.vue
@@ -1,592 +1,606 @@
 <template>
-    <div class="drag-tree-table" ref="table" v-bind:class="{border:border !== undefined}">
-        <div class="drag-tree-table-header">
-          <column
-            v-for="(item, index) in data.columns"
-            :width="item.width"
-            :flex="item.flex"
-            :border="border === undefined ? resize : border"
-            v-bind:class="['align-' + item.titleAlign, 'colIndex' + index]"
-            :key="index" >
-            <input
-              v-if="item.type == 'checkbox'"
-              class="checkbox"
-              type="checkbox"
-              @click="onCheckAll($event, item.onChange)">
-            <span v-else v-html="item.title">
-            </span>
-            <div class="resize-line" @mousedown="mousedown(index, $event)" v-show="resize!== undefined">
-
-            </div>
-          </column>
-        </div>
-        <div class="drag-tree-table-body"
-          v-bind:style="bodyStyle"
-          @dragover="draging"
-          @dragend="drop"
-          :class="isDraing ? 'is-draging' : '' ">
-          <row depth="0" :columns="data.columns" :isdraggable="isdraggable"
-            :model="item"
-            v-for="(item, index) in data.lists"
-            :custom_field="custom_field"
-            :onCheck="onSingleCheckChange"
-            :border="border === undefined ? resize : border"
-            :isContainChildren="isContainChildren"
-            :key="index">
-              <template v-slot:selection="{row}">
-                <slot name="selection" v-bind:row="row"></slot>
-              </template>
-              <template v-for="(subItem, subIndex) in data.columns"  v-slot:[subItem.type]="{row}">
-                <slot :name="subItem.type" v-bind:row="row"></slot>
-              </template>
-        </row>
-        </div>
-        <div class="drag-line">
-        </div>
+  <div
+    class="drag-tree-table"
+    ref="table"
+    v-bind:class="{ border: border !== undefined }"
+  >
+    <div class="drag-tree-table-header">
+      <column
+        v-for="(item, index) in data.columns"
+        :width="item.width"
+        :flex="item.flex"
+        :border="border === undefined ? resize : border"
+        v-bind:class="['align-' + item.titleAlign, 'colIndex' + index]"
+        :key="index"
+      >
+        <input
+          v-if="item.type == 'checkbox'"
+          class="checkbox"
+          type="checkbox"
+          @click="onCheckAll($event, item.onChange)"
+        />
+        <span v-else v-html="item.title"> </span>
+        <div
+          class="resize-line"
+          @mousedown="mousedown(index, $event)"
+          v-show="resize !== undefined"
+        ></div>
+      </column>
+    </div>
+    <div
+      class="drag-tree-table-body"
+      v-bind:style="bodyStyle"
+      @dragover="draging"
+      @dragend="drop"
+      :class="isDraing ? 'is-draging' : ''"
+    >
+      <row
+        depth="0"
+        :columns="data.columns"
+        :isdraggable="isdraggable"
+        :model="item"
+        v-for="(item, index) in data.lists"
+        :custom_field="custom_field"
+        :onCheck="onSingleCheckChange"
+        :border="border === undefined ? resize : border"
+        :isContainChildren="isContainChildren"
+        :key="index"
+      >
+        <template v-slot:selection="{ row }">
+          <slot name="selection" v-bind:row="row"></slot>
+        </template>
+        <template v-for="subItem in data.columns" v-slot:[subItem.type]="{ row }">
+          <slot :name="subItem.type" v-bind:row="row"></slot>
+        </template>
+      </row>
     </div>
+    <div class="drag-line"></div>
+  </div>
 </template>
 
 <script>
-  import row from './row.vue'
-  import column from './column.vue'
-  import space from './space.vue';
-  import func from './func';
+import row from "./row.vue";
+import column from "./column.vue";
+import space from "./space.vue";
+import func from "./func";
 
-  document.body.ondrop = function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-  }
-  export default {
-    name: "dragTreeTable",
-    components: {
-        row,
-        column,
-        space
+document.body.ondrop = function (event) {
+  event.preventDefault();
+  event.stopPropagation();
+};
+export default {
+  name: "dragTreeTable",
+  components: {
+    row,
+    column,
+    space,
+  },
+  computed: {
+    bodyStyle() {
+      return {
+        overflow: this.fixed !== undefined && this.fixed !== false ? "auto" : "hidden",
+        height:
+          this.fixed !== undefined && this.fixed !== false
+            ? (this.height || 400) + "px"
+            : "auto",
+      };
     },
-    computed: {
-      bodyStyle(){
-        return {
-          overflow: (this.fixed !== undefined && this.fixed !== false) ? 'auto': 'hidden',
-          height: (this.fixed !== undefined && this.fixed !== false) ? (this.height || 400) + 'px' : 'auto'
-        }
-      }
+  },
+  props: {
+    isdraggable: {
+      type: Boolean,
+      default: true,
     },
-    props: {
-      isdraggable: {
-        type: Boolean,
-        default: true
+    data: Object,
+    onDrag: {
+      type: Function,
+      default: () => {},
+    },
+    fixed: String | Boolean,
+    height: String | Number,
+    border: String,
+    onlySameLevelCanDrag: String,
+    hightRowChange: String,
+    resize: String,
+    beforeDragOver: Function,
+  },
+  data() {
+    return {
+      dragX: 0,
+      dragY: 0,
+      dragId: "",
+      targetId: "",
+      whereInsert: "",
+      isDraing: false,
+      custom_field: {
+        id: "id",
+        parent_id: "parent_id",
+        order: "order",
+        lists: "lists",
+        open: "open",
+        checked: "checked",
+        highlight: "highlight",
       },
-      data: Object,
-      onDrag: {
-        type:Function,
-        default: ()=>{}
+      onCheckChange: null,
+      isContainChildren: false,
+      mouse: {
+        status: 0,
+        startX: 0,
+        curColWidth: 0,
+        curIndex: 0,
       },
-      fixed: String | Boolean,
-      height: String | Number,
-      border: String,
-      onlySameLevelCanDrag: String,
-      hightRowChange: String,
-      resize: String,
-      beforeDragOver: Function
+    };
+  },
+  methods: {
+    draging(e) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      this.isDraing = true;
+      if (e.pageX == this.dragX && e.pageY == this.dragY) return;
+      this.dragX = e.pageX;
+      this.dragY = e.clientY;
+      this.filter(e.pageX, e.clientY);
+      if (e.clientY < 100) {
+        window.scrollTo(0, scrollY - 6);
+      } else if (e.clientY > document.body.clientHeight - 160) {
+        window.scrollTo(0, scrollY + 6);
+      }
     },
-    data() {
-      return {
-        dragX: 0,
-        dragY: 0,
-        dragId: '',
-        targetId: '',
-        whereInsert: '',
-        isDraing: false,
-        custom_field: {
-          id: 'id',
-          parent_id: 'parent_id',
-          order: 'order',
-          lists: 'lists',
-          open: 'open',
-          checked: 'checked',
-          highlight: 'highlight'
-        },
-        onCheckChange: null,
-        isContainChildren: false,
-        mouse: {
-          status: 0,
-          startX: 0,
-          curColWidth: 0,
-          curIndex: 0
+    drop(event) {
+      func.clearHoverStatus();
+      this.resetTreeData();
+      this.isDraing = false;
+      if (this.targetId !== undefined) {
+        if (this.hightRowChange !== undefined) {
+          this.$nextTick(() => {
+            var rowEle = document.querySelector("[tree-id='" + window.dragId + "']");
+            rowEle.style.backgroundColor = "rgba(64,158,255,0.5)";
+            setTimeout(() => {
+              rowEle.style.backgroundColor = "rgba(64,158,255,0)";
+            }, 2000);
+          });
         }
       }
     },
-    methods: {
-      draging(e) {
-        e.preventDefault();
-        e.dataTransfer.dropEffect = "move"
-        this.isDraing = true;
-        if (e.pageX == this.dragX && e.pageY == this.dragY) return
-        this.dragX = e.pageX;
-        this.dragY = e.clientY;
-        this.filter(e.pageX, e.clientY)
-        if (e.clientY < 100) {
-          window.scrollTo(0, scrollY - 6)
-        } else if (e.clientY > (document.body.clientHeight - 160)) {
-          window.scrollTo(0, scrollY + 6)
-        }
-      },
-      drop(event) {
-        func.clearHoverStatus()
-        this.resetTreeData()
-        this.isDraing = false;
-        if (this.targetId !== undefined) {
-          if (this.hightRowChange !== undefined) {
-            this.$nextTick(()=> {
-              var rowEle = document.querySelector("[tree-id='"+window.dragId+"']");
-              rowEle.style.backgroundColor = 'rgba(64,158,255,0.5)';
-              setTimeout(() => {
-                rowEle.style.backgroundColor = 'rgba(64,158,255,0)';
-              }, 2000);
-            })
-          }
-        }
-      },
-      // 查找匹配的行，处理拖拽样式
-      filter(x,y) {
-        
-        var rows = document.querySelectorAll('.tree-row')
-        this.targetId = undefined;
-        const dragRect = window.dragParentNode.getBoundingClientRect();
-        const dragW = dragRect.left + window.dragParentNode.clientWidth;
-        const dragH = dragRect.top + window.dragParentNode.clientHeight;
-        if (x >= dragRect.left && x <= dragW && y >= dragRect.top && y <= dragH) {
-          // 当前正在拖拽原始块不允许插入
-          return
-        }
-        let hoverBlock = undefined;
-        let targetId = undefined;
-        let whereInsert = '';
+    // 查找匹配的行，处理拖拽样式
+    filter(x, y) {
+      var rows = document.querySelectorAll(".tree-row");
+      this.targetId = undefined;
+      const dragRect = window.dragParentNode.getBoundingClientRect();
+      const dragW = dragRect.left + window.dragParentNode.clientWidth;
+      const dragH = dragRect.top + window.dragParentNode.clientHeight;
+      if (x >= dragRect.left && x <= dragW && y >= dragRect.top && y <= dragH) {
+        // 当前正在拖拽原始块不允许插入
+        return;
+      }
+      let hoverBlock = undefined;
+      let targetId = undefined;
+      let whereInsert = "";
 
-        for(let i=0; i < rows.length; i++) {
-          const row = rows[i];
-          const rect = row.getBoundingClientRect();
-          const rx = rect.left;
-          const ry = rect.top;
-          const rw = row.clientWidth;
-          const rh = row.clientHeight;
-          if (x > rx && x < (rx + rw) && y > ry && y < (ry + rh)) {
-            const diffY = y - ry
-            const pId = row.getAttribute('tree-p-id');
-            // 不允许改变层级结构，只能改变上下顺序逻辑
-            if ( this.onlySameLevelCanDrag !== undefined && pId !== window.dragPId) {
+      for (let i = 0; i < rows.length; i++) {
+        const row = rows[i];
+        const rect = row.getBoundingClientRect();
+        const rx = rect.left;
+        const ry = rect.top;
+        const rw = row.clientWidth;
+        const rh = row.clientHeight;
+        if (x > rx && x < rx + rw && y > ry && y < ry + rh) {
+          const diffY = y - ry;
+          const pId = row.getAttribute("tree-p-id");
+          // 不允许改变层级结构，只能改变上下顺序逻辑
+          if (this.onlySameLevelCanDrag !== undefined && pId !== window.dragPId) {
+            return;
+          }
+          targetId = row.getAttribute("tree-id");
+          hoverBlock = row.children[row.children.length - 1];
+          var rowHeight = row.offsetHeight;
+          if (diffY / rowHeight > 3 / 4) {
+            whereInsert = "bottom";
+          } else if (diffY / rowHeight > 1 / 4) {
+            if (this.onlySameLevelCanDrag !== undefined) {
+              // 不允许改变层级结构，只能改变上下顺序逻辑
               return;
             }
-            targetId = row.getAttribute('tree-id');
-            hoverBlock = row.children[row.children.length - 1]
-            var rowHeight = row.offsetHeight
-            if (diffY/rowHeight > 3/4) {
-              whereInsert = 'bottom'
-            } else if (diffY/rowHeight > 1/4) {
-              if ( this.onlySameLevelCanDrag !== undefined) {
-                // 不允许改变层级结构，只能改变上下顺序逻辑
-                return;
-              }
-              whereInsert = 'center'
-            } else {
-              whereInsert = 'top'
-            }
-            break;
+            whereInsert = "center";
+          } else {
+            whereInsert = "top";
           }
+          break;
         }
-        if (targetId === undefined) {
-          // 匹配不到清空上一个状态
+      }
+      if (targetId === undefined) {
+        // 匹配不到清空上一个状态
+        func.clearHoverStatus();
+        let whereInsert = "";
+        return;
+      }
+
+      let canDrag = true;
+      if (this.beforeDragOver) {
+        const curRow = this.getItemById(this.data.lists, window.dragId);
+        const targetRow = this.getItemById(this.data.lists, targetId);
+        canDrag = this.beforeDragOver(curRow, targetRow, whereInsert);
+      }
+      if (canDrag == false) return;
+      hoverBlock.style.display = "block";
+      var rowHeight = row.offsetHeight;
+      if (whereInsert == "bottom") {
+        if (hoverBlock.children[2].style.opacity !== "0.5") {
           func.clearHoverStatus();
-          let whereInsert = '';
-          return;
+          hoverBlock.children[2].style.opacity = 0.5;
         }
-        
-        let canDrag = true;
-        if (this.beforeDragOver) {
-          const curRow = this.getItemById(this.data.lists, window.dragId);
-          const targetRow = this.getItemById(this.data.lists, targetId);
-          canDrag = this.beforeDragOver(curRow, targetRow, whereInsert);
+      } else if (whereInsert == "center") {
+        if (hoverBlock.children[1].style.opacity !== "0.5") {
+          func.clearHoverStatus();
+          hoverBlock.children[1].style.opacity = 0.5;
         }
-        if (canDrag == false) return;
-        hoverBlock.style.display = 'block'
-        var rowHeight = row.offsetHeight
-        if (whereInsert == 'bottom') {
-          if (hoverBlock.children[2].style.opacity !== '0.5') {
-            func.clearHoverStatus()
-            hoverBlock.children[2].style.opacity = 0.5
-          }
-        } else if (whereInsert == 'center') {
-          if (hoverBlock.children[1].style.opacity !== '0.5') {
-            func.clearHoverStatus()
-            hoverBlock.children[1].style.opacity = 0.5
-          }
-        } else {
-          if (hoverBlock.children[0].style.opacity !== '0.5') {
-            func.clearHoverStatus()
-            hoverBlock.children[0].style.opacity = 0.5
-          }
+      } else {
+        if (hoverBlock.children[0].style.opacity !== "0.5") {
+          func.clearHoverStatus();
+          hoverBlock.children[0].style.opacity = 0.5;
         }
+      }
 
-        
-        this.targetId = targetId;
-        this.whereInsert = whereInsert;
-      },
-      resetTreeData() {
-        if (this.targetId === undefined) return
-        const listKey = this.custom_field.lists
-        const parentIdKey = this.custom_field.parent_id
-        const idKey = this.custom_field.id
-        const newList = [];
-        const curList = this.data.lists;
-        const _this = this;
-        let curDragItem = null;
-        let taggetItem = null;
-        function pushData(curList, needPushList) {
-          for( let i = 0; i < curList.length; i++) {
-            const item = curList[i]
-            var obj = func.deepClone(item);
-            obj[listKey] = []
-            if (_this.targetId == item[idKey]) {
-              curDragItem = _this.getItemById(_this.data.lists, window.dragId);
-              taggetItem =  _this.getItemById(_this.data.lists, _this.targetId);
-              if (_this.whereInsert === 'top') {
-                curDragItem[parentIdKey] = item[parentIdKey]
-                needPushList.push(curDragItem)
-                needPushList.push(obj)
-              } else if (_this.whereInsert === 'center'){
-                curDragItem[parentIdKey] = item[idKey];
-                obj.open = true;
-                obj[listKey].push(curDragItem)
-                needPushList.push(obj)
-                
-              } else {
-                curDragItem[parentIdKey] = item[parentIdKey]
-                needPushList.push(obj)
-                needPushList.push(curDragItem)
-              }
+      this.targetId = targetId;
+      this.whereInsert = whereInsert;
+    },
+    resetTreeData() {
+      if (this.targetId === undefined) return;
+      const listKey = this.custom_field.lists;
+      const parentIdKey = this.custom_field.parent_id;
+      const idKey = this.custom_field.id;
+      const newList = [];
+      const curList = this.data.lists;
+      const _this = this;
+      let curDragItem = null;
+      let taggetItem = null;
+      function pushData(curList, needPushList) {
+        for (let i = 0; i < curList.length; i++) {
+          const item = curList[i];
+          var obj = func.deepClone(item);
+          obj[listKey] = [];
+          if (_this.targetId == item[idKey]) {
+            curDragItem = _this.getItemById(_this.data.lists, window.dragId);
+            taggetItem = _this.getItemById(_this.data.lists, _this.targetId);
+            if (_this.whereInsert === "top") {
+              curDragItem[parentIdKey] = item[parentIdKey];
+              needPushList.push(curDragItem);
+              needPushList.push(obj);
+            } else if (_this.whereInsert === "center") {
+              curDragItem[parentIdKey] = item[idKey];
+              obj.open = true;
+              obj[listKey].push(curDragItem);
+              needPushList.push(obj);
             } else {
-              if (window.dragId != item[idKey]){
-                needPushList.push(obj)
-              }
+              curDragItem[parentIdKey] = item[parentIdKey];
+              needPushList.push(obj);
+              needPushList.push(curDragItem);
             }
-            if (item[listKey] && item[listKey].length) {
-              pushData(item[listKey], obj[listKey])
+          } else {
+            if (window.dragId != item[idKey]) {
+              needPushList.push(obj);
             }
           }
+          if (item[listKey] && item[listKey].length) {
+            pushData(item[listKey], obj[listKey]);
+          }
         }
-        pushData(curList, newList)
-        this.resetOrder(newList)
-        this.onDrag(newList, curDragItem, taggetItem, _this.whereInsert)
-        this.$emit("drag",newList, curDragItem, taggetItem, _this.whereInsert);
-      },
-      // 重置所有数据的顺序order
-      resetOrder(list) {
-        const listKey = this.custom_field.lists;
-        for (var i = 0; i< list.length; i++) {
-            list[i][this.custom_field.order] = i;
-            if (list[i][listKey] && list[i][listKey].length) {
-                this.resetOrder(list[i][listKey])
-            }
+      }
+      pushData(curList, newList);
+      this.resetOrder(newList);
+      this.onDrag(newList, curDragItem, taggetItem, _this.whereInsert);
+      this.$emit("drag", newList, curDragItem, taggetItem, _this.whereInsert);
+    },
+    // 重置所有数据的顺序order
+    resetOrder(list) {
+      const listKey = this.custom_field.lists;
+      for (var i = 0; i < list.length; i++) {
+        list[i][this.custom_field.order] = i;
+        if (list[i][listKey] && list[i][listKey].length) {
+          this.resetOrder(list[i][listKey]);
         }
-      },
-      // 根据id获取当前行
-      getItemById(lists, id) {
-        var curItem = null
-        const listKey = this.custom_field.lists
-        const idKey = this.custom_field.id
-        function getchild(curList) {
-          for( let i = 0; i < curList.length; i++) {
-            var item = curList[i]
-            if (item[idKey] == id) {
-              curItem = JSON.parse(JSON.stringify(item))
-              break
-            } else if (item[listKey] && item[listKey].length) {
-              getchild(item[listKey])
-            }
+      }
+    },
+    // 根据id获取当前行
+    getItemById(lists, id) {
+      var curItem = null;
+      const listKey = this.custom_field.lists;
+      const idKey = this.custom_field.id;
+      function getchild(curList) {
+        for (let i = 0; i < curList.length; i++) {
+          var item = curList[i];
+          if (item[idKey] == id) {
+            curItem = JSON.parse(JSON.stringify(item));
+            break;
+          } else if (item[listKey] && item[listKey].length) {
+            getchild(item[listKey]);
           }
         }
-        getchild(lists)
-        return curItem;
-      },
-      // 对外暴漏
-      DelById(id) {
-        const listKey = this.custom_field.lists
-        const orderKey = this.custom_field.order
-        const idKey = this.custom_field.id
-        const newList = [];
-        const curList = this.data.lists;       
-        function pushData(curList, needPushList) {
-          let order = 0;
-          for( let i = 0; i < curList.length; i++) {
-            const item = curList[i];
-            if (item[idKey] != id) {
-              var obj = func.deepClone(item);
-              obj[orderKey] = order;
-              obj[listKey] = [];
-              needPushList.push(obj);
-              order++;
-              if (item[listKey] && item[listKey].length) {
-                pushData(item[listKey], obj[listKey])
-              }
+      }
+      getchild(lists);
+      return curItem;
+    },
+    // 对外暴漏
+    DelById(id) {
+      const listKey = this.custom_field.lists;
+      const orderKey = this.custom_field.order;
+      const idKey = this.custom_field.id;
+      const newList = [];
+      const curList = this.data.lists;
+      function pushData(curList, needPushList) {
+        let order = 0;
+        for (let i = 0; i < curList.length; i++) {
+          const item = curList[i];
+          if (item[idKey] != id) {
+            var obj = func.deepClone(item);
+            obj[orderKey] = order;
+            obj[listKey] = [];
+            needPushList.push(obj);
+            order++;
+            if (item[listKey] && item[listKey].length) {
+              pushData(item[listKey], obj[listKey]);
             }
           }
         }
-        pushData(curList, newList)
-        return newList;
-      },
-      // 递归设置属性,只允许设置组件内置属性
-      deepSetAttr(key, val, list, ids) {
-        const listKey = this.custom_field.lists;
-        for (var i = 0; i< list.length; i++) {
-            if (ids !== undefined) {
-              if (ids.includes(list[i][this.custom_field['id']])) {
-                list[i][this.custom_field[key]] = val;
-              }
-            } else {
-              list[i][this.custom_field[key]] = val;
-            }
-            if (list[i][listKey] && list[i][listKey].length) {
-                this.deepSetAttr(key, val, list[i][listKey], ids)
-            }
-        }
-      },
-      ZipAll(id, deep=true) {
-        let list = func.deepClone(this.data.lists);
-        this.deepSetAttr('open', false, list);
-        this.data.lists = list;
-      },
-      OpenAll(id, deep=true) {
-        let list = func.deepClone(this.data.lists);
-        this.deepSetAttr('open', true, list);
-        this.data.lists = list;
-      },
-      GetLevelById(id) {
-        var row = this.$refs.table.querySelector('[tree-id="'+id+'"]');
-        var level = row.getAttribute('data-level') * 1;
-        return level
-      },
-      HighlightRow(id, isHighlight=true, deep=false) {
-        let list = func.deepClone(this.data.lists);
-        let ids = [id];
-        if (deep == true){
-          ids = ids.concat(this.GetChildIds(id, true));
-        }
-        this.deepSetAttr('highlight', isHighlight, list, ids);
-        this.data.lists = list
-      },
-      AddRow(pId, data) {
-        const deepList = func.deepClone(this.data.lists);
-        var _this = this;
-        function deep(list) {
-          const listKey = _this.custom_field.lists;
-          for (var i = 0; i< list.length; i++) {
-              if (list[i][_this.custom_field['id']] == pId) {
-                list[i][_this.custom_field['open']] = true;
-                var newRow = Object.assign({}, data);
-                newRow[_this.custom_field['parent_id']] = pId;
-                if (list[i][listKey]) {
-                  newRow[_this.custom_field['order']] = list[i][listKey].length;
-                  list[i][listKey].push(newRow)
-                } else {
-                  list[i][listKey] = [];
-                  newRow[_this.custom_field['order']] = 0;
-                  list[i][listKey].push(newRow)
-                }
-              }
-              if (list[i][listKey] && list[i][listKey].length) {
-                  deep(list[i][listKey])
-              }
+      }
+      pushData(curList, newList);
+      return newList;
+    },
+    // 递归设置属性,只允许设置组件内置属性
+    deepSetAttr(key, val, list, ids) {
+      const listKey = this.custom_field.lists;
+      for (var i = 0; i < list.length; i++) {
+        if (ids !== undefined) {
+          if (ids.includes(list[i][this.custom_field["id"]])) {
+            list[i][this.custom_field[key]] = val;
           }
+        } else {
+          list[i][this.custom_field[key]] = val;
         }
-        deep(deepList);
-        this.data.lists = deepList
-      },
-      EditRow(id, data) {
-        const deepList = func.deepClone(this.data.lists);
-        var _this = this;
-        function deep(list) {
-          const listKey = _this.custom_field.lists;
-          for (var i = 0; i< list.length; i++) {
-              if (list[i][_this.custom_field['id']] == id) {
-                var newRow = Object.assign({}, list[i], data);
-                console.log(2222, newRow)
-                list[i] = newRow;
-              }
-              if (list[i][listKey] && list[i][listKey].length) {
-                  deep(list[i][listKey])
-              }
-          }
+        if (list[i][listKey] && list[i][listKey].length) {
+          this.deepSetAttr(key, val, list[i][listKey], ids);
         }
-        deep(deepList);
-        console.log(deepList)
-        this.data.lists = deepList
-      },
-      GetChildIds(id, deep=true) {
-        let ids = []
-        const _this = this;
-        function getChilds(list, id) {
-          const listKey = _this.custom_field.lists;
-          for (var i = 0; i< list.length; i++) {
-            let currentPid = '';
-            let pid = list[i][_this.custom_field['parent_id']];
-            if (id == pid) {
-              currentPid = list[i][_this.custom_field['id']]
-              ids.push(currentPid)
+      }
+    },
+    ZipAll(id, deep = true) {
+      let list = func.deepClone(this.data.lists);
+      this.deepSetAttr("open", false, list);
+      this.data.lists = list;
+    },
+    OpenAll(id, deep = true) {
+      let list = func.deepClone(this.data.lists);
+      this.deepSetAttr("open", true, list);
+      this.data.lists = list;
+    },
+    GetLevelById(id) {
+      var row = this.$refs.table.querySelector('[tree-id="' + id + '"]');
+      var level = row.getAttribute("data-level") * 1;
+      return level;
+    },
+    HighlightRow(id, isHighlight = true, deep = false) {
+      let list = func.deepClone(this.data.lists);
+      let ids = [id];
+      if (deep == true) {
+        ids = ids.concat(this.GetChildIds(id, true));
+      }
+      this.deepSetAttr("highlight", isHighlight, list, ids);
+      this.data.lists = list;
+    },
+    AddRow(pId, data) {
+      const deepList = func.deepClone(this.data.lists);
+      var _this = this;
+      function deep(list) {
+        const listKey = _this.custom_field.lists;
+        for (var i = 0; i < list.length; i++) {
+          if (list[i][_this.custom_field["id"]] == pId) {
+            list[i][_this.custom_field["open"]] = true;
+            var newRow = Object.assign({}, data);
+            newRow[_this.custom_field["parent_id"]] = pId;
+            if (list[i][listKey]) {
+              newRow[_this.custom_field["order"]] = list[i][listKey].length;
+              list[i][listKey].push(newRow);
             } else {
-              currentPid = id
-            }
-            if (deep == true || id == currentPid) {
-              if (list[i][listKey] && list[i][listKey].length) {
-                getChilds(list[i][listKey], currentPid)
-              }
+              list[i][listKey] = [];
+              newRow[_this.custom_field["order"]] = 0;
+              list[i][listKey].push(newRow);
             }
           }
+          if (list[i][listKey] && list[i][listKey].length) {
+            deep(list[i][listKey]);
+          }
         }
-        getChilds(this.data.lists, id);
-        return ids
-      },
-      // 全选按钮事件
-      onCheckAll(evt, func) {
-        this.setAllCheckData(this.data.lists, !!evt.target.checked);
-        const checkedList = this.getCheckedList(this.data.lists)
-        func && func(checkedList)
-      },
-      // 单个CheckBox勾选触发
-      onSingleCheckChange() {
-        const checkedList = this.getCheckedList(this.data.lists)
-        this.onCheckChange && this.onCheckChange(checkedList)
-      },
-      // 根据flag批量处理数据
-      setAllCheckData (curList, flag) {
-        const listKey = this.custom_field.lists;
-        for( let i = 0; i < curList.length; i++) {
-          var item = curList[i];
-          this.$set(item, 'checked', flag);
-          if (item[listKey] && item[listKey].length) {
-            this.setAllCheckData(item[listKey], flag);
+      }
+      deep(deepList);
+      this.data.lists = deepList;
+    },
+    EditRow(id, data) {
+      const deepList = func.deepClone(this.data.lists);
+      var _this = this;
+      function deep(list) {
+        const listKey = _this.custom_field.lists;
+        for (var i = 0; i < list.length; i++) {
+          if (list[i][_this.custom_field["id"]] == id) {
+            var newRow = Object.assign({}, list[i], data);
+            console.log(2222, newRow);
+            list[i] = newRow;
+          }
+          if (list[i][listKey] && list[i][listKey].length) {
+            deep(list[i][listKey]);
           }
         }
-      },
-      // 获取所有选中的行
-      getCheckedList(lists) {
-        const listKey = this.custom_field.lists;
-        var checkedList = [];
-        const deepList = func.deepClone(lists)
-        function getchild(curList) {
-          for( let i = 0; i < curList.length; i++) {
-            var item = curList[i]
-            if (item.checked && item.isShowCheckbox != false) {
-              checkedList.push(item)
-            }
-            if (item[listKey] && item[listKey].length) {
-              getchild(item[listKey])
+      }
+      deep(deepList);
+      console.log(deepList);
+      this.data.lists = deepList;
+    },
+    GetChildIds(id, deep = true) {
+      let ids = [];
+      const _this = this;
+      function getChilds(list, id) {
+        const listKey = _this.custom_field.lists;
+        for (var i = 0; i < list.length; i++) {
+          let currentPid = "";
+          let pid = list[i][_this.custom_field["parent_id"]];
+          if (id == pid) {
+            currentPid = list[i][_this.custom_field["id"]];
+            ids.push(currentPid);
+          } else {
+            currentPid = id;
+          }
+          if (deep == true || id == currentPid) {
+            if (list[i][listKey] && list[i][listKey].length) {
+              getChilds(list[i][listKey], currentPid);
             }
           }
         }
-        getchild(deepList)
-        return checkedList;
-      },
-      mousedown(curIndex, e){
-        const startX = e.target.getBoundingClientRect().x;
-        const curColWidth = e.target.parentElement.offsetWidth;
-        this.mouse = {
-          status: 1,
-          startX,
-          curIndex,
-          curColWidth
-        }
       }
+      getChilds(this.data.lists, id);
+      return ids;
+    },
+    // 全选按钮事件
+    onCheckAll(evt, func) {
+      this.setAllCheckData(this.data.lists, !!evt.target.checked);
+      const checkedList = this.getCheckedList(this.data.lists);
+      func && func(checkedList);
     },
-    mounted() {
-      if(this.data.custom_field) {
-        this.custom_field = Object.assign({}, this.custom_field, this.data.custom_field)
+    // 单个CheckBox勾选触发
+    onSingleCheckChange() {
+      const checkedList = this.getCheckedList(this.data.lists);
+      this.onCheckChange && this.onCheckChange(checkedList);
+    },
+    // 根据flag批量处理数据
+    setAllCheckData(curList, flag) {
+      const listKey = this.custom_field.lists;
+      for (let i = 0; i < curList.length; i++) {
+        var item = curList[i];
+        this.$set(item, "checked", flag);
+        if (item[listKey] && item[listKey].length) {
+          this.setAllCheckData(item[listKey], flag);
+        }
       }
-      setTimeout(() => {
-        this.data.columns.map((item) => {
-          if(item.type == 'checkbox') {
-            this.onCheckChange = item.onChange;
-            this.isContainChildren = item.isContainChildren;
+    },
+    // 获取所有选中的行
+    getCheckedList(lists) {
+      const listKey = this.custom_field.lists;
+      var checkedList = [];
+      const deepList = func.deepClone(lists);
+      function getchild(curList) {
+        for (let i = 0; i < curList.length; i++) {
+          var item = curList[i];
+          if (item.checked && item.isShowCheckbox != false) {
+            checkedList.push(item);
           }
-        })
-      }, 100); 
-      window.addEventListener('mouseup', e => {
-        if (this.mouse.status) {
-          const curX = e.clientX;
-          var line = document.querySelector('.drag-line');
-          line.style.left = '-10000px';
-          this.mouse.status = 0;
-          const curWidth = this.mouse.curColWidth;
-          const subWidth = curX - this.mouse.startX;
-          const lastWidth = curWidth + subWidth;
-          const cols = document.querySelectorAll('.colIndex' + this.mouse.curIndex);
-          for (let index = 0; index < cols.length; index++) {
-            const element = cols[index];
-            element.style.width = lastWidth + 'px'; 
+          if (item[listKey] && item[listKey].length) {
+            getchild(item[listKey]);
           }
-          // 更新数据源
-          this.data.columns[this.mouse.curIndex].width = lastWidth;
         }
-      });     
-      window.addEventListener('mousemove', e => {
-        if (this.mouse.status) {
-          const endX = e.clientX;
-          const tableLeft = document.querySelector('.drag-tree-table').getBoundingClientRect().left;
-          var line = document.querySelector('.drag-line');
-          line.style.left = endX - tableLeft + 'px';
-        }
-      });     
+      }
+      getchild(deepList);
+      return checkedList;
+    },
+    mousedown(curIndex, e) {
+      const startX = e.target.getBoundingClientRect().x;
+      const curColWidth = e.target.parentElement.offsetWidth;
+      this.mouse = {
+        status: 1,
+        startX,
+        curIndex,
+        curColWidth,
+      };
+    },
+  },
+  mounted() {
+    if (this.data.custom_field) {
+      this.custom_field = Object.assign({}, this.custom_field, this.data.custom_field);
     }
-  }
+    setTimeout(() => {
+      this.data.columns.map((item) => {
+        if (item.type == "checkbox") {
+          this.onCheckChange = item.onChange;
+          this.isContainChildren = item.isContainChildren;
+        }
+      });
+    }, 100);
+    window.addEventListener("mouseup", (e) => {
+      if (this.mouse.status) {
+        const curX = e.clientX;
+        var line = document.querySelector(".drag-line");
+        line.style.left = "-10000px";
+        this.mouse.status = 0;
+        const curWidth = this.mouse.curColWidth;
+        const subWidth = curX - this.mouse.startX;
+        const lastWidth = curWidth + subWidth;
+        const cols = document.querySelectorAll(".colIndex" + this.mouse.curIndex);
+        for (let index = 0; index < cols.length; index++) {
+          const element = cols[index];
+          element.style.width = lastWidth + "px";
+        }
+        // 更新数据源
+        this.data.columns[this.mouse.curIndex].width = lastWidth;
+      }
+    });
+    window.addEventListener("mousemove", (e) => {
+      if (this.mouse.status) {
+        const endX = e.clientX;
+        const tableLeft = document
+          .querySelector(".drag-tree-table")
+          .getBoundingClientRect().left;
+        var line = document.querySelector(".drag-line");
+        line.style.left = endX - tableLeft + "px";
+      }
+    });
+  },
+};
 </script>
 
 <style lang="scss">
-  .drag-tree-table{
-    position: relative;
-    margin: 20px 0;
-    color: #606266;
-    font-size: 12px;
-    &.border{
-      border: 1px solid #eee;
-      border-right: none;
-    }
+.drag-tree-table {
+  position: relative;
+  margin: 20px 0;
+  color: #606266;
+  font-size: 12px;
+  &.border {
+    border: 1px solid #eee;
+    border-right: none;
   }
-  .drag-line{
-    position:absolute;
-    top: 0;
-    left: -1000px;
-    height: 100%;
-    width: 1px;
-    background: #ccc;
-  }
-  .drag-tree-table-header{
-    display: flex;
-    // padding: 15px 10px;
-    background: #f5f7fa;
-    height: 66px;
-    line-height: 36px;
-    box-sizing: border-box;
-    font-weight: 600;
-    .align-left{
-        text-align: left;
-    }
-    .align-right{
-        text-align: right;
-    }
-    .align-center{
-        text-align: center;
-    }
-    .tree-column{
-      user-select: none;
-    }
+}
+.drag-line {
+  position: absolute;
+  top: 0;
+  left: -1000px;
+  height: 100%;
+  width: 1px;
+  background: #ccc;
+}
+.drag-tree-table-header {
+  display: flex;
+  // padding: 15px 10px;
+  background: #f5f7fa;
+  height: 66px;
+  line-height: 36px;
+  box-sizing: border-box;
+  font-weight: 600;
+  .align-left {
+    text-align: left;
   }
-  .tree-icon-hidden{
-    visibility: hidden;
+  .align-right {
+    text-align: right;
   }
-  .is-draging .tree-row:hover{
-    background: transparent !important;
+  .align-center {
+    text-align: center;
   }
-  .tree-row{
-    background-color: rgba(64,158,255,0);
-    transition: background-color 0.5s linear;
+  .tree-column {
+    user-select: none;
   }
+}
+.tree-icon-hidden {
+  visibility: hidden;
+}
+.is-draging .tree-row:hover {
+  background: transparent !important;
+}
+.tree-row {
+  background-color: rgba(64, 158, 255, 0);
+  transition: background-color 0.5s linear;
+}
 </style>

From b4ee265f952d007a49081a4b19168e35c0890de8 Mon Sep 17 00:00:00 2001
From: wuyouhua <37034209+wuyouhuaz@users.noreply.github.com>
Date: Sat, 30 Oct 2021 14:25:06 +0800
Subject: [PATCH 3/5] add jsx template

---
 src/lib/row.vue | 505 ++++++++++++++++++++++++++----------------------
 1 file changed, 271 insertions(+), 234 deletions(-)

diff --git a/src/lib/row.vue b/src/lib/row.vue
index d235854..bb271ee 100644
--- a/src/lib/row.vue
+++ b/src/lib/row.vue
@@ -1,241 +1,278 @@
 <template>
-        <div class="tree-block" :draggable="!!isdraggable" @dragstart="dragstart($event)"
-            @dragend="dragend($event)">
-            <div class="tree-row"
-                @click="toggle" 
-                :data-level="depth"
-                :tree-id="model[custom_field.id]"
-                :tree-p-id="model[custom_field.parent_id]"
-                :class="{'highlight-row': model.highlight == true}"
-                v-bind:style="{backgroundColor: model.backgroundColor}"> 
-                <column
-                    v-for="(subItem, subIndex) in columns"
-                    v-bind:class="['align-' + subItem.align, 'colIndex' + subIndex]"
-                    :field="subItem.field"
-                    :width="subItem.width"
-                    :flex="subItem.flex"
-                    :border="border"
-                    :key="subIndex">
-                    <span v-if="subItem.type === 'selection'">
-                        <space :depth="depth"/>
-                        <span v-if = "model[custom_field.lists] && model[custom_field.lists].length" class="zip-icon" v-bind:class="[model[custom_field.open] ? 'arrow-bottom' : 'arrow-right']">
-                        </span>
-                        <span v-else class="zip-icon arrow-transparent">
-                        </span>
-                        <span v-if="subItem.formatter" v-html="subItem.formatter(model)"></span>
-                        <span v-else-if="subItem.field" v-html="model[subItem.field]"></span>
-                        <slot v-else name="selection" v-bind:row="model"></slot>
-                    </span>
-                    <span v-else-if="subItem.type === 'checkbox'">
-                      <input type="checkbox"
-                        v-if="model.isShowCheckbox !== false"
-                        :name="model[custom_field.id]"
-                        v-model="model[custom_field.checked]"
-                        class="checkbox action-item"
-                        @click.stop="onCheckboxClick($event, model)"/>
-                    </span>
-                    <span v-else-if="subItem.type === 'action'">
-                        <span v-if="subItem.actions">
-                            <a class="action-item"
-                                v-for="(acItem, acIndex) in subItem.actions"
-                                :key="acIndex"
-                                type="text" size="small"
-                                @click.stop.prevent="acItem.onclick(model)">
-                                <i :class="acItem.icon" v-html="acItem.formatter(model)"></i>
-                            </a>
-                        </span>
-                        <span v-else><slot name="action" v-bind:row="model"></slot></span>
-                    </span>
-                    <span v-else-if="subItem.type">
-                        <slot :name="subItem.type" v-bind:row="model"></slot>
-                    </span>
-                    <span v-else>
-                        <span v-if="subItem.formatter" v-html="subItem.formatter(model)"></span>
-                        <span v-else>{{model[subItem.field]}}</span>
-                    </span>
-                </column>
-                <div class="hover-model" style="display: none">
-                    <div class="hover-block prev-block">
-                        <i class="el-icon-caret-top"></i>
-                    </div>
-                    <div class="hover-block center-block">
-                        <i class="el-icon-caret-right"></i>
-                    </div>
-                    <div class="hover-block next-block">
-                        <i class="el-icon-caret-bottom"></i>
-                    </div>
-                </div>
-            </div>
-            <row 
-                v-show="model[custom_field.open]"
-                v-for="(item, index) in model[custom_field.lists]" 
-                :model="item"
-                :columns="columns"
-                :key="index" 
-                :isdraggable="isdraggable"
-                :border="border"
-                :depth="depth * 1 + 1"
-                :custom_field="custom_field"
-                :onCheck="onCheck"
-                :isContainChildren="isContainChildren"
-                v-if="isFolder">
-                    <template v-slot:selection="{row}">
-                    <slot name="selection" v-bind:row="row"></slot>
-                    </template>
-                    <template v-for="(subItem, subIndex) in columns"  v-slot:[subItem.type]="{row}">
-                    <slot :name="subItem.type" v-bind:row="row"></slot>
-                    </template>
-            </row>
+  <div
+    class="tree-block"
+    :draggable="!!isdraggable"
+    @dragstart="dragstart($event)"
+    @dragend="dragend($event)"
+  >
+    <div
+      class="tree-row"
+      @click="toggle"
+      :data-level="depth"
+      :tree-id="model[custom_field.id]"
+      :tree-p-id="model[custom_field.parent_id]"
+      :class="{ 'highlight-row': model.highlight == true }"
+      v-bind:style="{ backgroundColor: model.backgroundColor }"
+    >
+      <column
+        v-for="(subItem, subIndex) in columns"
+        v-bind:class="['align-' + subItem.align, 'colIndex' + subIndex]"
+        :field="subItem.field"
+        :width="subItem.width"
+        :flex="subItem.flex"
+        :border="border"
+        :key="subIndex"
+      >
+        <span v-if="subItem.type === 'selection'">
+          <space :depth="depth" />
+          <span
+            v-if="model[custom_field.lists] && model[custom_field.lists].length"
+            class="zip-icon"
+            v-bind:class="[model[custom_field.open] ? 'arrow-bottom' : 'arrow-right']"
+          >
+          </span>
+          <span v-else class="zip-icon arrow-transparent"> </span>
+          <span v-if="subItem.formatter" v-html="subItem.formatter(model)"></span>
+          <span v-else-if="subItem.field" v-html="model[subItem.field]"></span>
+          <slot v-else name="selection" v-bind:row="model"></slot>
+        </span>
+        <span v-else-if="subItem.type === 'checkbox'">
+          <input
+            type="checkbox"
+            v-if="model.isShowCheckbox !== false"
+            :name="model[custom_field.id]"
+            v-model="model[custom_field.checked]"
+            class="checkbox action-item"
+            @click.stop="onCheckboxClick($event, model)"
+          />
+        </span>
+        <span v-else-if="subItem.type === 'action'">
+          <span v-if="subItem.actions">
+            <a
+              class="action-item"
+              v-for="(acItem, acIndex) in subItem.actions"
+              :key="acIndex"
+              type="text"
+              size="small"
+              @click.stop.prevent="acItem.onclick(model)"
+            >
+              <i :class="acItem.icon" v-html="acItem.formatter(model)"></i>
+            </a>
+          </span>
+          <span v-else><slot name="action" v-bind:row="model"></slot></span>
+        </span>
+        <span v-else-if="subItem.type">
+          <slot :name="subItem.type" v-bind:row="model"></slot>
+        </span>
+        <span v-else>
+          <template v-if="subItem.render">
+            <column-render
+              :row="model"
+              :render="subItem.render"
+              :index="subIndex"
+            ></column-render>
+          </template>
+          <span v-else-if="subItem.formatter" v-html="subItem.formatter(model)"></span>
+          <span v-else>{{ model[subItem.field] }}</span>
+        </span>
+      </column>
+      <div class="hover-model" style="display: none">
+        <div class="hover-block prev-block">
+          <i class="el-icon-caret-top"></i>
         </div>
-        
+        <div class="hover-block center-block">
+          <i class="el-icon-caret-right"></i>
+        </div>
+        <div class="hover-block next-block">
+          <i class="el-icon-caret-bottom"></i>
+        </div>
+      </div>
+    </div>
+    <template v-if="isFolder">
+      <row
+        v-show="model[custom_field.open]"
+        v-for="(item, index) in model[custom_field.lists]"
+        :model="item"
+        :columns="columns"
+        :key="index"
+        :isdraggable="isdraggable"
+        :border="border"
+        :depth="depth * 1 + 1"
+        :custom_field="custom_field"
+        :onCheck="onCheck"
+        :isContainChildren="isContainChildren"
+      >
+        <template v-slot:selection="{ row }">
+          <slot name="selection" v-bind:row="row"></slot>
+        </template>
+        <template v-for="(subItem, subIndex) in columns" v-slot:[subItem.type]="{ row }">
+          <slot :name="subItem.type" v-bind:row="row" :index="subIndex"></slot>
+        </template>
+      </row>
     </template>
-    <script>
-    import column from './column.vue'
-    import space from './space.vue'
-    export default {
-      name: 'row',
-        props: ['model','depth','columns','isdraggable','border', 'custom_field','onCheck','isContainChildren'],
-        data() {
-            return {
-                open: false,
-                visibility: 'visible'
-            }
-        },
-        components: {
-          column,
-          space
-        },
-        computed: {
-            isFolder() {
-                return this.model[this.custom_field.lists] && this.model[this.custom_field.lists].length
-            }
-        },
-        methods: {
-            toggle() {
-                if(this.isFolder) {
-                    this.model[this.custom_field.open] = !this.model[this.custom_field.open];
-                    this.$forceUpdate()
-                }
-            },
-            dragstart(e) {
-                if (navigator.userAgent.indexOf('Firefox') >= 0) {
-                    // Firefox drag have a bug
-                    e.dataTransfer.setData('Text', this.id);
-                }
-                window.dragId = e.target.children[0].getAttribute('tree-id');
-                window.dragPId = e.target.children[0].getAttribute('tree-p-id');
-                window.dragParentNode = e.target;
-                e.target.style.opacity = 0.2
-            },
-            dragend(e) {
-              e.target.style.opacity = 1;
-            },
-            setAllCheckData (curList, flag) {
-              const listKey = this.custom_field.lists
-              for( let i = 0; i < curList.length; i++) {
-                var item = curList[i]
-                this.$set(item, 'checked', flag)
-                if (item[listKey] && item[listKey].length) {
-                  this.setAllCheckData(item[listKey], flag)
-                }
-              }
-            },
-            onCheckboxClick(evt, model) {
-              const list = model[this.custom_field.lists];
-              // 判断是否有子节点，如有需递归处理
-              if (list && this.isContainChildren) {
-                this.setAllCheckData([model] || [], !!evt.target.checked)
-              } else {
-                this.$set(model, 'checked', !!evt.target.checked)
-              }
-              this.onCheck && this.onCheck()
-            }
-        }
-    }
-    </script>
-  <style lang="scss">
-    .tree-block{
-      width: 100%;
-      background: rgba(255,255,255,0.8)
-    }
-    .tree-row{
-      position: relative;
-      display: flex;
-    //   padding: 10px 10px;
-      border-bottom: 1px solid #eee;
-      line-height: 32px;
-      &:hover{
-          background: #ecf5ff
-      }
-      &.highlight-row{
-          background: #ffe88c;
+  </div>
+</template>
+
+<script>
+import column from "./column.vue";
+import space from "./space.vue";
+import columnRender from "./column-render.js";
+
+export default {
+  name: "row",
+  props: [
+    "model",
+    "depth",
+    "columns",
+    "isdraggable",
+    "border",
+    "custom_field",
+    "onCheck",
+    "isContainChildren",
+  ],
+  data() {
+    return {
+      open: false,
+      visibility: "visible",
+    };
+  },
+  components: {
+    column,
+    space,
+    columnRender,
+  },
+  computed: {
+    isFolder() {
+      return (
+        this.model[this.custom_field.lists] && this.model[this.custom_field.lists].length
+      );
+    },
+  },
+  methods: {
+    toggle() {
+      if (this.isFolder) {
+        this.model[this.custom_field.open] = !this.model[this.custom_field.open];
+        this.$forceUpdate();
       }
-      .align-left{
-          text-align: left;
+    },
+    dragstart(e) {
+      if (navigator.userAgent.indexOf("Firefox") >= 0) {
+        // Firefox drag have a bug
+        e.dataTransfer.setData("Text", this.id);
       }
-      .align-right{
-          text-align: right;
+      window.dragId = e.target.children[0].getAttribute("tree-id");
+      window.dragPId = e.target.children[0].getAttribute("tree-p-id");
+      window.dragParentNode = e.target;
+      e.target.style.opacity = 0.2;
+    },
+    dragend(e) {
+      e.target.style.opacity = 1;
+    },
+    setAllCheckData(curList, flag) {
+      const listKey = this.custom_field.lists;
+      for (let i = 0; i < curList.length; i++) {
+        var item = curList[i];
+        this.$set(item, "checked", flag);
+        if (item[listKey] && item[listKey].length) {
+          this.setAllCheckData(item[listKey], flag);
+        }
       }
-      .align-center{
-          text-align: center;
+    },
+    onCheckboxClick(evt, model) {
+      const list = model[this.custom_field.lists];
+      // 判断是否有子节点，如有需递归处理
+      if (list && this.isContainChildren) {
+        this.setAllCheckData([model] || [], !!evt.target.checked);
+      } else {
+        this.$set(model, "checked", !!evt.target.checked);
       }
-    }
-    .hover-model{
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(255,255,255,0.6);
-    }
-    .hover-block{
-        display: flex;
-        opacity: 0.1;
-        transition: opacity 0.5s;
-        justify-content: center;
-        align-items: center;
-        i{
-            color: #FFF;
-        }
-    }
-    .prev-block{
-        height: 25%;
-        background: #a0c8f7;
-    }
-    .center-block{
-        height: 50%;
-        background: #a0c8f7;
-    }
-    .next-block{
-        height: 25%;
-        background: #a0c8f7;
-    }
-    .action-item{
-        color: #409eff;
-        cursor: pointer;
-        i{
-            font-style: normal;
-        }
-    }
-    .zip-icon{
-        display: inline-block;
-        width: 8px;
-        height: 8px;
-        vertical-align: middle;
-        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAf0lEQVQ4T7XT0Q2AMAhF0dvNdALdSEdzBB3BDXQD85LGRNMCauS7nAKBxMdIhfwemIAtYpeAEeiANoLUgAGYI4gFqAMX8QAXiQBCNFDNRBVdIgpUkSfADjT3KqLACmg/XrWw5J+Li+VVYCZrMBbgJluA+tXA3Hv45ZgiR3i+OQBeSyYRPEyeUAAAAABJRU5ErkJggg==') no-repeat center;
-        background-size: cover;
-    }
-    .arrow-transparent{
-        visibility: hidden;
-    }
-    .arrow-right{
-        
-    }
-    .arrow-bottom{
-        transform: rotate(90deg)
-    }
-    [draggable=true] {
-      -khtml-user-drag: element;
-    }
-    </style>
-    
\ No newline at end of file
+      this.onCheck && this.onCheck();
+    },
+  },
+};
+</script>
+<style lang="scss">
+.tree-block {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.8);
+}
+.tree-row {
+  position: relative;
+  display: flex;
+  //   padding: 10px 10px;
+  border-bottom: 1px solid #eee;
+  line-height: 32px;
+  &:hover {
+    background: #ecf5ff;
+  }
+  &.highlight-row {
+    background: #ffe88c;
+  }
+  .align-left {
+    text-align: left;
+  }
+  .align-right {
+    text-align: right;
+  }
+  .align-center {
+    text-align: center;
+  }
+}
+.hover-model {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.6);
+}
+.hover-block {
+  display: flex;
+  opacity: 0.1;
+  transition: opacity 0.5s;
+  justify-content: center;
+  align-items: center;
+  i {
+    color: #fff;
+  }
+}
+.prev-block {
+  height: 25%;
+  background: #a0c8f7;
+}
+.center-block {
+  height: 50%;
+  background: #a0c8f7;
+}
+.next-block {
+  height: 25%;
+  background: #a0c8f7;
+}
+.action-item {
+  color: #409eff;
+  cursor: pointer;
+  i {
+    font-style: normal;
+  }
+}
+.zip-icon {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  vertical-align: middle;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAf0lEQVQ4T7XT0Q2AMAhF0dvNdALdSEdzBB3BDXQD85LGRNMCauS7nAKBxMdIhfwemIAtYpeAEeiANoLUgAGYI4gFqAMX8QAXiQBCNFDNRBVdIgpUkSfADjT3KqLACmg/XrWw5J+Li+VVYCZrMBbgJluA+tXA3Hv45ZgiR3i+OQBeSyYRPEyeUAAAAABJRU5ErkJggg==")
+    no-repeat center;
+  background-size: cover;
+}
+.arrow-transparent {
+  visibility: hidden;
+}
+.arrow-right {
+}
+.arrow-bottom {
+  transform: rotate(90deg);
+}
+[draggable="true"] {
+  -khtml-user-drag: element;
+}
+</style>

From 86233cb903193a5c4a0addc7b9e89cce0bcca579 Mon Sep 17 00:00:00 2001
From: wuyouhua <37034209+wuyouhuaz@users.noreply.github.com>
Date: Sat, 30 Oct 2021 14:26:41 +0800
Subject: [PATCH 4/5] Create column-render.js

---
 src/lib/column-render.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/lib/column-render.js

diff --git a/src/lib/column-render.js b/src/lib/column-render.js
new file mode 100644
index 0000000..1c589a1
--- /dev/null
+++ b/src/lib/column-render.js
@@ -0,0 +1,16 @@
+export default {
+  name: "ColumnRender",
+  props: {
+    render: Function,
+    row: Object,
+    index: Number,
+  },
+
+  render: function () {
+    let _self = this;
+    return this.render.call(this._renderProxy, {
+      row: _self.row,
+      columnIndex: _self.index,
+    });
+  },
+};

From f7b14131dca3e7847bd242ffb867b6afc749d5d6 Mon Sep 17 00:00:00 2001
From: wuyouhua <37034209+wuyouhuaz@users.noreply.github.com>
Date: Sat, 30 Oct 2021 14:32:32 +0800
Subject: [PATCH 5/5] Update README.md

---
 README.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/README.md b/README.md
index 73210be..b056b68 100644
--- a/README.md
+++ b/README.md
@@ -175,6 +175,7 @@ width|否||Number|单元格宽度
 align|否|left|left,center,right|单元格对齐方式
 flex|否||Number|自动填充空余区域，遵循CSS的flex布局
 formatter|否||Function|自定义单元格显示内容,参数为当前行数据
+render|否||Function|(vue jsx)自定义单元格显示内容, 参数为当前行数据、列索引(row, index)，在未定义type使用render
 
 
 **columns数据事例**
@@ -199,6 +200,16 @@ formatter|否||Function|自定义单元格显示内容,参数为当前行数据
     width: 200,
     align: 'center'
   },
+  {
+    title: "JSX使用",
+    width: 200,
+    align: "center",
+    render: ({ row, columnIndex }) => {
+      console.log({ row });
+      console.log({ columnIndex });
+      return <span>{row.id}</span>;
+    },
+  },
   {
     title: '操作',
     type: 'action',