新增插件

src/components/common/tree-table/tree-item.vue

+<template>
+  <div :class="tdClass">
+    <span class="before-line" v-if="root !== 0 && nodes !== 1" :style="{'left':model.bLeft + 'px'}"></span>
+    <table>
+      <tr>
+        <td :colspan="colSpan">
+          <table>
+            <tr class="leve" :class="levelClass">
+              <td class="td1">
+                <div class="td-title" @dblclick="handlerExpand(model)">
+                  <span v-if="model.children.length > 0" class="tree-close" :class="{'tree-open':model.isExpand}"
+                    @click="handlerExpand(model)"></span>
+                  <a class="ellipsis">
+                    <i class="t-icon m-dep"></i>
+                    <span :title="model.ObjectName">{{model.ObjectName}}</span>
+                  </a>
+                </div>
+              </td>
+              <td class="td2">
+                {{model.ResponsibleName}}
+              </td>
+              <td class="td3">{{model.CreateTime|formatDate}}</td>
+              <td class="td4">
+                <span :title="model.Experience" class="ellipsis">{{model.Experience}}</span>
+              </td>
+              <td class="td5">{{model.BelongTo}}天</td>
+              <td class="td6">
+                <a class="reset" href="javascript:;" @click="actionFunc(model)">编辑</a>
+                <i class="line"></i>
+                <a class="delete" href="javascript:;" @click="deleteFunc(model)">删除</a>
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+    <div v-show="model.isExpand" class="other-node" :class="otherNodeClass">
+      <tree-item v-for="(m, i) in model.children" :key="('child_node'+i)" :num='i' :root="1"
+        @actionFunc="actionFunc" @deleteFunc="deleteFunc" @handlerExpand="handlerExpand"
+        :nodes.sync='model.children.length' :trees.sync='trees' :model.sync="m">
+      </tree-item>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'treeItem',
+    props: {
+      //默认数据
+      model: {
+        type: Object,
+      },
+      num: {
+        type: Number,
+        default: 0
+      },
+      nodes: {
+        type: Number,
+      },
+      root: {
+        type: Number,
+      },
+      root: {
+        type: Object,
+      },
+    },
+    data() {
+      return {
+        parentNodeModel: null
+      }
+    },
+    computed: {
+      colSpan() {
+        return this.root === 0 ? '' : 6
+      },
+      tdClass() {
+        return this.root === 0 ? 'td-border' : 'not-border'
+      },
+      levelClass() {
+        return this.model ? 'leve-' + this.model.level : ''
+      },
+      childNodeClass() {
+        return this.root === 0 ? '' : 'child-node'
+      },
+      otherNodeClass() {
+        return this.model ? 'other-node-' + this.model.level : ''
+      }
+    },
+    watch: {
+
+    },
+    methods: {
+      getParentNode(m) {
+        // 查找点击的子节点
+        var recurFunc = (data, list) => {
+          data.forEach((l) => {
+            if (l.id === m.id) this.parentNodeModel = list
+            if (l.children) {
+              recurFunc(l.children, l)
+            }
+          })
+        }
+        recurFunc(this.trees, this.trees)
+      },
+      handlerExpand(m) {
+        this.$emit('handlerExpand', m)
+      },
+      deleteFunc(m) {
+        this.$emit('deleteFunc', m)
+      },
+      actionFunc(m) {
+        this.$emit('actionFunc', m)
+      }
+    },
+    filters: {
+      formatDate: function (date) {
+        // 后期自己格式化
+        return date //Utility.formatDate(date, 'yyyy/MM/dd')
+      }
+    }
+  }
+
+</script>