feat(header): 完善标题栏配置

Author: xrr2016

README.md

@@ -542,7 +542,7 @@ allowDrop(dragNode, dropNode, dropType) {
 | customQuery   | 外部的注入额外的查询参数, 键值对形式                                                                                                                                                                                                                       | Object   | -                 |
 | extraParams   | 新增/修改提交时注入额外的参数                                                                                                                                                                                                                              | Object   | -                 |
 | hasOperation  | 是否有操作列                                                                                                                                                                                                                                               | Boolean  | true              |
-| hasTitle      | 是否有标题栏                                                                                                                                                                                                                                               | Boolean  | false             |
+| hasHeader     | 是否有标题栏                                                                                                                                                                                                                                               | Boolean  | false             |
 | hasDelete     | 是否有删除按钮                                                                                                                                                                                                                                             | Boolean  | true              |
 | hasNew        | 是否有新增按钮                                                                                                                                                                                                                                             | Boolean  | true              |
 | hasEdit       | 是否有编辑按钮                                                                                                                                                                                                                                             | Boolean  | true              |

docs/has-title.md docs/has-header.mddocs/has-title.md renamed to docs/has-header.md

@@ -2,16 +2,19 @@
 
 ```vue
 <template>
-  <el-data-tree v-bind="$data" :url="getUrl" :onNew="onNew" :onEdit="onEdit" :onDelete="onDelete" />
+  <el-data-tree v-bind="$data" :url="getUrl" :onNew="onNew" :onEdit="onEdit" :onDelete="onDelete">
+    <span slot="title">这是 slot 标题</span>
+    <el-button type="primary" size="mini" slot="header-new-btn">添加组织</el-button>
+    <el-button type="primary" size="mini" slot="header-extra-block">其他按钮</el-button>
+  </el-data-tree>
 </template>
 
 <script>
 export default {
   data() {
     return {
       dataPath: 'data.payload',
-	  hasTitle: true,
-	  title: "这是一个标题",
+	    hasHeader: true,
       form: [
         {
           $id: 'name',

src/el-data-tree.vue

@@ -1,11 +1,27 @@
 <template>
   <div class="el-data-tree" :class="{'has-border': hasBorder }">
-    <slot name="title" v-if="hasTitle">
-      <p class="data-tree-title">
-        {{ title }}
-        <i class="el-icon-plus" @click="onDefaultNew"></i>
-      </p>
-    </slot>
+    <header class="header" v-if="hasTitle || hasHeader">
+      <div class="header-left">
+        <!--@slot 标题 -->
+        <slot name="title">
+          <p class="header-title">{{ title }}</p>
+        </slot>
+      </div>
+      <div class="header-right">
+        <span class="header-new-btn" @click="onDefaultNew">
+          <!--@slot 头部新增按钮 -->
+          <slot name="header-new-btn">
+            <el-button type="text" size="mini">
+              <i class="el-icon-plus"></i>
+            </el-button>
+          </slot>
+        </span>
+        <span class="header-extra-block">
+          <!--@slot 标题栏右边的额外区域-->
+          <slot name="header-extra-block"></slot>
+        </span>
+      </div>
+    </header>
 
     <section class="body">
       <el-input
@@ -245,12 +261,20 @@ export default {
       default: true
     },
     /**
-     * 是否有标题栏
+     * @deprecated
+     * 是否有标题栏，建议使用 hasHeader
      */
     hasTitle: {
       type: Boolean,
       default: false
     },
+    /**
+     * 是否有标题栏
+     */
+    hasHeader: {
+      type: Boolean,
+      default: false
+    },
     /**
      * 是否有删除按钮
      */
@@ -657,8 +681,36 @@ $delete-color = #E24156;
     }
   }
 
+  .header {
+    display: flex;
+    align-items: center;
+    padding: 18px 20px;
+    border-bottom: 1px solid #ebeef5;
+
+    .header-left, .header-right {
+      flex: 1;
+      display: flex;
+      align-items: center;
+    }
+
+    .header-right {
+      justify-content: flex-end;
+    }
+
+    .header-title {
+      margin: 0;
+      color: #303133;
+      display: inline-block;
+      padding-right: 10px;
+    }
+
+    .header-new-btn, .header-extra-block {
+      margin-left: 10px;
+    }
+  }
+
   .body {
-    padding: 1rem;
+    padding: 20px;
   }
 
   .data-tree-title {

styleguide.config.js

@@ -3,7 +3,7 @@ const path = require('path')
 
 const docs = [
   'basic',
-  'has-title',
+  'has-header',
   'dynamic-url',
   'filter-nodes',
   'configure-el-tree',