add element ui table expand and selcet by slot

src/components/TreeTable/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <el-table :data="res" :row-style="isShowRow" border style="width: 100%">
+  <el-table :data="res" :row-style="isShowRow" v-bind="$attrs">
+    <!--通过插槽支持element-ui原生的表格复选框 http://element-cn.eleme.io/#/zh-CN/component/table#duo-xuan -->
+    <slot name="__selection"/>
+    <!--通过插槽支持element-ui原生的表格展开行 http://element-cn.eleme.io/#/zh-CN/component/table#zhan-kai-xing -->
+    <slot name="__expand"/>
     <el-table-column
       v-for="item in columns"
       :label="item.label"
@@ -17,12 +21,16 @@
             >
               <i
                 v-if="!scope.row.__expand"
-                :style="{'padding-left':+scope.row.__level*50 + 'px'} "
+                :style="{'padding-left':+scope.row.__level*spreadOffset + 'px'} "
                 class="el-icon-plus"
               />
-              <i v-else :style="{'padding-left':+scope.row.__level*50 + 'px'} " class="el-icon-minus"/>
+              <i v-else :style="{'padding-left':+scope.row.__level*spreadOffset + 'px'} " class="el-icon-minus"/>
             </span>
           </template>
+          <template v-if="item.key==='__checkbox'">
+            <el-checkbox v-if="scope.row[defaultChildren]&&scope.row[defaultChildren].length>0" :style="{'padding-left':+scope.row.__level*checkboxOffset + 'px'} " :indeterminate="scope.row.__select" v-model="scope.row.__select" @change="handleCheckAllChange(scope.row)"/>
+            <el-checkbox v-else :style="{'padding-left':+scope.row.__level*checkboxOffset + 'px'} " v-model="scope.row.__select" @change="handleCheckAllChange(scope.row)"/>
+          </template>
           {{ scope.row[item.key] }}
         </slot>
       </template>
@@ -45,11 +53,26 @@ export default {
       default: () => []
     },
 /* eslint-disable */
-    evalFunc: {
+    renderContent: {
       type: Function
     },
-    evalArgs: Object
+  /* eslint-enable */
-    /* eslint-enable */
+    defaultExpandAll: {
+      type: Boolean,
+      default: false
+    },
+    defaultChildren: {
+      type: String,
+      default: 'children'
+    },
+    spreadOffset: {
+      type: Number,
+      default: 50
+    },
+    checkboxOffset: {
+      type: Number,
+      default: 50
+    }
   },
   computed: {
     // 格式化数据源
@@ -60,11 +83,9 @@ export default {
       } else {
         tmp = this.data
       }
-      const func = this.evalFunc || treeToArray
+      const func = this.renderContent || treeToArray
-      const args = { ...this.evalArgs }
+      return func(tmp, { expand: this.defaultExpandAll, children: this.defaultChildren })
-      return func(tmp, args)
     },
-
     // 自定义的children字段
     children() {
       return this.evalArgs && this.evalArgs.children || 'children'
@@ -86,17 +107,21 @@ export default {
       const record = this.res[trIndex]
       const expand = !record.__expand
       record.__expand = expand
-      // 收起是全部收起，展开是一级一级展开
-      // if (!expand) {
-      //   this.expandRecursion(record, expand)
-      // }
     },
-    expandRecursion(row, expand) {
+    handleCheckAllChange(row) {
-      const children = row[this.children]
+      this.selcetRecursion(row, row.__select, this.defaultChildren)
-      if (children && children.length > 0) {
+      this.isIndeterminate = row.__select
-        children.map(child => {
+    },
-          child.__expand = expand
+    selcetRecursion(row, select, children = 'children') {
-          this.expandRecursion(child, expand)
+      if (select) {
+        this.$set(row, '__expand', true)
+        this.$set(row, '__show', true)
+      }
+      const sub_item = row[children]
+      if (sub_item && sub_item.length > 0) {
+        sub_item.map(child => {
+          child.__select = select
+          this.selcetRecursion(child, select, children)
         })
       }
     }

src/components/TreeTable/readme.md

@@ -57,6 +57,8 @@ const data = [
 const columns = [
   // 建议第一列做展开收缩操作
   { label: '', key: '__spread', width: '200' },
+  // 如果添加复选框
+  { label: '', key: '__checkbox', width: '200' },
   {
     value: string,
     text: string,

src/views/table/treeTable/customTreeTable.vue

@@ -5,11 +5,24 @@
       <a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
     </el-tag>
 
-    <tree-table :data="data" :columns="columns" :eval-args="args" border>
+    <tree-table :data="data" :columns="columns" :default-expand-all="true" border style="width: 100%" default-children="son" >
-      <template slot="__checkbox" slot-scope="{scope}">
+      <template slot="__selection" >
-        <!--  默认leaval 为 0 的时候，提供全选操作 -->
+        <el-table-column
-        <el-checkbox v-if="scope.row[children]&&scope.row[children].length>0" :style="{'padding-left':+scope.row.__level*50 + 'px'} " :indeterminate="scope.row.__select" v-model="scope.row.__select" @change="handleCheckAllChange(scope.row)">全</el-checkbox>
+          type="selection"
-        <el-checkbox v-else :style="{'padding-left':+scope.row.__level*50 + 'px'} " v-model="scope.row.__select" @change="handleCheckAllChange(scope.row)">选</el-checkbox>
+          width="55"/>
+      </template>
+
+      <template slot="__expand">
+        <el-table-column
+          type="expand"
+          width="55">
+          <template slot-scope="props">
+            <el-button size="mini" type="danger" @click="handleExpandClick(props)">点我</el-button>
+          </template>
+        </el-table-column>
+      </template>
+      <template slot="__opt" slot-scope="{scope}">
+        <el-button size="mini" type="primary" @click="handleClick(scope)">点我</el-button>
       </template>
     </tree-table>
   </div>
@@ -30,11 +43,6 @@ export default {
           key: '__checkbox',
           width: 400
         },
-        {
-          label: '',
-          key: '__sperad',
-          width: 400
-        },
         {
           label: 'ID',
           key: 'id'
@@ -49,8 +57,8 @@ export default {
           key: 'timeLine'
         },
         {
-          label: '备注',
+          label: '操作',
-          key: 'comment'
+          key: '__opt'
         }
       ],
       data:
@@ -129,31 +137,13 @@ export default {
           ]
         },
       args: { children: 'son' },
-      isIndeterminate: false
+      isIndeterminate: false,
-    }
+      children: 'son'
-  },
-  computed: {
-    children() {
-      return this.args && this.args.children || 'children'
     }
   },
   methods: {
-    handleCheckAllChange(row) {
+    handleClick(scope) {
-      this.selcetRecursion(row, row.__select, this.children)
+      this.$message.success(scope.row.event)
-      this.isIndeterminate = row.__select
-    },
-    selcetRecursion(row, select, children = 'children') {
-      if (select) {
-        this.$set(row, '__expand', true)
-        this.$set(row, '__show', true)
-      }
-      const sub_item = row[children]
-      if (sub_item && sub_item.length > 0) {
-        sub_item.map(child => {
-          child.__select = select
-          this.selcetRecursion(child, select, children)
-        })
-      }
     }
   }
 }