Merge pull request '修改文档搜索框显示不下自动换行' (#11) from zjl into develop

Reviewed-on: #11

.drone.yml

@@ -0,0 +1,41 @@
+---
+kind: pipeline
+type: docker
+name: default
+
+steps:
+- name: build
+  image: docker:dind
+  volumes:
+  - name: dockersock
+    path: /var/run/docker.sock
+  - name: dockerconfig
+    path: /root/.docker
+  commands:
+  - docker build --add-host github.com:192.30.255.113 -t harbor.picaiba.com/kszny/cnbmai:1.0.0 ./ && docker push harbor.picaiba.com/kszny/cnbmai:1.0.0
+
+- name: deploy
+  image: harbor.picaiba.com/tools/kubectl:1.19.8
+  commands:
+  - echo "172.27.0.20 lb.kubesphere.local" >> /etc/hosts
+  #- echo "52.74.223.119 github.com" >> /etc/hosts
+  - sleep 1
+  - kubectl scale --replicas=0 deployment/cnbmai -n cnbmai
+  - sleep 3
+  - kubectl scale --replicas=1 deployment/cnbmai -n cnbmai
+  depends_on:
+  - build
+
+volumes:
+- name: dockersock
+  host:
+    path: /var/run/docker.sock
+- name: dockerconfig
+  host:
+    path: /root/.docker
+
+trigger:
+  branch:
+  - develop
+  event:
+  - push

Dockerfile

@@ -0,0 +1,10 @@
+FROM node:12 AS builder
+WORKDIR /app
+ADD package.json /app/
+RUN npm config set registry https://registry.npmmirror.com && npm install 
+ADD . /app
+RUN npm run build
+
+FROM busybox
+LABEL maintainer thomas.hairong@gmail.com
+COPY --from=builder /app/dist /html

package-lock.json

@@ -8,7 +8,7 @@
       "name": "code-brick-wd",
       "version": "0.1.0",
       "dependencies": {
-        "code-brick-zj": "^0.0.1",
+        "code-brick-zj": "^1.0.2",
         "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.1",
-      "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.1.tgz",
-      "integrity": "sha512-XLvQEoiVWESDirkMKVKCIdH1jW3drkSS472uMWd1m6Ul5UVTUAiJvBQ15kEo+L7w8Zt7cC5ErF+laYHhNeoaIA=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-1.1.0.tgz",
+      "integrity": "sha512-J6S5ILHdweYMiEfpLuU8EvgQNEJ4EMAvjBAbLRtpGOBtXNX4U7z+IB9jDu2FE1TdkOaKJUpVLubgZwxkGzXNaA=="
     },
     "node_modules/color-convert": {
       "version": "1.9.3",
@@ -14473,9 +14473,9 @@
       }
     },
     "code-brick-zj": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.1.tgz",
-      "integrity": "sha512-XLvQEoiVWESDirkMKVKCIdH1jW3drkSS472uMWd1m6Ul5UVTUAiJvBQ15kEo+L7w8Zt7cC5ErF+laYHhNeoaIA=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-1.1.0.tgz",
+      "integrity": "sha512-J6S5ILHdweYMiEfpLuU8EvgQNEJ4EMAvjBAbLRtpGOBtXNX4U7z+IB9jDu2FE1TdkOaKJUpVLubgZwxkGzXNaA=="
     },
     "color-convert": {
       "version": "1.9.3",

package.json

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

src/router/index.js

@@ -112,6 +112,24 @@ export const routes = [
       }
     ]
   },
+  {
+    path: '/splitPane',
+    component: Layout,
+    name: 'splitPane',
+    meta: {
+      title: '分割面板'
+    },
+    children: [
+      {
+        path: 'splitPane',
+        name: 'splitPane',
+        meta: {
+          title: '分割面板'
+        },
+        component: () => import('../views/splitPane/splitPane')
+      }
+    ]
+  },
   { path: '*', redirect: '/home/introduce', hidden: true }
 ]
 

src/views/home/introduce.vue

@@ -3,7 +3,79 @@
     <p>
       组件包目前封装常用的四个组件:表格，搜索区域，分页，对话框。包npm地址为：https://www.npmjs.com/package/code-brick-zj。
     </p>
