Merge branch 'dev'

.all-contributorsrc

@@ -188,6 +188,15 @@
         "code",
         "doc"
       ]
+    },
+    {
+      "login": "Htongbing",
+      "name": "Htongbing",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/36433396?v=4",
+      "profile": "https://github.com/Htongbing",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README-zh.md

@@ -50,6 +50,22 @@ el-data-table 就是为了解决业务问题而生的，故而封装了 CRUD 的
 GET /api/v1/users?page=1&size=10
 ```
 
+默认数据结构
+
+```js
+{
+  "code":0,
+  "msg":"ok",
+  "payload":{
+    "content":[], // dataPath
+    "totalElements":2, // totalPath
+  }
+}
+```
+
+可根据实际情况设置 dataPath/totalPath 两个字段的路径
+如果接口不分页, 则传 hasPagination=false, 此时默认 dataPath 为 payload, 当然此时仍可以自定义
+
 - 新增
 
 ```sh

README.md

@@ -50,6 +50,23 @@ The restful CRUD api should be:
 GET /api/v1/users?page=1&size=10
 ```
 
+default data structure
+
+```js
+{
+  "code":0,
+  "msg":"ok",
+  "payload":{
+    "content":[], // dataPath
+    "totalElements":2, // totalPath
+  }
+}
+```
+
+You can customize dataPath/totalPath.
+
+If `hasPagination=false`, default dataPath is `payload`
+
 - Create
 
 ```javascript
@@ -309,6 +326,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/snowlocked"><img src="https://avatars0.githubusercontent.com/u/19562649?v=4" width="100px;" alt=""/><br /><sub><b>snowlocked</b></sub></a><br /><a href="https://github.com/FEMessage/el-data-table/commits?author=snowlocked" title="Code">💻</a> <a href="https://github.com/FEMessage/el-data-table/commits?author=snowlocked" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/zcqno1"><img src="https://avatars0.githubusercontent.com/u/11766057?v=4" width="100px;" alt=""/><br /><sub><b>Sponge</b></sub></a><br /><a href="https://github.com/FEMessage/el-data-table/issues?q=author%3Azcqno1" title="Bug reports">🐛</a> <a href="https://github.com/FEMessage/el-data-table/commits?author=zcqno1" title="Code">💻</a></td>
     <td align="center"><a href="https://4ark.me"><img src="https://avatars0.githubusercontent.com/u/27952659?v=4" width="100px;" alt=""/><br /><sub><b>4Ark</b></sub></a><br /><a href="https://github.com/FEMessage/el-data-table/commits?author=gd4Ark" title="Code">💻</a> <a href="https://github.com/FEMessage/el-data-table/commits?author=gd4Ark" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/Htongbing"><img src="https://avatars2.githubusercontent.com/u/36433396?v=4" width="100px;" alt=""/><br /><sub><b>Htongbing</b></sub></a><br /><a href="https://github.com/FEMessage/el-data-table/commits?author=Htongbing" title="Code">💻</a></td>
   </tr>
 </table>
 

docs/axios-config.md

@@ -0,0 +1,52 @@
+axiosConfig 示例代码，打开控制台，可以看到请求中带上了自定义的头
+
+```vue
+<template>
+  <el-data-table v-bind="$data" />
+</template>
+<script>
+export default {
+  data() {
+    return {
+      axiosConfig: {
+        headers: {
+          'Authorization': 'Bearer token',
+          'X-TOKEN': 'X-TOKEN'
+        }
+      },
+      url: 'https://mockapi.eolinker.com/IeZWjzy87c204a1f7030b2a17b00f3776ce0a07a5030a1b/el-data-table?q=basic',
+      columns: [
+        {prop: 'date', label: '日期'},
+        {prop: 'name', label: '姓名'},
+        {prop: 'address', label: '地址'},
+      ],
+      form: [
+        {
+          type: 'input',
+          id: 'name',
+          label: '姓名',
+          rules: [
+            {
+              required: true,
+              message: '请输入姓名',
+              trigger: 'blur',
+              transform: v => v && v.trim()
+            }
+          ],
+          el: {placeholder: '请输入姓名'}
+        },
+      ],
+      searchForm: [
+        {
+          el: {placeholder: '请输入'},
+          label: '姓名',
+          id: 'name',
+          type: 'input'
+        }
+      ],
+      hasView: true
+    }
+  }
+}
+</script>
+```

docs/new-text.md → docs/custom-text.md

@@ -1,4 +1,4 @@
-通过prop自定义新增、修改、删除等按钮的文案
+自定义新增、修改、删除按钮以及删除提示框的文案
 
 ```vue
 <template>
@@ -10,6 +10,7 @@ export default {
     return {
       url: 'https://mockapi.eolinker.com/IeZWjzy87c204a1f7030b2a17b00f3776ce0a07a5030a1b/el-data-table?q=basic',
       columns: [
+        {type: 'selection'},
         {prop: 'date', label: '日期'},
         {prop: 'name', label: '姓名'},
         {prop: 'address', label: '地址'},
@@ -31,10 +32,15 @@ export default {
         },
       ],
       hasView: true,
-      hasDelete: false,
       newText: '创建',
       editText: '编辑',
       viewText: '详情',
+      deleteText: '移除',
+      deleteMessage(data) {
+        // 开启多选且 single = false（default）时 data 为数组，其他情况下为行数据对象。数据和传给 onDelete 的是一样
+        const name = data.map(r => r.name).join(',')
+        return `确认移除 ${name} 吗？`
+      }
     }
   }
 }

package.json

@@ -47,6 +47,7 @@
     "@babel/plugin-transform-runtime": "^7.4.3",
     "@babel/preset-env": "^7.4.3",
     "@femessage/el-form-renderer": "^1.6.0",
+    "@femessage/github-release-notes": "^0.19.0",
     "axios": "^0.19.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.5",
@@ -57,7 +58,6 @@
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^6.0.0",
     "file-loader": "^3.0.1",
-    "github-release-notes": "^0.17.0",
     "glob": "^7.1.3",
     "husky": "1.3.1",
     "jest": "^24.8.0",
@@ -111,5 +111,6 @@
       "stylelint --fix",
       "git add"
     ]
-  }
+  },
+  "gren": "@femessage/grenrc"
 }

src/el-data-table.vue

@@ -64,7 +64,7 @@
                 : !selected.length
             "
             @click="onDefaultDelete($event)"
-            >删除</el-button
+            >{{ deleteText }}</el-button
           >
           <el-button
             v-if="canSearchCollapse"
@@ -222,7 +222,7 @@
               :is-text="operationButtonType === 'text'"
               @click="onDefaultDelete(scope.row)"
             >
-              删除
+              {{ deleteText }}
             </self-loading-button>
           </template>
         </el-data-table-column>
@@ -277,18 +277,6 @@ import getLocatedSlotKeys from './utils/extract-keys'
 import transformSearchImmediatelyItem from './utils/search-immediately-item'
 import isFalsey from './utils/is-falsey'
 
-// 默认返回的数据格式如下
-//          {
-//            "code":0,
-//            "msg":"ok",
-//            "payload":{
-//              "content":[], // 数组
-//              "totalElements":2, // 总数
-//            }
-//          }
-// 可根据实际情况传入 data/total 两个字段的路径, 分别对应上面数据结构中的 content/totalElements
-// 如果接口不分页, 则传hasPagination=false, 此时数据取 payload, 当然也可以自定义, 设置dataPath即可
-
 const defaultFirstPage = 1
 
 const dataPath = 'payload.content'
@@ -474,6 +462,22 @@ export default {
       type: String,
       default: '查看'
     },
+    /**
+     * 删除按钮文案
+     */
+    deleteText: {
+      type: String,
+      default: '删除'
+    },
+    /**
+     * 删除提示语，接受要删除的数据（单选时为 row，多选时为 row 的数组），返回字符串
+     */
+    deleteMessage: {
+      type: Function,
+      default() {
+        return `确认${this.deleteText}吗?`
+      }
+    },
     /**
      * 某行数据是否可以删除, 返回true表示可以, 控制的是单选时单行的删除按钮
      */
@@ -509,7 +513,7 @@ export default {
         const ids = Array.isArray(data)
           ? data.map(v => v[this.id]).join(',')
           : data[this.id]
-        return this.$axios.delete(this.url + '/' + ids)
+        return this.$axios.delete(this.url + '/' + ids, this.axiosConfig)
       }
     },
     /**
@@ -735,6 +739,15 @@ export default {
     buttonSize: {
       type: String,
       default: 'small'
+    },
+    /**
+     * 设置axios的config参数
+     */
+    axiosConfig: {
+      type: Object,
+      default() {
+        return {}
+      }
     }
   },
   data() {
@@ -877,7 +890,7 @@ export default {
       }
 
       this.$axios
-        .get(url + queryStr)
+        .get(url + queryStr, this.axiosConfig)
         .then(({data: resp}) => {
           let data = []
 
@@ -1040,7 +1053,7 @@ export default {
             ? ['post', this.url]
             : ['put', `${this.url}/${this.row[this.id]}`]
 
-          await this.$axios[method](url, data)
+          await this.$axios[method](url, data, this.axiosConfig)
         }
         this.getList()
         this.showMessage(true)
@@ -1051,7 +1064,12 @@ export default {
       }
     },
     onDefaultDelete(row) {
-      this.$confirm('确认删除吗', '提示', {
+      const data = this.hasSelect
+        ? this.single
+          ? this.selected[0]
+          : this.selected
+        : row
+      this.$confirm(this.deleteMessage(data), '提示', {
         type: 'warning',
         confirmButtonClass: 'el-button--danger',
         beforeClose: async (action, instance, done) => {
@@ -1060,13 +1078,7 @@ export default {
           instance.confirmButtonLoading = true
 
           try {
-            if (this.hasSelect) {
-              await this.onDelete(
-                this.single ? this.selected[0] : this.selected
-              )
-            } else {
-              await this.onDelete(row)
-            }
+            await this.onDelete(data)
             done()
             this.showMessage(true)