vue+ElementUI el-select 下拉选择 多选增加全选封装组件(2023-08-31 TSelect组件新增自定义显示下拉项label)

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

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

2、代码示例

<t-select
  v-model="selectVlaue"
  multiple
  :optionSource="listTypeInfo.stepList"
  valueKey="label"
  @change="selectChange"
/>

2、配置参数（Attributes）继承 el-select Attribute

参数	说明	类型	默认值
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’

3、 继承 el-select events

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

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