-    <p>文档当前使用的组件包的版本为：0.0.3</p>
+    <p>文档当前使用的组件包的版本为：1.1.0</p>
+    <div class="block">
+      <el-timeline>
+        <el-timeline-item timestamp="2024/4/10" placement="top">
+          <el-card>
+            <h4>修改</h4>
+            <h4>搜索栏：去除展开收起的样式，变成显示不下自动换行</h4>
+            <p>组件版本号为：1.1.0</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="2023/11/28" placement="top">
+          <el-card>
+            <h4>修改</h4>
+            <h4>
+              searchBar：select增加属性collapseTags将选中值按文字的形式展示
+              multipleLimit来设置多选时用户最多可以选择的项目数
+              placeholder有值显示，无值默认显示label
+            </h4>
+            <p>组件版本号为：1.0.5</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="2023/11/24" placement="top">
+          <el-card>
+            <h4>增加/修改</h4>
+            <h4>
+              表格：增加表格操作列按钮的tooltip样式，
+              设置showTip的值即可对当前按钮开启tooptip并显示showTip中的值
+            </h4>
+            <h4>时间选择器：修改了默认的width尺寸</h4>
+            <p>组件版本号为：1.0.3</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="2023/2/28" placement="top">
+          <el-card>
+            <h4>修改</h4>
+            <h4>搜索栏：增加展开收起的样式" 1.1.0 "版本开始废弃</h4>
+            <p>组件版本号为：1.0.2</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="2023/2/28" placement="top">
+          <el-card>
+            <h4>新增</h4>
+            <h4>增加组件SplitPane,可以拖动来调整面板的大小</h4>
+            <p>组件版本号为：0.1.0</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="2023/1/10" placement="top">
+          <el-card>
+            <h4>修改</h4>
+            <h4>搜索区域UI样式更新,按2023.1.16的样式修改</h4>
+            <p>组件版本号为：0.0.7</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="2023/1/9" placement="top">
+          <el-card>
+            <h4>修改</h4>
+            <h4>
+              1.table的序号列默认左侧固定，提供cancelPageFixed可以取消固定。
+            </h4>
+            <h4>2.提供方法doLayout，具体见文档基础表格下说明。</h4>
+            <p>组件版本号为：0.0.6</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="2023/1/6" placement="top">
+          <el-card>
+            <h4>修改</h4>
+            <h4>1.table改成默认有border的，需要无border的table另外传参数。</h4>
+            <h4>2.css修改，适配没有sass-loader的项目</h4>
+            <p>组件版本号为：0.0.5</p>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
   </div>
 </template>
 <script>

src/views/searchBar/searchBar.vue

@@ -2,6 +2,10 @@
   <div class="search-bar">
     <div class="demo-box">
       <h3>input输入框(size默认small高度是32px)</h3>
+      <p>
+        部分业务需要输入框必填， 可以设置required的值为true来显示红星，
+        判断逻辑还是得在js中写，required只是样式上显示红星
+      </p>
       <div style="height: 50px">
         <SearchBar :formConfigs="formConfig1" />
       </div>
@@ -22,7 +26,8 @@
                         type: 'input',
                         label: '姓名',
                         placeholder: 'width不传默认200px',
