program_xm_vue/src/components/mdp-ui/mdp-select-table/README.md

mdp-select-table 效果图

• 该组件与mdp-select效果一致，同样支持origin/tag/x三种风格，不同之处在于具有分页功能，适合超大表格数据的选择，如下图1所示，默认只会展示用过的数据，如果需要更多数据，需要点击【更多数据】按钮，将会弹出图2所示,当用户选中数据后，数据将填充到图1的下拉列表中，并且能够模拟select的选中事件

用法

最简单的用法，通过props定义编号及名称

<mdp-select-table :load-fun="loadFun" :props="propsCfgs"> 
</mdp-select-table>

  <script>
    export default {
      data() {
        return { 
            //从后台加载数据的api
            loadFun:this.$mdp.listBranch,  
            propsCfgs:{ 
              id:'branchId',//取api返回值中的branchId属性的值当成编号
              name:'branchName',//取api返回值中的branchName属性的值当成名称
            }
        }
      }
    }
  </script>

通过props定义编号及名称，通过params传递后台查询参赛

<mdp-select-table ref="selectTableRef" :load-fun="loadFun" :props="propsCfgs" :params="{relType:'1'}"> 
</mdp-select-table>

  <script>
    export default {
      data() {
        return { 
            //从后台加载数据的api
            loadFun:this.$mdp.listBranch,  
            propsCfgs:{ 
              id:'branchId',//取api返回值中的branchId属性的值当成编号
              name:'branchName',//取api返回值中的branchName属性的值当成名称
            }
        }
      }
    }
  </script>

通过props定义编号及名称，通过params传递后台查询参赛,通过插槽定义工具条

<mdp-select-table :load-fun="loadFun" :props="propsCfgs" :params="{relType:'1'}"> 
  <el-row  slot="toolbar">
    <el-button @click="addBranch">新增机构 </el-button>
    <el-button @click="$refs['selectTableRef'].$refs['tableDialog'].open()">更多数据</el-button>
  </el-row>
</mdp-select-table>

  <script>
    export default {
      data() {
        return { 
            //从后台加载数据的api
            loadFun:this.$mdp.listBranch,  
            propsCfgs:{ 
              id:'branchId',//取api返回值中的branchId属性的值当成编号
              name:'branchName',//取api返回值中的branchName属性的值当成名称
            }
        }
      },
      method:{
        addBranch(){
          //调起新增机构页面
        }
      }
    }
  </script>

通过属性columnCfgs传入表格字段列表，mdp框架将解析出表头内容，用于配置显示列，排序，高级查询等

<mdp-select-table show-style="origin" :load-fun="loadFun" :column-cfgs="columnCfgs"> 
</mdp-select-table>

  <script>
    export default {
      data() {
        return { 
            //从后台加载数据的api
            loadFun:this.$mdp.listBranch,  
            columnCfgs:{
                [
                    {label:'机构编号',property:'id'},
                    {label:'机构名称',property:'branchName'},
                    {label:'地址',property:'address'},
                ]
            }
        }
      }
    }
  </script>

多选、单选模式

<mdp-select-table show-style="origin" :load-fun="loadFun" :column-cfgs="columnCfgs" :multiple="true"> 
</mdp-select-table>

  <script>
    export default {
      data() {
        return { 
            //从后台加载数据的api
            loadFun:this.$mdp.listBranch,  
            columnCfgs:{
                [
                    {label:'机构编号',property:'id'},
                    {label:'机构名称',property:'branchName'},
                    {label:'地址',property:'address'},
                ]
            }
        }
      }
    }
  </script>

Attributes

