Commit 394faf94ee9d9f156f39606f1dcecb99443675b1
1 parent
52a3208c
Exists in
master
and in
2 other branches
docs: 更新开发文档
Showing
10 changed files
with
316 additions
and
179 deletions
Show diff stats
examples/main.js
| ... | ... | @@ -13,8 +13,10 @@ import '@/styles/highlight.scss'; |
| 13 | 13 | import '@/assets/iconfont/iconfont.css'; |
| 14 | 14 | import '@/mixins/page.scss'; |
| 15 | 15 | import MIX_PAGE from '@/mixins/page.js'; |
| 16 | +import MIX_ORIGIN from '@/mixins/origin'; | |
| 16 | 17 | |
| 17 | 18 | window.MIX_PAGE = MIX_PAGE; |
| 19 | +window.MIX_ORIGIN = MIX_ORIGIN; | |
| 18 | 20 | |
| 19 | 21 | // 进度条配置 |
| 20 | 22 | NProgress.configure({ showSpinner: false }); | ... | ... |
examples/mixins/page.js
examples/router/routes.js
| ... | ... | @@ -122,6 +122,23 @@ const _develops = [ |
| 122 | 122 | meta: { title: 'Mixin Page 标准页' }, |
| 123 | 123 | component: () => import('@/views/docs/develop/mixin/page.md'), |
| 124 | 124 | }, |
| 125 | + { | |
| 126 | + path: 'orgin', | |
| 127 | + name: 'orgin', | |
| 128 | + meta: { title: 'Mixin Orgin 初始值' }, | |
| 129 | + component: () => import('@/views/docs/develop/mixin/origin.md'), | |
| 130 | + }, | |
| 131 | + ], | |
| 132 | + }, | |
| 133 | + { | |
| 134 | + group: '方案开发', | |
| 135 | + children: [ | |
| 136 | + { | |
| 137 | + path: 'scheme', | |
| 138 | + name: 'developScheme', | |
| 139 | + meta: { title: 'Scheme 方案' }, | |
| 140 | + component: () => import('@/views/docs/develop/scheme/scheme.md'), | |
| 141 | + }, | |
| 125 | 142 | ], |
| 126 | 143 | }, |
| 127 | 144 | ]; | ... | ... |
examples/views/docs/component/select.md
| ... | ... | @@ -455,6 +455,111 @@ export default { |
| 455 | 455 | |
| 456 | 456 | ::: |
| 457 | 457 | |
| 458 | +## 可创建新条目 | |
| 459 | + | |
| 460 | +设置`allow-create`和`filterable`允许创建新的选项，输入内容后可以直接选择已输入的内容 | |
| 461 | + | |
| 462 | +<div class="code-snippet-box"> | |
| 463 | + | |
| 464 | +::: snippet 单选示例 | |
| 465 | + | |
| 466 | +```html | |
| 467 | +<template> | |
| 468 | + <div> | |
| 469 | + <z-select v-model="model" allow-create filterable> | |
| 470 | + <el-option label="单车" value="VAN">单车</el-option> | |
| 471 | + <el-option label="牵引车" value="TRACTOR">牵引车</el-option> | |
| 472 | + </z-select> | |
| 473 | + <span>{{ model }}</span> | |
| 474 | + </div> | |
| 475 | +</template> | |
| 476 | + | |
| 477 | +<script> | |
| 478 | +export default { | |
| 479 | + data() { | |
| 480 | + return { | |
| 481 | + model: '', | |
| 482 | + } | |
| 483 | + } | |
| 484 | +} | |
| 485 | +</script> | |
| 486 | +``` | |
| 487 | + | |
| 488 | +::: | |
| 489 | + | |
| 490 | +::: snippet 多选示例 | |
| 491 | + | |
| 492 | +```html | |
| 493 | +<template> | |
| 494 | + <div> | |
| 495 | + <z-select v-model="model" multiple allow-create filterable> | |
| 496 | + <el-option label="单车" value="VAN">单车</el-option> | |
| 497 | + <el-option label="牵引车" value="TRACTOR">牵引车</el-option> | |
| 498 | + </z-select> | |
| 499 | + <span>{{ model }}</span> | |
| 500 | + </div> | |
| 501 | +</template> | |
| 502 | + | |
| 503 | +<script> | |
| 504 | +export default { | |
| 505 | + data() { | |
| 506 | + return { | |
| 507 | + model: '', | |
| 508 | + } | |
| 509 | + } | |
| 510 | +} | |
| 511 | +</script> | |
| 512 | +``` | |
| 513 | + | |
| 514 | +::: | |
| 515 | + | |
| 516 | +</div> | |
| 517 | + | |
| 518 | +<div class="code-snippet-box"> | |
| 519 | + | |
| 520 | +::: snippet 远程示例，输入创建的新项为临时项，选中后再次下拉时不会包括在选项结果中 | |
| 521 | + | |
| 522 | +```html | |
| 523 | +<template> | |
| 524 | + <div> | |
| 525 | + <z-select v-model="model" :options="options" :queryApi="queryAPI" allow-create filterable></z-select> | |
| 526 | + <span>{{ model }}</span> | |
| 527 | + </div> | |
| 528 | +</template> | |
| 529 | + | |
| 530 | +<script> | |
| 531 | +export default { | |
| 532 | + data() { | |
| 533 | + return { | |
| 534 | + model: '', | |
| 535 | + options: [ | |
| 536 | + { label: '王七', value: 'wq' }, | |
| 537 | + { label: '陈拾', value: 'cs' }, | |
| 538 | + ] | |
| 539 | + } | |
| 540 | + }, | |
| 541 | + methods: { | |
| 542 | + queryAPI(val) { | |
| 543 | + return new Promise(resolve => { | |
| 544 | + setTimeout(() => { | |
| 545 | + resolve({ | |
| 546 | + result: [ | |
| 547 | + { label: '王五', value: 'ww' }, | |
| 548 | + { label: '赵六', value: 'zl' }, | |
| 549 | + ] | |
| 550 | + }); | |
| 551 | + }, 1000); | |
| 552 | + }); | |
| 553 | + }, | |
| 554 | + } | |
| 555 | +} | |
| 556 | +</script> | |
| 557 | +``` | |
| 558 | + | |
| 559 | +::: | |
| 560 | + | |
| 561 | +</div> | |
| 562 | + | |
| 458 | 563 | ## API |
| 459 | 564 | |
| 460 | 565 | ## Attribute 属性 | ... | ... |
| ... | ... | @@ -0,0 +1,43 @@ |
| 1 | +# Mixin Origin 初始值 | |
| 2 | + | |
| 3 | +常用Vue页面初始值的混入配置 | |
| 4 | + | |
| 5 | +## 基础用法 | |
| 6 | + | |
| 7 | +`MIX_ORIGIN`混入配置项，会默认记录当前页面初始值。 | |
| 8 | + | |
| 9 | +::: snippet `originData`表示当前页面的初始data值，`getOriginData`方法可获得一个新的初始值对象 | |
| 10 | + | |
| 11 | +```html | |
| 12 | +<template> | |
| 13 | + <div> | |
| 14 | + <div>model初始值：{{ originData.model }}</div> | |
| 15 | + <el-input v-model="model.name" size="mini" style="width: 200px; margin: 10px 0"></el-input> | |
| 16 | + <el-button type="primary" size="mini" @click="handleReset">重置</el-button> | |
| 17 | + <div>model当前值：{{ model }}</div> | |
| 18 | + </div> | |
| 19 | +</template> | |
| 20 | + | |
| 21 | +<script> | |
| 22 | +// import MIX_ORIGIN from '@/mixins/origin'; 注：使用时解除此注释 | |
| 23 | + | |
| 24 | +export default { | |
| 25 | + mixins: [MIX_ORIGIN], | |
| 26 | + data() { | |
| 27 | + return { | |
| 28 | + model: { | |
| 29 | + name: '张三', | |
| 30 | + }, | |
| 31 | + }; | |
| 32 | + }, | |
| 33 | + methods: { | |
| 34 | + handleReset() { | |
| 35 | + // 注意：切记不可写成 this.model = this.originData.model; 否则会导致originData被改变！ | |
| 36 | + this.model = this.getOriginData().model; | |
| 37 | + } | |
| 38 | + }, | |
| 39 | +}; | |
| 40 | +</script> | |
| 41 | +``` | |
| 42 | + | |
| 43 | +::: | ... | ... |
examples/views/docs/develop/mixin/page.md
| 1 | 1 | # Mixin Page 标准页 |
| 2 | 2 | |
| 3 | -根据JSON Scheme配置自动生成一个筛选条件表单 | |
| 3 | +常规分页逻辑的混入配置 | |
| 4 | 4 | |
| 5 | 5 | ## 基础用法 |
| 6 | 6 | |
| ... | ... | @@ -51,31 +51,12 @@ export default { |
| 51 | 51 | searchModel: { |
| 52 | 52 | name: '', |
| 53 | 53 | }, |
| 54 | + tableData: [ | |
| 55 | + { id: '0', name: '李饼', age: 32 }, | |
| 56 | + { id: '1', name: '陈拾', age: 20 }, | |
| 57 | + ], | |
| 54 | 58 | }; |
| 55 | 59 | }, |
| 56 | - methods: { | |
| 57 | - searchAPI(params) { | |
| 58 | - return new Promise(resolve => { | |
| 59 | - setTimeout(() => { | |
| 60 | - const source = [ | |
| 61 | - { id: '0', name: '李饼', age: 32 }, | |
| 62 | - { id: '1', name: '陈拾', age: 20 }, | |
| 63 | - { id: '3', name: '王七', age: 26 }, | |
| 64 | - { id: '4', name: '崔倍', age: 27 }, | |
| 65 | - { id: '5', name: '孙豹', age: 38 }, | |
| 66 | - { id: '6', name: '庞柏', age: 42 }, | |
| 67 | - { id: '7', name: '蔡疏', age: 60 }, | |
| 68 | - { id: '8', name: '卢纳', age: 55 }, | |
| 69 | - ]; | |
| 70 | - const list = source.filter(item => `${item.name}`.includes(params.name)); | |
| 71 | - resolve({ | |
| 72 | - result: list, | |
| 73 | - totalCount: list.length | |
| 74 | - }); | |
| 75 | - }, 1500); | |
| 76 | - }); | |
| 77 | - }, | |
| 78 | - }, | |
| 79 | 60 | }; |
| 80 | 61 | </script> |
| 81 | 62 | |
| ... | ... | @@ -123,6 +104,7 @@ export default { |
| 123 | 104 | mixins: [MIX_PAGE], |
| 124 | 105 | data() { |
| 125 | 106 | return { |
| 107 | + auto: true, | |
| 126 | 108 | searchModel: { |
| 127 | 109 | name: '', |
| 128 | 110 | }, |
| ... | ... | @@ -147,7 +129,7 @@ export default { |
| 147 | 129 | result: list, |
| 148 | 130 | totalCount: list.length |
| 149 | 131 | }); |
| 150 | - }, 1500); | |
| 132 | + }, 500); | |
| 151 | 133 | }); |
| 152 | 134 | }, |
| 153 | 135 | }, |
| ... | ... | @@ -158,174 +140,151 @@ export default { |
| 158 | 140 | |
| 159 | 141 | ::: |
| 160 | 142 | |
| 161 | -## 内置方法 | |
| 143 | +## 弹出框表单 | |
| 162 | 144 | |
| 163 | -本混入配置中，内置了`originData`对象和`getOriginData`方法。 | |
| 145 | +常用的弹出框表单提交示例 | |
| 164 | 146 | |
| 165 | -::: snippet `originData`表示当前页面的初始data值，`getOriginData`方法可获得一个新的初始值对象 | |
| 147 | +::: snippet 新增修改共用表单示例 | |
| 166 | 148 | |
| 167 | 149 | ```html |
| 168 | 150 | <template> |
| 169 | 151 | <div> |
| 170 | - <div>model初始值：{{ originData.model }}</div> | |
| 171 | - <el-input v-model="model.name" size="mini" style="width: 200px; margin: 10px 0"></el-input> | |
| 172 | - <el-button type="primary" size="mini" @click="handleReset">重置</el-button> | |
| 173 | - <div>model当前值：{{ model }}</div> | |
| 152 | + <div class="page-search"> | |
| 153 | + <z-form :model="searchModel" label-width="80px" size="small" span="6"> | |
| 154 | + <z-form-item label="姓名" prop="name"> | |
| 155 | + <el-input v-model="searchModel.name"></el-input> | |
| 156 | + </z-form-item> | |
| 157 | + <z-form-item span="18" style="text-align: right"> | |
| 158 | + <el-button-group> | |
| 159 | + <el-button :loading="loading" type="primary" @click="onSearch">查询</el-button> | |
| 160 | + <el-button @click="onReset">重置</el-button> | |
| 161 | + </el-button-group> | |
| 162 | + </z-form-item> | |
| 163 | + </z-form> | |
| 164 | + </div> | |
| 165 | + <div class="page-action"> | |
| 166 | + <el-button type="primary" size="small" @click="openNew">新增</el-button> | |
| 167 | + </div> | |
| 168 | + <z-table class="page-table" v-loading="loading" v-bind="tableProps"> | |
| 169 | + <el-table-column prop="name" label="姓名"></el-table-column> | |
| 170 | + <el-table-column prop="age" label="年龄"></el-table-column> | |
| 171 | + <el-table-column label="操作" width="80"> | |
| 172 | + <template #default="{ row, $index }"> | |
| 173 | + <el-button size="mini" type="text" title="编辑" @click="openEdit({ row, index: $index })">编辑</el-button> | |
| 174 | + </template> | |
| 175 | + </el-table-column> | |
| 176 | + </z-table> | |
| 177 | + <el-pagination class="page-pagination" v-bind="paginationProps" v-on="paginationEvent"></el-pagination> | |
| 178 | + <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="400px" @closed="resetForm"> | |
| 179 | + <z-form ref="form" :model="form" :rules="formRules" label-width="60px" size="small"> | |
| 180 | + <z-form-item label="姓名" prop="name"> | |
| 181 | + <el-input v-model="form.name"></el-input> | |
| 182 | + </z-form-item> | |
| 183 | + <z-form-item label="年龄" prop="age"> | |
| 184 | + <el-input v-model="form.age"></el-input> | |
| 185 | + </z-form-item> | |
| 186 | + <z-form-item> | |
| 187 | + <el-button type="primary" :loading="submitting" @click="onSubmit">确定</el-button> | |
| 188 | + <el-button @click="onCancel">取消</el-button> | |
| 189 | + </z-form-item> | |
| 190 | + </z-form> | |
| 191 | + </el-dialog> | |
| 174 | 192 | </div> |
| 175 | 193 | </template> |
| 176 | 194 | |
| 177 | 195 | <script> |
| 196 | +// import MIX_PAGE from '@/mixins/page'; 注：使用时解除此注释 | |
| 197 | + | |
| 178 | 198 | export default { |
| 179 | 199 | mixins: [MIX_PAGE], |
| 180 | 200 | data() { |
| 181 | 201 | return { |
| 182 | - model: { | |
| 183 | - name: '张三', | |
| 202 | + auto: true, | |
| 203 | + searchModel: { | |
| 204 | + name: '', | |
| 184 | 205 | }, |
| 185 | - }; | |
| 186 | - }, | |
| 187 | - methods: { | |
| 188 | - handleReset() { | |
| 189 | - // 注意：切记不可写成 this.model = this.originData.model; 否则会导致originData被改变！ | |
| 190 | - this.model = this.getOriginData().model; | |
| 191 | - } | |
| 192 | - }, | |
| 193 | -}; | |
| 194 | -</script> | |
| 195 | -``` | |
| 196 | - | |
| 197 | -::: | |
| 198 | - | |
| 199 | -## 源文件 | |
| 200 | - | |
| 201 | -```js | |
| 202 | -import MIX_ORIGIN from '@/mixins/origin'; // 初始值逻辑混入 | |
| 203 | - | |
| 204 | -export default { | |
| 205 | - mixins: [MIX_ORIGIN], | |
| 206 | - data() { | |
| 207 | - return { | |
| 208 | - auto: true, // 页面加载时自动查询 | |
| 209 | - tableData: [], // 表格数据 | |
| 210 | - loading: false, // 加载状态 | |
| 211 | - total: 0, // 数据总量 | |
| 212 | - currentPage: 1, // 当前页码 | |
| 213 | - pageSize: 10, // 分页大小 | |
| 214 | - pageSizes: [10, 20, 50, 100], // 分页大小选项 | |
| 215 | - layout: 'total, sizes, prev, pager, next, jumper', // 分页器默认设置 | |
| 216 | - searchModel: {}, // 搜索表单绑定值 | |
| 217 | - form: {}, // 常规表单绑定值 | |
| 218 | - submitting: false, // 提交状态 | |
| 219 | - selection: [], // 表格选中项 | |
| 220 | - collapsed: false, // 展开状态 | |
| 206 | + form: { | |
| 207 | + id: '', | |
| 208 | + name: '', | |
| 209 | + age: '', | |
| 210 | + }, | |
| 211 | + formRules: { | |
| 212 | + name: [{ required: true, message: '请输入姓名' }] | |
| 213 | + }, | |
| 214 | + dialogVisible: false, | |
| 215 | + dialogMode: 'new', | |
| 221 | 216 | }; |
| 222 | 217 | }, |
| 223 | 218 | computed: { |
| 224 | - // 搜索栏折叠按钮文本 | |
| 225 | - toggleText() { | |
| 226 | - return this.collapsed ? '收起' : '展开'; | |
| 227 | - }, | |
| 228 | - // 表格属性 | |
| 229 | - tableProps() { | |
| 230 | - return { | |
| 231 | - size: 'mini', | |
| 232 | - rowKey: 'id', | |
| 233 | - border: true, | |
| 234 | - highlightCurrentRow: true, | |
| 235 | - data: this.tableData, | |
| 236 | - }; | |
| 237 | - }, | |
| 238 | - // 表格事件 | |
| 239 | - tableEvent() { | |
| 240 | - return { | |
| 241 | - 'selection-change': this.onSelectionChange, | |
| 242 | - }; | |
| 243 | - }, | |
| 244 | - // 分页参数 | |
| 245 | - pageParams() { | |
| 246 | - return { | |
| 247 | - currentPage: this.currentPage, | |
| 248 | - pageSize: this.pageSize, | |
| 249 | - }; | |
| 250 | - }, | |
| 251 | - // 分页器属性 | |
| 252 | - paginationProps() { | |
| 253 | - return { | |
| 254 | - 'current-page': this.currentPage, | |
| 255 | - 'page-sizes': this.pageSizes, | |
| 256 | - 'page-size': this.pageSize, | |
| 257 | - layout: this.layout, | |
| 258 | - total: this.total, | |
| 259 | - }; | |
| 260 | - }, | |
| 261 | - // 分页器事件 | |
| 262 | - paginationEvent() { | |
| 263 | - return { | |
| 264 | - 'size-change': this.onPageSizeChange, | |
| 265 | - 'current-change': this.onCurrentPageChange, | |
| 266 | - }; | |
| 267 | - }, | |
| 268 | - }, | |
| 269 | - created() { | |
| 270 | - if (this.auto) { | |
| 271 | - this.search(); | |
| 219 | + dialogTitle() { | |
| 220 | + return this.dialogMode === 'edit' ? '编辑' : '新增'; | |
| 272 | 221 | } |
| 273 | 222 | }, |
| 274 | 223 | methods: { |
| 275 | - // 空Promise | |
| 276 | - emptyPromise() { | |
| 277 | - return new Promise(resolve => resolve()); | |
| 278 | - }, | |
| 279 | - // 重置查询 | |
| 280 | - onSearch() { | |
| 281 | - this.currentPage = 1; | |
| 282 | - this.loadData(); | |
| 283 | - }, | |
| 284 | - // 切换展开状态 | |
| 285 | - toggle() { | |
| 286 | - this.collapsed = !this.collapsed; | |
| 287 | - }, | |
| 288 | - // 查询数据 | |
| 289 | - search() { | |
| 290 | - this.loadData(); | |
| 291 | - }, | |
| 292 | - // 加载数据 | |
| 293 | - async loadData() { | |
| 294 | - this.loading = true; | |
| 295 | - const params = { | |
| 296 | - ...this.searchModel, | |
| 297 | - ...this.pageParams, | |
| 298 | - }; | |
| 299 | - const searchAPI = this.searchAPI || this.emptyPromise; | |
| 300 | - await searchAPI(params) | |
| 301 | - .then(response => { | |
| 302 | - const { result = [], totalCount = 0 } = response || {}; | |
| 303 | - this.tableData = result || []; | |
| 304 | - this.total = totalCount || 0; | |
| 305 | - }) | |
| 306 | - .finally(() => { | |
| 307 | - this.loading = false; | |
| 308 | - }); | |
| 224 | + searchAPI(params) { | |
| 225 | + return new Promise(resolve => { | |
| 226 | + setTimeout(() => { | |
| 227 | + const source = [ | |
| 228 | + { id: '0', name: '李饼', age: 32 }, | |
| 229 | + { id: '1', name: '陈拾', age: 20 }, | |
| 230 | + { id: '3', name: '王七', age: 26 }, | |
| 231 | + { id: '4', name: '崔倍', age: 27 }, | |
| 232 | + { id: '5', name: '孙豹', age: 38 }, | |
| 233 | + { id: '6', name: '庞柏', age: 42 }, | |
| 234 | + { id: '7', name: '蔡疏', age: 60 }, | |
| 235 | + { id: '8', name: '卢纳', age: 55 }, | |
| 236 | + ]; | |
| 237 | + const list = source.filter(item => `${item.name}`.includes(params.name)); | |
| 238 | + resolve({ | |
| 239 | + result: list, | |
| 240 | + totalCount: list.length | |
| 241 | + }); | |
| 242 | + }, 300); | |
| 243 | + }); | |
| 309 | 244 | }, |
| 310 | - // 重置搜索表单 | |
| 311 | - onReset() { | |
| 312 | - this.searchModel = this.cloneDeep(this.originData).searchModel; | |
| 245 | + openNew() { | |
| 246 | + this.dialogMode = 'new'; | |
| 247 | + this.dialogVisible = true; | |
| 313 | 248 | }, |
| 314 | - // 多选 | |
| 315 | - onSelectionChange(selection) { | |
| 316 | - this.selection = selection; | |
| 249 | + openEdit({ row }) { | |
| 250 | + this.dialogMode = 'edit'; | |
| 251 | + this.form = this.cloneDeep(row); | |
| 252 | + this.dialogVisible = true; | |
| 317 | 253 | }, |
| 318 | - // 切换当前页码 | |
| 319 | - onCurrentPageChange(value) { | |
| 320 | - this.currentPage = value; | |
| 321 | - this.$nextTick(this.loadData); | |
| 254 | + onSubmit() { | |
| 255 | + this.$refs.form.validate(valid => { | |
| 256 | + if (valid) { | |
| 257 | + let data = this.cloneDeep(this.form); | |
| 258 | + if (this.dialogMode === 'new') { | |
| 259 | + delete data.id; | |
| 260 | + console.log('新增提交：', data); | |
| 261 | + } else if (this.dialogMode === 'edit') { | |
| 262 | + console.log('修改提交：', data); | |
| 263 | + } | |
| 264 | + this.submitting = true; | |
| 265 | + setTimeout(() => { | |
| 266 | + this.submitting = false; | |
| 267 | + this.dialogVisible = false; | |
| 268 | + this.search(); | |
| 269 | + }, 1500); | |
| 270 | + } | |
| 271 | + }); | |
| 322 | 272 | }, |
| 323 | - // 切换最大页码 | |
| 324 | - onPageSizeChange(value) { | |
| 325 | - this.currentPage = 1; | |
| 326 | - this.pageSize = value; | |
| 327 | - this.$nextTick(this.loadData); | |
| 273 | + onCancel() { | |
| 274 | + this.dialogVisible = false; | |
| 328 | 275 | }, |
| 276 | + resetForm() { | |
| 277 | + this.form = this.getOriginData().form; | |
| 278 | + this.$refs.form.resetFields(); | |
| 279 | + } | |
| 329 | 280 | }, |
| 330 | 281 | }; |
| 331 | -``` | |
| 332 | 282 | \ No newline at end of file |
| 283 | +</script> | |
| 284 | + | |
| 285 | +``` | |
| 286 | + | |
| 287 | +::: | |
| 288 | + | |
| 289 | +## 内置方法 | |
| 290 | + | |
| 291 | +本配置中，已经混入了`MIX_ORIGIN`，内置了`originData`对象和`getOriginData`方法。 | ... | ... |
packages/select/index.vue
| 1 | 1 | <template> |
| 2 | 2 | <el-select |
| 3 | + ref="select" | |
| 3 | 4 | :size="selectSize" |
| 4 | 5 | :disabled="selectDisabled" |
| 5 | 6 | :value-key="valueKey" |
| ... | ... | @@ -77,16 +78,6 @@ export default { |
| 77 | 78 | type: String, |
| 78 | 79 | default: ',', |
| 79 | 80 | }, |
| 80 | - // 请求参数 | |
| 81 | - params: { | |
| 82 | - type: Object, | |
| 83 | - default: () => ({}), | |
| 84 | - }, | |
| 85 | - // 请求配置 | |
| 86 | - config: { | |
| 87 | - type: Object, | |
| 88 | - default: () => ({}), | |
| 89 | - }, | |
| 90 | 81 | // 自定义接口 |
| 91 | 82 | queryApi: Function, |
| 92 | 83 | lazy: Boolean, |
| ... | ... | @@ -146,6 +137,9 @@ export default { |
| 146 | 137 | selectClearable() { |
| 147 | 138 | return this.clearable || this.remote; |
| 148 | 139 | }, |
| 140 | + elSelect() { | |
| 141 | + return this.$refs.select; | |
| 142 | + }, | |
| 149 | 143 | remote() { |
| 150 | 144 | return !!this.queryApi; |
| 151 | 145 | }, |
| ... | ... | @@ -279,6 +273,12 @@ export default { |
| 279 | 273 | this.loaded = true; |
| 280 | 274 | } |
| 281 | 275 | }, |
| 276 | + focus() { | |
| 277 | + this.elSelect.focus(); | |
| 278 | + }, | |
| 279 | + blur() { | |
| 280 | + this.elSelect.blur(); | |
| 281 | + }, | |
| 282 | 282 | }, |
| 283 | 283 | }; |
| 284 | 284 | </script> | ... | ... |
packages/table/editable.vue