-                        param: 'xm1'
+                        param: 'xm1',
+                        required: true
                       },
                       {
                         type: 'input',
@@ -59,6 +64,9 @@
       <h3>
         select下拉框(选项默认是id和name,可以通过labelField，valueField去改取值的key)
       </h3>
+      <p>
+        可以通过multiple:true来开启多选，collapseTags:true来将选中值按文字的形式展示，multipleLimit来设置多选时用户最多可以选择的项目数
+      </p>
       <div style="height: 50px">
         <SearchBar
           :formConfigs="formConfig2"
@@ -118,10 +126,16 @@
                         label: '性别',
                         selectOptions: [
                           { id: 1, name: '男(可多选)' },
-                          { id: 2, name: '女' }
+                          { id: 2, name: '女' },
+                          { id: 3, name: '未知1' },
+                          { id: 4, name: '保密' },
+                          { id: 5, name: '保密2' }
                         ],
+                        placeholder: '多选',
                         param: 'xb4',
-                        multiple: true
+                        multiple: true,
+                        collapseTags: true,
+                        multipleLimit: 3
                       },
                       {
                         type: 'select',
@@ -145,7 +159,7 @@
     </div>
     <div class="demo-box">
       <h3>Cascader 级联选择器</h3>
-      <div style="height: 120px">
+      <div>
         <SearchBar
           :formConfigs="formConfig22"
           @headBtnClick="headBtnClickCascader"
@@ -153,7 +167,7 @@
       </div>
       <el-collapse>
         <el-collapse-item title="显示代码">
-          <div class="description"></div>
+          <div class="description">搜索条件过多的，显示不下自动换行</div>
           <div>
             <pre>
               &lt;<span>template</span>&gt;
@@ -589,6 +603,9 @@
                         btnName: '重置',
                         name: 'reset'
                       },