参数	说明	类型	可选值	默认值
loadFun	查询数据的接口函数	Promise	-	-
params	提交给查询数据的接口的参赛，loadFun(params)	object	-	{}
multiple	是否多选	boolean	—	false
show-hi-query	是否显示高级查询	boolean	—	true
show-common-query	是否显示常规查询	boolean	—	true
column-cfgs	表头列配置项列表	Array	-	-
props	简化版的column-cfgs，如果配置了column-cfgs则该属性不起作用，只有两列编号及名称	Object	-	{id:'id',name:'name'}
show-type	组件分类	string	select / checkbox / radio	select
show-style	展示风格	string	origin / tag / x	origin
split	多选的时候，如果要返回字符串时的分隔符，如果设置了值，v-mode传入传出的值将是被该分隔符分割的字符串,如v-model="1,2,3,4"	string	,
filterFun	从后台返回的数据进行过滤后再装载到下拉列表,filterFun(option,options),返回true\false,false则过滤掉	function
options	直接指定列表数据	Array
plusOptions	在原有列表上添加额外的列表项
⚠️注意：	以上为mdp-ui对element-ui的改造，后面的属于element-ui的原有属性
value / v-model	绑定值	boolean / string / number	—	—
multiple	是否多选	boolean	—	false
disabled	是否禁用	boolean	—	false
value-key	作为 value 唯一标识的键名，绑定值为对象类型时必填	string	—	value
size	输入框尺寸	string	medium/small/mini	—
clearable	是否可以清空选项	boolean	—	false
collapse-tags	多选时是否将选中值按文字的形式展示	boolean	—	false
multiple-limit	多选时用户最多可以选择的项目数，为 0 则不限制	number	—	0
name	select input 的 name 属性	string	—	—
autocomplete	select input 的 autocomplete 属性	string	—	off
placeholder	占位符	string	—	请选择
no-match-text	搜索条件无匹配时显示的文字，也可以使用slot="empty"设置	string	—	无匹配数据
no-data-text	选项为空时显示的文字，也可以使用slot="empty"设置	string	—	无数据

Events

事件名称	说明	回调参数
change2	选中值发生变化时触发，在需要获取值以外更多信息时使用	目前的选中的整个对象,如果multiple=false,返回一个对象，否则返回对象数组
change	选中值发生变化时触发	目前的选中值，如果multiple=false,返回一个值，否则返回值数组，如果split有则，则返回以split分割的字符串，如1,2,3,4,5
visible-change	下拉框出现/隐藏时触发	出现则为 true，隐藏则为 false
remove-tag	多选模式下移除tag时触发	移除的tag值
clear	可清空的单选模式下用户点击清空按钮时触发	—
blur	当 input 失去焦点时触发	(event: Event)
focus	当 input 获得焦点时触发	(event: Event)

slot

name	说明
toolbar	下拉列表第一行工具条，默认为更多数据，可通过slot更改
info	鼠标未进入时展示的内容，showStyle=tag\x时有效
oper	鼠标进入后展示的内容，showStyle=tag\x时有效
~~prefix	Select 组件头部内容~~
empty	无选项时的列表

column-cfgs 表头字段配置

参数	说明	类型	可选值	默认值
label	列名	string	—	—
property	属性名，驼峰命名，用于反解析出表字段	string	—	—
sortNo	前端显示排序，排序从0-999，越小越靠前,在表头、常规查询、高级查询的显示顺序	Number	—	—
isCommon	是否常用，用于常规查询是否显示	Boolean	true/false	false
colType	数据库字段类型	string/int/date/datatime/	string/int/date/datatime/	string
showHq	是否在高级查询中显示	boolean	true、false	true
showCol	列名	boolean	—	—
sqlOper	数据库操作符	string	gt/lt/ge/le/eq/ne/left_like/right_like/like/in/nin/bwtween/sql	eq
sqlVal	默认值	string	—	多选的话逗号分隔
beginVal	区间取值时的开始值	string	—	如果sqlOper=between,值存于beginVal及envVal中
endVal	区间取值时的结束值	string	—	如果sqlOper=between,值存于beginVal及envVal中
pk	是否为主键	boolean	true、false	false
itemCode	字典表中itemCode字段，填写了该值将从字典表加载下拉列表	string	—	—
colPrefix	属性需要添加前缀时使用，比如res.id=xxxxx,此次填写res.	string	—	—
disabledHq	是否允许编辑查询条件	boolean	—	—

props 简易列配置

参数	说明	类型	可选值	默认值
id	编号列	string	id	id
name	名称列	string	name	name

Methods

方法名	说明	参数
focus	使 input 获取焦点	-
blur	使 input 失去焦点，并隐藏下拉框	-