2023-10-18 TSelect组件新增下拉分页功能
2023-08-31 TSelect组件新增自定义显示下拉项label
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f7480e7d0a2e11586b4c04cf657bf8f7.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8d3809f4a946f83f9a115233bc512462.gif)
2、参数配置
1、代码示例
<t-select
v-model="selectVlaue"
multiple
:optionSource="listTypeInfo.stepList"
valueKey="label"
@change="selectChange"
/>
2、配置参数(Attributes)继承 el-select Attributes
参数 | 说明 | 类型 | 默认值 |
---|
v-model | 绑定值 | boolean / string / number/Array | - |
multiple | 是否多选 (显示全选) | Boolean | false |
optionSource | 下拉数据源 | Array | - |
width | select宽度(可以设置百分比或px) | String | 100% |
customLabel | 是否自定义设置下拉label | String | - |
valueKey | 传入的 option 数组中,要作为最终选择项的键值 key | String | ‘key’ |
labelKey | 传入的 option 数组中,要作为显示项的键值名称 | String | ‘label’ |
isShowPagination | 是否显示分页(分页不显示全选框) | Boolean | false |
paginationOption | 分页配置项 | Object | - |
2-1、paginationOption配置参数(Attributes)继承 el-pagination Attributes
参数 | 说明 | 类型 | 默认值 |
---|
currentPage | 当前页数 | number | 1 |
pageSize | 每页显示条目个数 | number | 6 |
pagerCount | 设置最大页码按钮数。 页码按钮的数量,当总页数超过该值时会折叠 | number | 5 |
total | 总条目数 | number | 0 |
layout | 组件布局,子组件名用逗号分隔 | string | ‘total,prev, pager, next’ |
bind | 继承el-pagination属性 | Object | - |
3、继承 el-select&&el-pagination events
data () {
return {
queryData: {
workProcedureName: null,
workProcedureName1: null
},
stepList: [
{ label: '开始' },
{ label: 'POSUI' },
{ label: '11' },
{ label: 'GX123' },
{ label: '烘干破碎' },
{ label: '车间仓库' },
{ label: 'ui3333' },
{ label: 'hhh333' }
]
}
},
computed: {
opts () {
return {
workProcedureName1: {
label: '单选工序',
comp: 't-select',
placeholder: '单选工序',
bind: {
optionSource: this.stepList,
valueKey: 'label'
}
},
workProcedureName: {
label: '多选工序',
comp: 't-select',
placeholder: '多选工序',
bind: {
multiple: true,
optionSource: this.stepList,
valueKey: 'label'
}
}
}
},
getQueryData () {
const {workProcedureName, workProcedureName1} = this.queryData
return {
workProcedureName: workProcedureName && workProcedureName.join(','),
workProcedureName1: workProcedureName1
}
}
}
5、组件地址
gitHub组件地址
gitee码云组件地址
6、相关文章
基于ElementUi&AntdUi再次封装基础组件文档
vue+element-ui的table组件二次封装