+                      {
+                        type: 'separate'
+                      },
                       {
                         type: 'button',
                         btnName: '打印',
@@ -1137,7 +1154,8 @@ export default {
           type: 'input',
           label: '姓名',
           placeholder: 'width不传默认200px',
-          param: 'xm1'
+          param: 'xm1',
+          required: true
         },
         {
           type: 'input',
@@ -1199,10 +1217,16 @@ export default {
           label: '性别',
           selectOptions: [
             { id: 1, name: '男(可多选)' },
-            { id: 2, name: '女' }
+            { id: 2, name: '女' },
+            { id: 3, name: '未知1' },
+            { id: 4, name: '保密' },
+            { id: 5, name: '保密2' }
           ],
+          placeholder: '多选',
           param: 'xb4',
-          multiple: true
+          multiple: true,
+          collapseTags: true,
+          multipleLimit: 3
         },
         {
           type: 'select',
@@ -1318,6 +1342,16 @@ export default {
           endPlaceholder: '结束时间',
           defaultSelect: ['2022-08-11', '2022-08-12'],
           param: 'searchTime4'
+        },
+        {
+          type: 'datePicker',
+          label: '产品上片时间',
+          dateType: 'datetime',
+          format: 'yyyy-MM-dd HH:mm:ss',
+          valueFormat: 'yyyy-MM-dd HH:mm:ss',
+          placeholder: '产品上片时间',
+          param: 'testTime',
+          width: 200
         }
       ],
       formConfig33: [
@@ -1443,6 +1477,9 @@ export default {
           btnName: '重置',
           name: 'reset'
         },
+        {
+          type: 'separate'
+        },
         {
           type: 'button',
           btnName: '打印',
@@ -1454,7 +1491,8 @@ export default {
           type: 'button',
           btnName: '成功',
           name: 'success',
-          color: 'success'
+          color: 'success',
+          plain: true
         },
         {
           type: 'button',

src/views/splitPane/splitPane.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="split-page">
+    <h2>可将一片区域，分割为可以拖拽调整宽度或高度的两部分区域。</h2>
+    <div class="demo-box">
+      <h3>左右分割</h3>
+      <div class="split">
+        <SplitPane v-model="split1">
+          <template #left>
+            <div class="split-pane">Left Pane</div>
+          </template>
+          <template #right>
+            <div class="split-pane">Right Pane</div>
+          </template>
+        </SplitPane>
+      </div>
+      <el-collapse>
+        <el-collapse-item title="显示代码">
+          <div>
+            <pre>
+              &lt;div class="split"&gt;
+                &lt;SplitPane v-model="split1"&gt;
+                  &lt;template #left&gt;
+                    &lt;div class="split-pane"&gt;Left Pane&lt;/div&gt;
+                  &lt;/template&gt;
+                  &lt;template #right&gt;
+                    &lt;div class="split-pane"&gt;Right Pane&lt;/div&gt;
+                  &lt;/template&gt;
+                &lt;/SplitPane&gt;
+              &lt;/div&gt;
+              data() {
+                return {
+                  split1: 0.5
+                }
+              }
+              .split {
+                height: 200px;
+                border: 1px solid #dcdee2;
+              }
+              .split-pane {
+                padding: 20px;
+              }
+            </pre>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="demo-box">
+      <h3>上下分割</h3>
+      <div class="split">
+        <SplitPane v-model="split2" mode="vertical">
+          <template #top>
+            <div class="split-pane">Left Pane</div>
+          </template>
+          <template #bottom>
+            <div class="split-pane">Right Pane</div>
+          </template>
+        </SplitPane>
+      </div>
+      <el-collapse>
+        <el-collapse-item title="显示代码">
+          <div>
+            <pre>
+              &lt;div class="split" mode="vertical"&gt;
+                &lt;SplitPane v-model="split2"&gt;
+                  &lt;template #top&gt;
+                    &lt;div class="split-pane"&gt;Left Pane&lt;/div&gt;
+                  &lt;/template&gt;
+                  &lt;template #bottom&gt;
+                    &lt;div class="split-pane"&gt;Right Pane&lt;/div&gt;
+                  &lt;/template&gt;
+                &lt;/SplitPane&gt;
+              &lt;/div&gt;
+              data() {
+                return {
+                  split2: 0.5
+                }
+              }
+              .split {
+                height: 200px;
+                border: 1px solid #dcdee2;
+              }
+              .split-pane {
+                padding: 20px;
+              }
+            </pre>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="demo-box">
+      <h3>嵌套使用</h3>
+      <div class="split">
+        <SplitPane v-model="split3">
+          <template #left>
+            <div class="split-pane no-padding">
+              <SplitPane v-model="split4" mode="vertical">
+                <template #top>
+                  <div class="split-pane">Top Pane</div>
+                </template>
+                <template #bottom>
+                  <div class="split-pane">Bottom Pane</div>
+                </template>
+              </SplitPane>
+            </div>
+          </template>
+          <template #right>
+            <div class="split-pane">Right Pane</div>
+          </template>
+        </SplitPane>
+      </div>
+      <el-collapse>
+        <el-collapse-item title="显示代码">
+          <div>
+            <pre>
+              &lt;div class="split"&gt;
+                &lt;SplitPane v-model="split3"&gt;
+                  &lt;template #left&gt;
+                    &lt;div class="split-pane no-padding"&gt;
+                      &lt;SplitPane v-model="split4" mode="vertical"&gt;
+                        &lt;template #top&gt;
+                          &lt;div class="split-pane"&gt;Top Pane&lt;/div&gt;
+                        &lt;/template&gt;
+                        &lt;template #bottom&gt;
+                          &lt;div class="split-pane"&gt;Bottom Pane&lt;/div&gt;
+                        &lt;/template&gt;
+                      &lt;/SplitPane&gt;
+                    &lt;/div&gt;
+                  &lt;/template&gt;
+                  &lt;template #right&gt;
+                    &lt;div class="split-pane"&gt;Right Pane&lt;/div&gt;
+                  &lt;/template&gt;
+                &lt;/SplitPane&gt;
+              &lt;/div&gt;
+              data() {
+                return {
+                  split3: 0.5,
+                  split4: 0.5
+                }
+              }
+              .split {
+                height: 200px;
+                border: 1px solid #dcdee2;
+              }
+              .split-pane {
+                padding: 20px;
+              }
+              .split-pane.no-padding {
+                height: 200px;
+                padding: 0;
+              }
+            </pre>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div>
+      <h3>API</h3>
+      <h4>SplitPane Props</h4>
+      <base-table :table-props="tableProps1" :table-data="tableData1" />
+      <h4>SplitPane Events</h4>
+      <base-table :table-props="tableProps2" :table-data="tableData2" />
+      <h4>SplitPane Slots</h4>
+      <base-table :table-props="tableProps3" :table-data="tableData3" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'splitPane',
+  data() {
+    return {
+      split1: 0.5,
+      split2: 0.5,
+      split3: 0.5,
+      split4: 0.5,
+      tableProps1: [
+        {
+          prop: 'a1',
+          label: '属性'
+        },
+        {
+          prop: 'a2',
+          label: '说明',
+          minWidth: 200
+        },
+        {
+          prop: 'a3',
+          label: '类型'
+        },
+        {
+          prop: 'a4',
+          label: '默认值'
+        }
+      ],
+      tableData1: [
+        {
+          a1: 'model-value',
+          a2: '面板位置，可以是 0~1 代表百分比，或具体数值的像素，可用 v-model 双向绑定',
+          a3: 'Number | String',
+          a4: '0.5'
+        },
+        {
+          a1: 'mode',
+          a2: '类型，可选值为 horizontal 或 vertical',
+          a3: 'String',
+          a4: 'horizontal'
+        },
+        {
+          a1: 'min',
+          a2: '最小阈值',
+          a3: 'Number | String',
+          a4: '40px'
+        },
+        {
+          a1: 'max',
+          a2: '最大阈值',
+          a3: 'Number | String',
+          a4: '40px'
+        }
+      ],
+      tableProps2: [
+        {
+          prop: 'a1',
+          label: '事件名'
+        },
+        {
+          prop: 'a2',
+          label: '说明'
+        },
+        {
+          prop: 'a3',
+          label: '返回值'
+        }
+      ],
+      tableData2: [
+        {
+          a1: 'on-move-start',
+          a2: '拖拽开始',
+          a3: '-'
+        },
+        {
+          a1: 'on-moving',
+          a2: '拖拽中',
+          a3: 'event'
+        },
+        {
+          a1: 'on-move-end',
+          a2: '拖拽结束',
+          a3: '-'
+        }
+      ],
+      tableProps3: [
+        {
+          prop: 'a1',
+          label: '名称'
+        },
+        {
+          prop: 'a2',
+          label: '说明'
+        }
+      ],
+      tableData3: [
+        {
+          a1: 'left',
+          a2: 'mode 为 horizontal 时可用，左边面板'
+        },
+        {
+          a1: 'right',
+          a2: 'mode 为 horizontal 时可用，右边面板'
+        },
+        {
+          a1: 'top',
+          a2: 'mode 为 vertical 时可用，上边面板'
+        },
+        {
+          a1: 'bottom',
+          a2: 'mode 为 vertical 时可用，下边面板'
+        },
+        {
+          a1: 'trigger',
+          a2: '自定义分割拖拽节点'
+        }
+      ]
+    }
+  },
+  methods: {}
+}
+</script>
+<style lang="scss" scoped>
+.split-page {
+  .demo-box {
+    margin-bottom: 40px;
+    .split {
+      height: 200px;
+      border: 1px solid #dcdee2;
+    }
+    .split-pane {
+      padding: 20px;
+    }
+    .split-pane.no-padding {
+      height: 200px;
+      padding: 0;
+    }
+  }
+}
+</style>

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,18 @@
             第一列的图标可以控制表格列的显示和隐藏。序号列的宽度可以自定义，默认为70，参数为<code>pageWidth</code>,类型为<code
               >Number</code
             >
+            。默认序号列是左侧固定的，如果需要取消固定可以传入参数<code>cancelPageFixed</code>值为<code>true</code>，elementUI提供了<code>doLayout</code>函数，对
+            Table 进行重新布局。当 Table
+            或其祖先元素由隐藏切换为显示时，可能需要调用此方法，具体用法如下demo。<code
+              >cancelPageFixed</code
+            ><code>doLayout</code>函数在组件code-brick-zj0.0.6版本支持。
           </div>
           <div>
             <pre>
               &lt;<span>template</span>&gt;
                 &lt;base-table
+                  ref="baseTable1"
+                  id="baseTable"
                   :table-props="tableProps"
                   :page="1"
                   :limit="20"
@@ -85,6 +92,11 @@
                     }]
                   }
                 }
