Merge pull request '勘误&table增加doLayout事件文档' (#5) from zjl into develop

Reviewed-on: #5

package-lock.json

@@ -8,7 +8,7 @@
       "name": "code-brick-wd",
       "version": "0.1.0",
       "dependencies": {
-        "code-brick-zj": "^0.0.5",
+        "code-brick-zj": "^0.0.6",
         "core-js": "^3.8.3",
         "element-ui": "^2.15.12",
         "vue": "^2.6.14",
@@ -4007,9 +4007,9 @@
       }
     },
     "node_modules/code-brick-zj": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.5.tgz",
-      "integrity": "sha512-wvHr8EFznEkIAi9BaXGZbNRRTa+18yBVH5yyuYaaAqiXW7WINbEiFkgMqRqVmRldPNbKXIHkbsGnX+Zk6dI/nA=="
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.6.tgz",
+      "integrity": "sha512-8Wdr0J4v7zfmOLhG1fvDi5rPSkFB5r/onwi1GFdIZyiSwl5Xia61df11OdCFP8cPksL2hATiTTWs6WU/6s/cxA=="
     },
     "node_modules/color-convert": {
       "version": "1.9.3",
@@ -14473,9 +14473,9 @@
       }
     },
     "code-brick-zj": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.5.tgz",
-      "integrity": "sha512-wvHr8EFznEkIAi9BaXGZbNRRTa+18yBVH5yyuYaaAqiXW7WINbEiFkgMqRqVmRldPNbKXIHkbsGnX+Zk6dI/nA=="
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.6.tgz",
+      "integrity": "sha512-8Wdr0J4v7zfmOLhG1fvDi5rPSkFB5r/onwi1GFdIZyiSwl5Xia61df11OdCFP8cPksL2hATiTTWs6WU/6s/cxA=="
     },
     "color-convert": {
       "version": "1.9.3",

package.json

@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "code-brick-zj": "^0.0.5",
+    "code-brick-zj": "^0.0.6",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.12",
     "vue": "^2.6.14",

src/views/home/introduce.vue

@@ -3,7 +3,7 @@
     <p>
       组件包目前封装常用的四个组件:表格，搜索区域，分页，对话框。包npm地址为：https://www.npmjs.com/package/code-brick-zj。
     </p>
-    <p>文档当前使用的组件包的版本为：0.0.5</p>
+    <p>文档当前使用的组件包的版本为：0.0.6</p>
   </div>
 </template>
 <script>

src/views/table/canBeEntered.vue

@@ -4,7 +4,6 @@
     <div class="demo-box">
       <h3>表格内嵌输入框</h3>
       <base-table
-        border
         :table-props="tableProps"
         :table-data="tableData"
         @emitFun="inputChange"
@@ -26,6 +25,7 @@
                 /&gt;
               &lt;<span>/template</span>&gt;
               &lt;script&gt;
+              import inputArea from './components/InputArea.vue'
               const tableProps = [
                 {
                   prop: 'testItems',
@@ -101,6 +101,44 @@
                 }
               }
               &lt;/script&gt;
+              inputArea 参考代码：
+              &lt;template&gt;
+                &lt;div class="tableInner"&gt;
+                  &lt;el-input v-model="list[itemProp]" @blur="changeInput" /&gt;
+                &lt;/div&gt;
+              &lt;/template&gt;
+              &lt;script&gt;
+              export default {
+                name: 'InputArea',
+                props: {
+                  injectData: {
+                    type: Object,
+                    default: () => ({})
+                  },
+                  itemProp: {
+                    type: String
+                  }
+                },
+                data() {
+                  return {
+                    list: this.injectData
+                  }
+                },
+                methods: {
+                  changeInput() {
+                    console.log(this.list)
+                    this.$emit('emitData', this.list)
+                  }
+                }
+              }
+              &lt;/script&gt;
+              &lt;style scoped&gt;
+              .tableInner .el-input__inner {
+                border: none;
+                padding: 0;
+                height: 33px;
+              }
+              &lt;/style&gt;
             </pre>
           </div>
         </el-collapse-item>
@@ -109,7 +147,6 @@
     <div class="demo-box">
       <h3>表格底部新增按钮</h3>
       <base-table
-        border
         :table-props="tableProps2"
         :table-data="tableData2"
         :add-button-show="addButtonShow"
@@ -134,6 +171,7 @@
                 /&gt;
               &lt;<span>/template</span>&gt;
               &lt;script&gt;
+              import inputArea from './components/InputArea.vue'
               const tableProps = [
                 {
                   prop: 'testItems',

src/views/table/singleHead.vue

@@ -17,11 +17,16 @@
             第一列的图标可以控制表格列的显示和隐藏。序号列的宽度可以自定义，默认为70，参数为<code>pageWidth</code>,类型为<code
               >Number</code
             >
+            默认序号列是左侧固定的，如果需要取消固定可以传入参数<code>cancelPageFixed</code>值为<code>true</code>，elementUI提供了<code>doLayout</code>函数，对
+            Table 进行重新布局。当 Table
+            或其祖先元素由隐藏切换为显示时，可能需要调用此方法，具体用法如下demo
           </div>
           <div>
             <pre>
               &lt;<span>template</span>&gt;
                 &lt;base-table
+                  ref="baseTable1"
+                  id="baseTable"
                   :table-props="tableProps"
                   :page="1"
                   :limit="20"
@@ -85,6 +90,11 @@
                     }]
                   }
                 }
+              },
+              methods: {
+                doLayout() {
+                  this.$refs.baseTable1.doLayout('baseTable')
+                }
               }
               &lt;/script&gt;
             </pre>
@@ -93,7 +103,7 @@
       </el-collapse>
     </div>
     <div class="demo-box">
-      <h3>带边框和斑马纹表格</h3>
+      <h3>不带边框和带斑马纹表格</h3>
       <base-table
         :table-props="tableProps"
         :table-data="tableData"