update

src/components/TreeTable/eval.js

@@ -3,8 +3,8 @@ import Vue from 'vue'
 // Flattened array
 export default function treeToArray(data, children = 'children') {
   let tmp = []
-  data.forEach((item, idx) => {
+  data.forEach((item, index) => {
-    Vue.set(item, '_index', idx)
+    Vue.set(item, '_index', index)
     tmp.push(item)
     if (item[children] && item[children].length > 0) {
       const res = treeToArray(item[children], children)
@@ -14,8 +14,10 @@ export default function treeToArray(data, children = 'children') {
   return tmp
 }
 
-export function addAttrs(data, { parent = null, level = 0, expand = false, children = 'children', show = true, select = false } = {}) {
+export function addAttrs(data, { parent = null, preIndex = false, level = 0, expand = false, children = 'children', show = true, select = false } = {}) {
-  data.forEach(item => {
+  data.forEach((item, index) => {
+    const _id = (preIndex ? `${preIndex}-${index}` : index) + ''
+    Vue.set(item, '_id', _id)
     Vue.set(item, '_level', level)
     Vue.set(item, '_expand', expand)
     Vue.set(item, '_parent', parent)
@@ -26,6 +28,7 @@ export function addAttrs(data, { parent = null, level = 0, expand = false, child
         parent: item,
         level: level + 1,
         expand,
+        preIndex: _id,
         children,
         status,
         select

src/components/TreeTable/index.vue

@@ -1,6 +1,7 @@
 <template>
   <el-table :data="tableData" :row-style="showRow" v-bind="$attrs">
     <slot name="selection" />
+    <slot name="pre-column" />
     <el-table-column
       v-for="item in columns"
       :label="item.label"
@@ -90,22 +91,47 @@ export default {
           return
         }
         console.log('render')
-        if (this.guard > 0) {
+        // if (this.guard > 0) {
-          addAttrs(val, {
+        addAttrs(val, {
-            expand: this.defaultExpandAll,
+          expand: this.defaultExpandAll,
-            children: this.defaultChildren
+          children: this.defaultChildren
-          })
+        })
-          this.guard--
+        this.guard--
-        }
+        // }
 
         const retval = treeToArray(val, this.defaultChildren)
         this.tableData = retval
+        console.log(retval)
       },
-      // deep: true,
+      deep: true,
       immediate: true
     }
   },
   methods: {
+    addBrother(row, data) {
+      if (row._parent) {
+        row._parent.children.push(data)
+      } else {
+        this.data.push(data)
+      }
+    },
+    addChild(row, data) {
+      if (!row.children) {
+        this.$set(row, 'children', [])
+      }
+      row.children.push(data)
+    },
+    delete(row) {
+      const { _index, _parent } = row
+      if (_parent) {
+        _parent.children.splice(_index, 1)
+      } else {
+        this.data.splice(_index, 1)
+      }
+    },
+    getData() {
+      return this.tableData
+    },
     showRow: function({ row }) {
       const parent = row._parent
       const show = parent ? parent._expand && parent._show : true

src/views/table/treeTable/customTreeTable.vue

@@ -7,26 +7,31 @@
           target="_blank"
         >Documentation</a>
       </el-tag>
-      <TreeTable
+
-        :data="menus"
+      <tree-table
+        ref="TreeTable"
+        :data="tableData"
         :default-expand-all="true"
         :columns="columns"
         border
-        default-children="sub_button"
+        default-children="children"
       >
+
         <template slot="selection">
-          <el-table-column type="selection" width="55"/>
+          <el-table-column type="selection" align="center" width="55"/>
         </template>
-        <template slot="__expand">
+
+        <template slot="pre-column">
           <el-table-column type="expand" width="55">
             <template>
               <el-tag type="info">
-                支持element-ui 的扩展和多选框事件哦
+                Here is just a placeholder slot, you can display anything.
               </el-tag>
             </template>
           </el-table-column>
         </template>
-        <template slot="name" slot-scope="{scope}">
+
+        <!-- <template slot="name" slot-scope="{scope}">
           <span :style="{'padding-left':+scope.row.__level*50 + 'px'} ">
             <a
               v-if="scope.row.type === 'view'"
@@ -35,85 +40,65 @@
             >{{ scope.row.name }}</a>
             <span v-else>{{ scope.row.name }}</span>
           </span>
-        </template>
+        </template> -->
-        <template slot="__opt_parent" slot-scope="{scope}">
+        <template slot="append" slot-scope="{scope}">
           <el-button
-            v-if="scope.row.__level === 0"
             size="mini"
             type="primary"
-            @click="addMenuItem(defaultMenu,1,scope.row.__index)"
+            @click="addMenuItem(scope.row,'brother',scope)"
-          >添加子菜单</el-button>
+          >Append Brother
+          </el-button>
+          <el-button
+            size="mini"
+            type="primary"
+            @click="addMenuItem(scope.row,'children')"
+          >Append Child
+          </el-button>
         </template>
-        <template slot="__opt" slot-scope="{scope}">
+        <template slot="operation" slot-scope="{scope}">
-          <el-button size="mini" type="primary" @click="editMenuItem(scope.row,'update')">编辑</el-button>
+          <el-button size="mini" type="success" @click="editItem(scope.row)">Edit</el-button>
-          <el-button size="mini" type="danger" @click="deleteMenuItem(scope.row)">删除</el-button>
+          <el-button size="mini" type="danger" @click="deleteItem(scope.row)">Delete</el-button>
         </template>
-      </TreeTable>
+      </tree-table>
     </div>
-    <el-dialog :visible.sync="dialogFormVisible" title="编辑菜单">
+
-      <el-form ref="menuForm" :model="menu" :rules="rules" label-width="100px" style="width:600px">
+    <el-dialog :visible.sync="dialogFormVisible" title="Edit">
-        <el-form-item label="type">
+      <el-form :model="tempItem" label-width="100px" style="width:600px">
-          <el-select v-model="menu.type" clearable placeholder="请选择">
+        <el-form-item label="Name">
-            <el-option label="view" value="view"/>
+          <el-input v-model.trim="tempItem.name" placeholder="Name"/>
-            <el-option label="click" value="click"/>
-            <el-option label="miniprogram" value="miniprogram"/>
-          </el-select>
-        </el-form-item>
-        <template v-if="menu.type==='click'">
-          <el-form-item label="key">
-            <el-input v-model.trim="menu.key" placeholder="请输入key"/>
-          </el-form-item>
-        </template>
-        <template v-else>
-          <el-form-item label="url">
-            <el-input v-model.trim="menu.url" placeholder="请输入url"/>
-          </el-form-item>
-        </template>
-        <el-form-item label="名称">
-          <el-input v-model.trim="menu.name" placeholder="请输入name"/>
-        </el-form-item>
-        <el-form-item label="appid">
-          <el-input v-model.trim="menu.appid" placeholder="请输入appid"/>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="clickToUpsertMenuItem('menuForm')">确定</el-button>
         </el-form-item>
       </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="updateItem">Confirm</el-button>
+      </span>
     </el-dialog>
+
   </div>
 </template>
 
 <script>
-const defaultMenu = {
-  name: undefined,
-  appid: Math.random() * 10000,
-  key: undefined,
-  page_path: undefined,
-  type: undefined,
-  url: undefined
-}
 
 import TreeTable from '@/components/TreeTable'
 import { data } from './data.js'
+
 export default {
-  components: {
+  components: { TreeTable },
-    TreeTable
-  },
   data() {
     return {
-      defaultMenu,
+      tableData: [],
-      menus: [],
+      tempItem: {},
-      menu: { ...defaultMenu },
-      rules: {},
       dialogFormVisible: false,
       columns: [
+        // {
+        //   label: '',
+        //   // key: '__sperad'
+
+        // },
         {
-          label: '',
+          label: 'Name',
-          key: '__sperad'
+          key: 'name',
-        },
+          expand: true
-        {
-          label: 'name',
-          key: 'name'
         },
         {
           label: 'type',
@@ -128,123 +113,60 @@ export default {
           key: 'key'
         },
         {
-          label: '操作',
+          label: 'Append',
-          key: '__opt_parent'
+          key: 'append'
         },
         {
-          label: '操作',
+          label: 'Operation',
-          key: '__opt',
+          key: 'operation',
           width: '160px'
         }
       ]
     }
   },
   computed: {
-    canAddMenuItem() {
+
-      return this.menus.length < 3
-    }
   },
   created() {
-    this.getWechatMenu()
+    this.getData()
   },
   methods: {
-    getWechatMenu() {
+    getData() {
-      this.menus = data.button
+      this.tableData = data
     },
-    // 如果你想对原来的数据进行更新的化
+    editItem(row) {
-    updateMenu() {
+      this.tempItem = Object.assign({}, row)
-      const button = JSON.parse(
-        JSON.stringify(this.menus, [
-          'name',
-          'type',
-          'appid',
-          'url',
-          'key',
-          'media_id',
-          'page_path',
-          'sub_button'
-        ])
-      )
-      // 更新数据
-      console.log('button', button)
-      // upsertWechatMenu({ button }).then(() => {
-      //   this.$message.success('更新成功')
-      // })
-    },
-    clickToUpsertMenuItem(formName) {
-      this.$refs[formName].validate(valid => {
-        if (valid) {
-          this.updateMenuItem(this.menu)
-          this.dialogFormVisible = false
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    },
-    editMenuItem(menuItem) {
       this.dialogFormVisible = true
-      this.menu = { ...menuItem }
     },
-    // 增加单条数据，需要将其属性也手动添加上
+    updateItem() {
-    // 都是纯手动添加，后续会添加个方法
+      const data = this.$refs.TreeTable.getData()
-    addMenuItem(menuItem, level, index) {
+      const { _id } = this.tempItem
-      if (level === 0) {
+
-        this.menus.push({
+      let index
-          ...menuItem,
+      for (let i = 0; i < data.length; i++) {
-          sub_button: [],
+        if (data[i]._id === _id) {
-          __level: 0,
+          index = i
-          __expand: true,
+          break
-          __parent: null,
+        }
-          __show: true,
-          __select: false
-        })
       }
-      if (level === 1) {
+
-        this.menus[index]['sub_button'].push({
+      data.splice(index, 1, Object.assign({}, this.tempItem))
-          ...menuItem,
+      this.dialogFormVisible = false
-          __level: 1,
+    },
-          __expand: true,
+    addMenuItem(row, type, a) {
-          __parent: this.menus[index],
+      if (type === 'children') {
-          __show: true,
+        this.$refs.TreeTable.addChild(row, { name: 'child' })
-          __select: false
+      }
-        })
+
+      if (type === 'brother') {
+        this.$refs.TreeTable.addBrother(row, { name: 'brother' })
       }
     },
-    deleteMenuItem(menuItem) {
+    deleteItem(row) {
-      if (menuItem.__level === 0) {
+      this.$refs.TreeTable.delete(row)
-        this.menus.splice(menuItem.__index, 1)
-      }
-      if (menuItem.__level === 1) {
-        this.menus[menuItem.__parent.__index]['sub_button'].splice(
-          menuItem.__index,
-          1
-        )
-      }
     },
     updateMenuItem(menuItem) {
-      if (menuItem.type === 'view') {
+
-        if (!menuItem.url) {
-          this.$message.error('请输入url')
-          return
-        }
-      }
-      if (menuItem.type === 'click') {
-        if (!menuItem.key) {
-          this.$message.error('请输入key')
-          return
-        }
-      }
-      if (menuItem.__level === 0) {
-        this.menus.splice(menuItem.__index, 1, menuItem)
-      }
-      if (menuItem.__level === 1) {
-        this.menus[menuItem.__parent.__index]['sub_button'].splice(
-          menuItem.__index,
-          1,
-          menuItem
-        )
-      }
     }
   }
 }

src/views/table/treeTable/data.js

@@ -1,87 +1,31 @@
-export const data = {
+export const data = [
-  button: [
+  {
-    {
+    name: '1',
-      type: '',
+    children: [
-      name: '账号绑定',
+      {
-      key: '',
+        name: '1-1'
-      url: '',
+      },
-      media_id: '',
+      {
-      appid: '',
+        name: '1-2'
-      page_path: '',
+      }
-      sub_button: [
+    ]
-        {
+  },
-          type: 'view',
+  {
-          name: '推送开关',
+    name: '2',
-          key: '',
+    children: [
-          url: 'https://activity.wallstreetcn.com/wechat-notice/#/',
+      {
-          media_id: '',
+        name: '2-1'
-          appid: '',
+      },
-          page_path: '',
+      {
-          sub_button: []
+        name: '2-2'
-        },
+      },
-        {
+      {
-          type: 'view',
+        name: '2-3'
-          name: '绑定账号',
+      }
-          key: '',
+    ]
-          url: 'https://m.wallstreetcn.com/bind/wechat',
+  },
-          media_id: '',
+  {
-          appid: '',
+    name: '3'
-          page_path: '',
+  }
-          sub_button: []
+]
-        }
+
-      ]
-    },
-    {
-      type: '',
-      name: '兑礼品卡',
-      key: '',
-      url: '',
-      media_id: '',
-      appid: '',
-      page_path: '',
-      sub_button: [
-        {
-          type: 'view',
-          name: '兑礼品卡',
-          key: '',
-          url: 'https://activity.wallstreetcn.com/giftredemption/?from=hrjsxk',
-          media_id: '',
-          appid: '',
-          page_path: '',
-          sub_button: []
-        },
-        {
-          type: 'view',
-          name: '下载APP',
-          key: '',
-          url:
-            'https://activity.wallstreetcn.com/newpackaget/receive.html?ngsem=111',
-          media_id: '',
-          appid: '',
-          page_path: '',
-          sub_button: []
-        },
-        {
-          type: 'view',
-          name: '在线客服',
-          key: '',
-          url: 'https://wdl.wallstreetcn.com/WechatIMG26.jpeg',
-          media_id: '',
-          appid: '',
-          page_path: '',
-          sub_button: []
-        }
-      ]
-    },
-    {
-      type: 'view',
-      name: '关注我',
-      key: '',
-      url: 'https://liugq5713.github.io',
-      media_id: '',
-      appid: '',
-      page_path: '',
-      sub_button: []
-    }
-  ]
-}