+              },
+              methods: {
+                doLayout() {
+                  this.$refs.baseTable1.doLayout('baseTable')
+                }
               }
               &lt;/script&gt;
             </pre>
@@ -93,14 +105,14 @@
       </el-collapse>
     </div>
     <div class="demo-box">
-      <h3>带边框和斑马纹表格</h3>
+      <h3>不带边框和带斑马纹表格</h3>
       <base-table
         :table-props="tableProps"
         :table-data="tableData"
         stripe
         :page="1"
         :limit="20"
-        border
+        :cancel-border="true"
       />
       <el-collapse>
         <el-collapse-item title="显示代码">
@@ -108,7 +120,7 @@
             <code>stripe</code>属性可以创建带斑马纹的表格。它接受一个
             <code>Boolean</code>，默认为<code>false</code>，
             设置为<code>true</code>即为启用。默认情况下，Table
-            组件是不具有竖直方向的边框的，如果需要，可以使用<code>border</code>属性，它接受一个<code>Boolean</code>，设置为<code>true</code>即可启用。
+            组件是有竖直方向的边框的，如果需要取消，可以使用<code>cancel-border</code>属性，它接受一个<code>Boolean</code>，设置为<code>true</code>即可取消边框，<code>cancel-border</code>属性在组件code-brick-zj0.0.5版本支持。
           </div>
           <div>
             <pre>
