vue+ElementUI el-select 下拉选择 多选增加全选封装组件(TSelect组件新增下拉分页功能)

2023-10-18 TSelect组件新增下拉分页功能

2023-08-31 TSelect组件新增自定义显示下拉项label

1、最终效果图（含适用于条件查询组件中使用）

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

3、在条件查询组件中使用

 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组件二次封装