TgSelectPlus 下拉框

# TgSelectPlus 下拉框

# Attributes

属性名	说明	类型	默认值
page	页面模型	Object	{}
entity	绑定数据(配合nameField使用)	Object	{}
nameField	绑定name字段	String	{}
dataType	数据源管理中定义的类型，用于获取下拉框数据的	String
multiple	多选	Boolean	false
codeOnly	是否只显示值	Boolean	false
dataJoin	是否显示value-label	Boolean	false
dataCustom	自定义数据源	[Array, String]	[]
placeholder	placeholder	String	请选择
dataFirst	默认选中第一个	Boolean	false
addEmpty	是否添加空选项	Boolean	false
emptyText	空选项的显示的text,默认	String	全部
disabled	只读	Boolean	false
继承el-select的所有属性

# Events

名称	说明	类型	参数
update	下拉框选中数据的回调	Functon	value

# 示例代码

# 基本用法


<TgSelectPlus :page="page" :entity="page.data.entity"  v-model="page.data.entity.baseTaxExemption" data-type="BASE_TAX_EXEMPTION"/>

1
2

# 通过正则表达式筛选数据


设置属性：data-reg-exp

<TgSelectPlus :page="page" :entity="page.data.entity"  v-model="page.data.entity.code" data-type="BASE_SETTLEMENT" :data-reg-exp="/1*/"/>

1
2
3
4

# 多选


设置属性：multiple

<TgSelectPlus :page="page" :entity="page.data.entity" v-model="page.data.entity.baseTaxExemption" data-type="BASE_TAX_EXEMPTION" multiple/>

1
2
3
4

# 获取nameField的值


设置属性：name-field；传参：entity

<TgSelectPlus :page="page" :entity="page.data.entity" v-model="page.data.entity.type" name-field="typeName"
              data-type="BASE_TAX_EXEMPTION"/>

界面获取：page.data.entity.typeName的值，就是选中的label的值

1
2
3
4
5
6
7

# value-label的显示


设置属性：data-join

<TgSelectPlus :page="page" :entity="page.data.entity"  v-model="page.data.entity.baseTaxExemption"
              data-type="BASE_TAX_EXEMPTION" data-join/>

1
2
3
4
5

# 设置延时获取焦点（仅用于当前下拉框是第一个组件）


设置属性：delay="true",默认timeout：500
timeout可以单独设置：1000

<TgSelectPlus :page="page" :entity="page.data.entity"  v-model="page.data.entity.baseTaxExemption"
              data-type="BASE_TAX_EXEMPTION"  timeout="1000" delay="true" />

1
2
3
4
5
6

# 自定义数据源(字符串或者数组)


设置属性：data-custom，可以是字符串或者数组
数组：
data-custom=[{value:'Y',label:'是'},{value:'N',label:'否'}]
字符串：
data-custom="Y|启用,N|停用"

<TgSelectPlus :page="page" v-model="page.data.entity.code4"  
:entity="page.data.entity"  
:data-custom=" [{value:'Y',label:'是'},{value:'N',label:'否'}]"/>

1
2
3
4
5
6
7
8
9
10

# 回调函数

<template>
<TgSelectPlus :page="page" :entity="page.data.entity"  v-model="page.data.entity.baseTaxExemption" 
              data-type="BASE_TAX_EXEMPTION" @update="updateAction"/>
</template>

<script>
function updateAction(data){
	//data的参数就是你当前选中的行的数据
	//data= {"label":"来料加工","value":"0214"}
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12

# 添加带参数

# 1，直接添加查询条件

在数据源中的配置sql如下：添加 ${conn}

SELECT PARA_CODE AS CODE, PARA_NAME AS NAME FROM BASE_PARAMETERS WHERE PARA_TYPE = 'BASE_COUNTRY'  ${conn}

组件使用：添加dataConn属性

<TgSelectPlus  v-model="page.data.entity.code" :entity="page.data.entity"  dataType="BASE_COUNTRY"
              dataConn="  AND PARA_CODE = '101'" />

1
2

# 2，传参查询条件的值（防止sql注入）

在数据源中的配置sql如下：添加 #{conn}

SELECT PARA_CODE AS CODE, PARA_NAME AS NAME FROM BASE_PARAMETERS WHERE PARA_TYPE = 'BASE_COUNTRY'  AND PARA_CODE like #{conn}

组件使用：添加dataConn属性

<TgSelectPlus  v-model="page.data.entity.code" :entity="page.data.entity"  dataType="BASE_COUNTRY"
              dataConn="101" />

1
2

上次更新: 2024/5/21 09:01:50

← TgInputPlus 文本框 TgChoosePlus 放大镜→