@@ -119,7 +131,7 @@
                   :limit="20"
                   :table-data="tableData"
                   stripe
-                  border
+                  :cancel-border="true"
                 /&gt;
               &lt;<span>/template</span>&gt;
             </pre>
@@ -318,7 +330,11 @@
     </div>
     <div class="demo-box">
       <h3>单选</h3>
+      <el-button size="small" @click="setCurrent(1)">选中第二行</el-button>
+      <el-button size="small" @click="setCurrent(-1)">取消选中</el-button>
       <base-table
+        ref="palletTable1"
+        id="palletTable"
         :table-props="tableProps"
         :table-data="tableData"
         :page="1"
@@ -332,11 +348,16 @@
             Table
             组件提供了单选的支持，只需要配置<code>highlight-current-row</code>属性即可实现单选。
             之后由<code>current-change</code>事件来管理选中时触发的事件，它会传入<code>currentRow</code>，<code>oldCurrentRow</code>。
+            使用按钮选中取消，必须要传id,id的值是唯一的，id的值需要和<code>setCurrent</code>中第一参数一样。
           </div>
           <div>
             <pre>
+              &lt;el-button size="small" @click="setCurrent(1)"&gt;选中第二行&lt;/el-button&gt;
+              &lt;el-button size="small" @click="setCurrent(-1)"&gt;取消选中&lt;/el-button&gt;
               &lt;<span>template</span>&gt;
                 &lt;base-table
+                  ref="palletTable1"
+                  id="palletTable"
                   :table-props="tableProps"
                   :table-data="tableData"
                   :page="1"
@@ -345,6 +366,10 @@
                   @current-change="handleCurrentChange"
                 /&gt;
               &lt;<span>/template</span>&gt;
+              methods:
+              setCurrent(index) {
+                this.$refs.palletTable1.setCurrent('palletTable', index)
+              }
             </pre>
           </div>
         </el-collapse-item>
@@ -494,6 +519,11 @@
         详情--detail 编辑---edit
         删除---delete,以上三个是显示图标，其他按钮显示中文字字，图标按上述传，自动加载图标。
       </p>
+      <p>
+        showTip:默认是禁用的，如部分按钮文字过长，需缩短文字，又怕意思不清，
+        可以加showTip来显示，具体样式见 开始 按钮。
+        showParam:是控制按钮能否被点击，可以根据表格中的字段，按规则来控制按钮。
+      </p>
       <base-table :table-props="tableProps" :table-data="tableData">
         <method-btn
           v-if="tableBtn.length"
@@ -587,6 +617,7 @@
                 {
                   type: 'start',
                   btnName: '开始',
+                  showTip: '开始生产',
                   showParam: {
                     type: '&',
                     data: [
@@ -858,6 +889,7 @@ const tableBtn = [
   {
     type: 'start',
     btnName: '开始',
+    showTip: '开始生产',
     showParam: {
       type: '&',
       data: [
@@ -1168,8 +1200,8 @@ export default {
       }
       return ''
     },
-    setCurrent(row) {
-      this.$refs.singleTable.setCurrentRow(this.tableData[row])
+    setCurrent(index) {
+      this.$refs.palletTable1.setCurrent('palletTable', index)
     },
     handleCurrentChange(val) {
       console.log(val)