# selectTable 下拉表格
# selectTable 概述
当区块正在获取数据中时可使用，适当的等待动画可以提升用户体验。
按下esc键可关闭当前打开的弹框
# selectTable 代码示例
# 显示多选框
最简单使用 selctTable 的方法。
# 显示单选框
显示单选框
# 模糊多列匹配
模糊多列匹配
# 左列多列搜索
左列多列搜索
# 全匹配多列搜索
全匹配多列搜索
# 支持分页显示
分页需要搭配设置 remote 属性为 true
# selectTable API
# selectTable props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 输入框的值，可使用v-model双向绑定 | String/Array | -- |
| disabled | 输入框禁用 | Boolean | false |
| multiple | 是否多选 | Boolean | false |
| clearable | 是否显示可清除按钮(只单选适用) | Boolean | false |
| placeholder | 输入框内部提示语句 | String | -- |
| filterable | 是否支持模糊搜索 | Boolean | false |
| remote | 是否使用远程搜索 | Boolean | false |
| remote-method | 远程搜索的方法 | Function | - |
| matchable | 是否支持匹配(只在filterable为true时使用) | Boolean | false |
| showBottom | 设置为true时筛选框在下(只在filterable为true时使用) | Boolean | false |
| placement | 下拉框出现的位置，可选值为 top、bottom、bottom-start | String | bottom |
| width | 输入框宽度 | String/Number | -- |
| transfer | 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 | Boolean | false |
| isCheckall | 是否显示全选按钮和反选按钮(全选表示选出全部选项，反选表示清空所有选项) | Boolean | false |
| noMoreText | 下拉加载完成数据显示 | String | 没有更多数据 |
| isComputed | 是否显示加载完成数据显示 | Boolean | false |
| dropWidth | 下拉框的宽度(不设置时与输入框宽度保持一致) | String/Number | -- |
| format | 自定义显示内容第一项为列关键字,多列用逗号分开，第二项为分隔符（必填） | Array | ['name,age',''] （举例非默认值） |
| formatValue | 自定义v-model的值，目的：与format定义的lable和value分离，优先级：formatValue > format(v1.0.76) | Array String | ['name,age',''] 'name' （举例非默认值） |
| matchWay | 搜索匹配方式，可选值 left左匹配、 blurry模糊匹配和 all全项匹配 | String | 'blurry' |
| matchCol | 匹配列（只在搜索匹配模式下设置，必填）设置搜索列区域，具体数据为列关键字 | String/Array | ['name','age']（举例非默认值） |
| searchHolder | 搜索框中内置字段 | String | 请输入匹配字段 |
| checkToHead | 筛选框左侧加入多选框，可进行全选取消功能，请不要isCheckall同时使用（只在多选且筛选框下有效）(此属性只在1.0.9或以上版本有效) | Boolean | false |
# selectTable event
| 事件名 | 说明 | 返回值 |
|---|---|---|
| on-change | 选项发生变化时触发 | 返回当前选项 |
| on-scroll | 滚动下拉框中滚动条触发 | 返回滚动条到下拉框底部的距离 |
| on-focus | 获取焦点时触发 | - |
| on-blur | 失去焦点时触发 | - |
# selectTable methods
| 方法 | 说明 |
|---|---|
| focus | 通过this.refs.xxx.focus()调用,是当前输入框获取焦点,并打开选择面板(此方法只在1.0.9或以上版本有效) |
| blur (此属性只在1.0.10或以上版本有效) | 手动取消输入框焦点(this.$refs.xxx.blur()) |
tableOption props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 生成的列表的数据 | Array | - |
| columns | 生成的第一栏列表标题的数据 | Array | - |
| showHeader | 是否显示表头 | Boolean | false |
| disabledHover | 禁止表格悬浮 | Boolean | false |
| loading | 正在加载 | Boolean | false |
| noDataText | 数据为空时显示的提示内容 | String | 暂无数据 |
| highlightRow | 点击行选中（单选专用） | Boolean | true |
| rowSelect（只在多选模式下使用） | 多选时是否支持点击行选中 | Boolean | false |
# selectTable column
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 列头显示文字 | String | # |
| key | 对应列内容的字段名 | String | - |
| width | 列宽(请不要把宽度设置为小于等于0) | Number | - |
| align | 对齐方式，可选值为 left 左对齐、 right 右对齐和 center 居中对齐 | String | left |
| className | 列的样式名称 | String | - |
| hiddenCol | 是否隐藏当前列 | Boolean | false |
| ellipsis | 开启后，文本将不换行，超出部分显示为省略号 | Boolean | false |